У меня есть код, который открывает диалоговое окно, проверяет и отправляет форму, когда проверка прошла успешно.
Если пользователь нажимает «Отмена», диалоговое окно должно сбрасываться до следующего вызова.
Если пользователь нажимает «ОК», диалоговое окно должно закрываться и форма должна публиковаться, поэтому, если я нажму кнопку «Назад», диалоговое окно не появится на странице.
Код выглядит следующим образом:
<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>