通过使用Bootstrap 4模式保持在同一页面上来发送表单

时间:2018-12-11 11:13:34

标签: jquery ajax bootstrap-modal

在我使用Jquery和Ajax提交表单后,我希望停留在同一页面上,但无法正常工作。我使用bootstrap 4,我的联系方式为模式。

感谢您的帮助!

$(function () {
    window.verifyRecaptchaCallback = function (response) {
        $('input[data-recaptcha]').val(response).trigger('change');
    }

    window.expiredRecaptchaCallback = function () {
        $('input[data-recaptcha]').val("").trigger('change');
    }
    $('#contact-form').validator();

    $("#contact-form").submit(function (event) {
        var url = "contact.php";
        if ($("#contact-form input").hasClass("inputempty")) {
            event.preventDefault();
            $("#contactmessages").html('<div class="alert alert-danger alert-dismissable">Veuillez remplir tous les champs correctement<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>')
        } else if ($("#contact-form input").hasClass("inputerror")) {
            event.preventDefault();
            $("#contactmessages").html('<div class="alert alert-danger alert-dismissable">Veuillez remplir tous les champs correctement<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>')
        } else {
            $.ajax({
                type: "POST", url: url, data: $(this).serialize(), success: function (data) {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;
                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('#contactmessages').html(alertBox)
                    }
                }
            });
            return !1
        }
    })
})

0 个答案:

没有答案