表单提交后的jQuery弹出窗口
[英]jquery popup after form submission
问题描述
我有以下代码。
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
/* Get some values from elements on the page: */
var values = $(this).serialize();
$.ajax({
url: "submit.php",
type: "post",
data: values
});
$("#dialog").dialog({modal: true, height: 200, width: 300 });
});
});
</script>
<body>
<form id="contactfrm">
<input type="text" name="fullname"/>
<input type="text" name="email"/>
<input type="text" name="phone"/>
<a href="" class="submit" id="submit">submit</a>
</form>
</body>
我使用链接的唯一原因是因为设计师设计了链接按钮，但无法执行提交按钮。
现在，当我单击按钮时，它将弹出窗口，但是它从未提交过表单。 我不明白为什么会这样？
3 个解决方案
解决方案1
2 2014-07-14 16:39:47
这是因为您使用了e.preventDefault(); 这会阻止您提交表单。 为了提交它，在代码末尾： $( "form" ).submit(); 。
当您调用$.ajax(...)方法时，将进行异步调用，因此将不提交表单。
此外，请注意，当您调用$("#dialog").dialog({modal: true, height: 200, width: 300 }); ，它将在$( "form" ).submit();之后关闭$( "form" ).submit(); 叫做。 问题是，我不了解要提交表单时打开对话框的原因。
解决方案2
1 2014-07-14 16:41:25
如果要在ajax请求完成时运行代码，请设置succes参数：
$.ajax({
url: "submit.php",
type: "post",
data: values,
success: function(data){
$("#dialog").dialog({modal: true, height: 200, width: 300 });
}
});
如果只是将代码放在ajax请求的后面，它将在请求启动后立即运行，而不是在请求成功后立即运行。
解决方案3
0 2014-07-14 16:49:35
我认为您以错误的方式获得了价值。 你应该用
var values = $(this).parent().serialize();
代替
var values = $(this).serialize();
但是，如何在CSS中使用表单按钮呢？
input[type=submit] {
background: none;
border: none;
cursor: Pointer;
}
JQuery弹出窗口中的表单提交问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.