我的模态持有一个表单,我想在用户单击提交按钮时关闭模式。 简化形式如下所示: 你可以看到两个按钮。 关闭按钮使用data-dismiss='modal' ,工作正常。 但是我不能在提交按钮上使用它,因为它“取消”了ng-submit=submitModule()提交功能; 模态将 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我有一个试图在用户单击“提交”按钮时关闭的表单,但它始终显示“正在发送”
这是整个表格
<div class="pos-bottom">
<a class="modalbox" href="#inline"><img src="images/quote.gif" class="imgquote" width="297" height="72" border="0px" />
</a>
<br />
<div id="inline" style="display: none">
<h2>Request a Quote</h2>
<form id="contact" name="contact" action="#" method="post" style="width:600px">
<br />
<table width="50%">
<tr>
<td width="30%">*Your Name:</td>
<td width="20%"> </td>
<td width="50%">
<input type="text" id="Form_Name" name="Form_Name" />
</td>
</tr>
<tr>
<td width="30%">Company Name:</td>
<td width="20%"> </td>
<td width="50%">
<input type="text" id="Form_Company" name="Form_Company" />
</td>
</tr>
<tr>
<td>*Your E-Mail:</td>
<td> </td>
<td>
<input type="text" id="Form_Email" name="Form_Email" />
</td>
</tr>
<tr>
<td width="30%">*Phone Number:</td>
<td width="20%"> </td>
<td width="50%">
<input type="text" id="Form_Number" name="Form_Number" />
</td>
</tr>
<tr>
<td width="30%" h>Comments:</td>
<td width="20%"> </td>
<td width="50%">
<textarea id="Form_Comments" name="Form_Comments" cols="25" rows="3"></textarea>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="100%" align="center" colspan="3">
<button id="send">Request Quote</button>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="100%">
<b><?php echo $itemname; ?></b>
<br />
<br /> Manufacturer:
<?php echo $manufactuer;?>
<br /> Model:
<?php echo $model;?>
<br /> Category:
<?php echo $category;?>
<br />
</td>
</tr>
</table>
</form>
</div>
<!-- basic fancybox setup -->
<script type="text/javascript">
$(document)
.ready(function () {
$(".modalbox").fancybox();
$("#contact").submit(function () {
return false;
});
$("#send").on("click", function () {
{
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<em>sending...</em>");
$.ajax({
type: "POST",
url: "AJAX_Quote.php",
data: {
name: $("#Form_Name").val(),
email: $("#Form_Email").val(),
eid: $("#Form_ID").val(),
company: $("#Form_Company").val(),
number: $("#Form_Number").val(),
comments: $("#Form_Comments").val()
},
dataType: 'json',
success: function () {
{
$("#contact")
.fadeOut("fast", function () {
$(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
setTimeout("$.fancybox.close()", 50);
});
}
}
});
}
});
});
</script>
<br />
<br />
</div>
<!--ends pos-bottom-->
我到处都看过,似乎无法正常工作。 任何帮助将不胜感激。
*****编辑****
这是我添加尼克建议的新代码。
<script type="text/javascript">
$(document)
.ready(function () {
$(".modalbox").fancybox();
$("#contact").submit(function () {
return false;
});
$("#send").on("click", function () {
{
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<em>sending...</em>");
$.ajax({
type: "POST",
url: "AJAX_Quote.php",
data: JSON.stringify({name: $("#Form_Name").val(),email: $("#Form_Email").val(),eid: $("#Form_ID").val(),company: $("#Form_Company").val(),number: $("#Form_Number").val(),comments: $("#Form_Comments").val()}),
dataType: 'json',
success: function () {
{
$("#contact")
.fadeOut("fast", function () {
$(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
setTimeout(function () { $.fancybox.close(); }, 50)
});
}
}
});
}
});
});
</script>
服务器将期待一个json字符串,而不是json对象。 请更新
从
data: {name: $("#Form_Name").val(),email: $("#Form_Email").val(),eid: $("#Form_ID").val(),company: $("#Form_Company").val(),number: $("#Form_Number").val(),comments: $("#Form_Comments").val()},
至
data: JSON.stringify({name: $("#Form_Name").val(),email: $("#Form_Email").val(),eid: $("#Form_ID").val(),company: $("#Form_Company").val(),number: $("#Form_Number").val(),comments: $("#Form_Comments").val()}),
我可以通过更改它来使其工作
success: function () {
{
$("#contact")
.fadeOut("fast", function () {
$(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
setTimeout(function () { $.fancybox.close(); }, 50)
});
}
对此
success: setTimeout(function () { parent.$.fancybox.close(); }, 2000)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.