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

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

对于表单内容，您希望在成功 block 中重置表单。请参阅下面的修改后的代码:

$('#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!');
            }
            });
        });
    });