Question

我有一个联系表单，当成功提交时，会打开一个Bootstrap模式，让用户知道发送成功。它在成功时打开就好了，但当我点击关闭时，它不会保持关闭状态。一两秒后，它再次打开并提交另一个表单/消息。请参阅下面的代码。我在某个地方循环，并认为我错过了某个地方的“return”或“preventDefault（）”。谢谢！

$(document).ready(function() {    

$(function() {

// Get the form.
var form = $('#ajax-contact');

// Get the messages div.
//var formMessages = $('#form-messages');

$('#successModal').modal({
    show: false
});

$('#errorModal').modal({
    show: false
});

// Set up an event listener for the contact form.
$("button").click(function(e) {

    // Stop the browser from submitting the form.
    e.preventDefault(e);

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        success: function(result){
            $('#contact-name').val('');
            $('#contact-email').val('');
            $('#contact-website').val('');
            $('#contact-message').val('');

            $('#successModal').modal({
                show: true
            });

        },
        error: function(xhr,status,error){
            //$('#errorModal').modal('show')
        }


    });



});



});



});

Answer 1

你的成功函数调用它来显示模态，而不是关闭它。：

    $('#successModal').modal({
            show: true
        });

如果您希望它在成功时关闭它，您可以使用此代替

   $('#successModal').modal('hide');

或者您也可以将此添加到提交按钮。

data-dismiss="modal"

我不知道你为什么这么说：

 $('#successModal').modal({
show: false
});

Answer 2

所以我相信我认为这一点。我的点击事件启动ajax POST过程是抓取“按钮”，模式中的“关闭”也是一个“按钮”，所以当我点击它再次运行Javascript时。我在我的表单上给了我的“提交”按钮一个单独的ID，在我的Javascript文件中更改它现在工作得很好。简直不敢相信。

Bootstrap模式在成功提交表单时打开，但在单击“关闭”按钮时不会保持关闭状态

2 个答案: