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

Question

我在 jQuery modal 中继承了以下 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. 关闭模态。我已经添加了 dialog('close') 部分，但它没有任何效果。 2. 如果我用关闭按钮关闭模态，然后在显示模态的网站上单击正确的按钮，表单中仍然有以前的内容。

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

感谢您的帮助！

Answer 1

编辑：

如果您的 ajax 调用不成功，您的对话框可能不会关闭。如果您的“感谢您联系我们”警报正在执行并且您的模式仍未关闭，则可能是您的语法有问题。可能的情况是，您的模式是引导模式，在这种情况下，语法会有所不同。你会想要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!');
            }
            });
        });
    });