Question

我在jQuery模式中继承了以下HTML表单：

<div id = "openModal" class = "modalDialog">
<div>
<a href = "#close" title = "close" class = "close">X</a>
<form id = "write_us_form" action="" method = "post">
    <div class = "form_container">
        <label class = "form_label">Name</label>
        <input type = "text" class = "form_textfield" name = "f_name"><br>
        <label class = "form_label">E-mail</label>
        <input type = "text" class = "form_textfield" name = "f_email"><br>
        <label class = "form_label">Subject</label>
        <input type = "text" class = "form_textfield" name = "f_subject"><br>
        <label class = "form_label">Message</label>
        <textarea class = "form_textarea" name = "f_message" rows = "5"></textarea>
        <input type = "submit" class = "form_submit_button" value = "Send message">
    </div>
</form>
</div>
</div>

当我单击提交按钮时，运行以下jQuery脚本，显然是为了不刷新页面并运行send_form.php文件来发送电子邮件：

$(function ()
{
    $('#write_us_form').on('submit', function (e)
    {
        e.preventDefault (); // prevent page reload
        $.ajax (
        {
            type : 'POST', // hide URL
            url : 'send_form.php', // form validation file
            data : $('#write_us_form').serialize (),
            success : function (data)
            {
                $('#openModal').dialog('close');
                alert ('Thank you for contacting us!');
            }
            });
        });
    });

代码不做两件事： 1.关闭模态。我已经添加了对话框（'close'）部分，但它没有任何效果。 2.如果我用关闭按钮关闭模态，然后单击显示模态的网站上的正确按钮，表单中仍然包含之前的内容。

php部分有效，发送了正确的电子邮件，我只是想找到一种方法来关闭模式，并在重新打开时刷新表单。

感谢您提供任何帮助！

Answer 1

修改：

如果您的ajax呼叫不成功，您的对话框可能不会关闭。如果您感谢您与我们联系＆＃39;正在执行警报并且您的模态仍未关闭，这可能是您的语法问题。可能是这样的，你的模态是一个引导模态，在这种情况下语法会有所不同。你想要hide模态。

如果是表单内容，您希望reset成功块中的表单。请参阅以下修改后的代码：

$('#write_us_form').on('submit', function (e)
    {
        e.preventDefault (); // prevent page reload
        $.ajax (
        {
            type : 'POST', // hide URL
            url : 'send_form.php', // form validation file
            data : $('#write_us_form').serialize (),
            success : function (data)
            {
                $('#openModal').modal('hide');
                $("#write_us_form").trigger("reset");
                alert ('Thank you for contacting us!');
            }
            });
        });
    });

使用提交按钮在jQuery模式中关闭HTML表单

1 个答案: