I have code that opens a dialog, validates, and posts a form when the validation is successful.
If the user clicks "Cancel," the dialog should reset until the next time it's called.
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.
Code is as follows:
<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>