我在 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 部分有效,发送了正确的电子邮件,我只是想找到一种方法来关闭模式并可能在再次打开时刷新表单。
感谢您的帮助!
最佳答案
编辑:
如果 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!');
}
});
});
});
关于javascript - 使用提交按钮在 jQuery 模式中关闭 HTML 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33352133/