anmeldeportal_hochzeit/frontend/js/form.js

$(function () {
    $(
        "input,textarea,select"
    ).not(
        "[type=submit]"
    ).jqBootstrapValidation({
        preventSubmit: true,
        submitError: function ($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function ($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            $this = $("#sendMessageButton");
            $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
            // use ajax to call
            $.ajax({
                url: $("form#form_anmelden").attr("action"),
                type: "POST",
                data: $("form#form_anmelden").serialize(),
                cache: false,
                success: function () {
                    // Success message
                    $("#form_message").html("<div class='alert alert-form_message text-white'>");
                    $("#form_message > .alert-form_message")
                        .html(
                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true' text-white>&times;"
                        )
                        .append("</button>");
                    $("#form_message > .alert-form_message").append(
                        "<strong>Danke, wir haben die Daten empfangen. </strong>"
                    );
                    $("#form_message > .alert-form_message").append("</div>");
                    //clear all fields
                    // $("#contactForm").trigger("reset");

                    // next button
                    $("#form_next").html("<div class='my-5 text-center'>");
                    $("#form_next > .text-center")
                        .html(
                            "<a class='btn btn-primary btn-xl js-scroll-trigger'" +
                                "href='#ablauf'>Das erwartet uns ..."
                        )
                        .append("</a>");
                    $("#form_next > .text-center")
                        .append("</div>")
                        .append("<script src='js/scripts.js'></script>");

                    //hide sendMessageButton
                    // $this.style.visibility = "hidden";

                    //clear all fields
                    $("#form_anmelden").trigger("reset");

                },
                error: function () {
                    // Fail message
                    $("#form_message").html("<div class='alert alert-danger'>");
                    $("#form_message > .alert-danger")
                        .html(
                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
                        )
                        .append("</button>");
                    $("#form_message > .alert-danger").append(
                        $("<strong>").text(
                            "Sorry, es ist eine Fehler aufgetreten. Versuche es bitte nochmal. Sollte der Fehler wieder auftreten, schicke uns bitte ein Nachricht!"
                        )
                    );
                    $("#form_message > .alert-danger").append("</div>");
                    //clear all fields
                    // $("#contactForm").trigger("reset");

                    // contact button
                    $("#form_next").html("<div class='my-5 text-center'>");
                    $("#form_next > .text-center")
                        .html(
                            "<a class='btn btn-primary btn-xl text-uppercase js-scroll-trigger'" +
                                "href='#kontakt'>Kontakt Möglichkeiten"
                        )
                        .append("</a>");
                    $("#form_next > .text-center")
                        .append("</div>")
                        .append("<script src='js/scripts.js'></script>");

                    setTimeout(function () {
                        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
                    }, 1000);

                },
                // complete: function () {
                //     setTimeout(function () {
                //         $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
                //     }, 1000);
                // },
            });
        },
        filter: function () {
            return $(this).is(":visible");
        },
    });

    $('a[data-toggle="tab"]').click(function (e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

/*When clicking on Full hide fail/success boxes */
$("#name").focus(function () {
    $("#form_message").html("");
});