我有代码可以打开对话框、进行验证并在验证成功时发布表单。
如果用户单击“取消”，对话框应重置，直到下次调用它为止。
如果用户单击“确定”，对话框应该关闭并且表单应该发布，因此如果我点击后退按钮，对话框不会出现在页面上。
代码如下:
<script>
$(function(){//document ready
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$("#confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog(
{ minWidth: 500 },{
buttons : {
"Ok": function() {
$('#flagform').submit();
//window.location.href="modalReceipt.asp?documentGUID="+$("#documentGUID").val()+"&fycuserid="+$("#fycuserid").val()+"&reason=" + $("#reason").val()+"&other="+ $("#other").val()
},
"Cancel" : function() {
$(this).dialog("close");
}
},
open: function() {
jQuery.validator.messages.required = "";
$("#flagform").validate({
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
// the errorPlacement has to take the table layout into account
messages: {
reason: "*",
explanation: "*"
},
});//validate
},
});
$("#dialog").dialog("open");
});
} );
</script>
</head>
<body>
<a class="normal" id="confirmLink" href="">Test</a>
<div id="dialog" title="Flag This Document" style="display:none">
<form id="flagform" action="modalReceipt.asp" method="post">
Please choose a reason for flagging this document and provide an explanation, if necessary.
<p><p><div class="error" style="display:none;color:red"> <span></span>.<br clear="all"/>
</div>
<table class="emptygrid">
<tr>
<td class="header">Reason:</td>
<td class="data">
<select name="reason" id="reason" class="required">
<option value="">-- Choose a Reason --</option>
<option value="plagiarism">Plagiarism</option>
<option value="submissionError">Submission Error</option>
<option value="instructions">Student Didn't Follow Instructions</option>
<option value="blankDocument">Blank Document</option>
<option value="other">Other (please explain)</option>
</select>
</td>
<td class="status"></td>
</tr>
<tr>
<td class="header" style="vertical-align:top">Explanation:</td>
<td class="data"> <textarea name="explanation" rows="10" cols="35"></textarea></td><td class="status"></td>
</tr>
</table>
<input type="hidden" id="fycuserid" name="fycuserid" value="33"/>
<input type="hidden" id="documentGUID" name="documentGUID" value="26219247-EB85-4ABD-8F74-C8448BA06472"/>
</form>
</div>
最佳答案
If the user clicks "Cancel," the dialog should reset until the next time it's called.
将“取消”编辑为类似这样的内容，
"Cancel": function() {
$(this).dialog("close");
$(this).find('form')[0].reset();
}
If the user clicks "OK," the dialog should close and the form should post, so if I hit the back button the dialog doesn't appear on the page.
我建议你在服务器端进行。当提交成功后，做一个cookie或session变量。加载页面时检查该变量，并执行某些操作以使对话框出现或不出现在页面中。
关于jQuery 重置对话框取消并在表单发布之前关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3765665/