title: jQuery reset dialog on cancel and close before form posting
body: <p>I have code that opens a dialog, validates, and posts a form when the validation is successful.</p>
  
  <p>If the user clicks "Cancel," the dialog should reset until the next time it's called.</p>
  
  <p>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.</p>
  
  <p>Code is as follows:</p>
  
  <pre><code>&lt;script&gt;    
  $(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()+"&amp;fycuserid="+$("#fycuserid").val()+"&amp;reason=" + $("#reason").val()+"&amp;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");
    });
      } );
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a class="normal" id="confirmLink" href=""&gt;Test&lt;/a&gt;
          &lt;div id="dialog" title="Flag This Document" style="display:none"&gt;
              &lt;form id="flagform" action="modalReceipt.asp" method="post"&gt;
        Please choose a reason for flagging this document and provide an explanation, if necessary.
    &lt;p&gt;&lt;p&gt;&lt;div class="error" style="display:none;color:red"&gt;      &lt;span&gt;&lt;/span&gt;.&lt;br clear="all"/&gt;
  &lt;/div&gt;
   &lt;table class="emptygrid"&gt;
  &lt;tr&gt;
  &lt;td class="header"&gt;Reason:&lt;/td&gt;
  &lt;td class="data"&gt;
      &lt;select name="reason" id="reason" class="required"&gt;
          &lt;option value=""&gt;-- Choose a Reason --&lt;/option&gt;
          &lt;option value="plagiarism"&gt;Plagiarism&lt;/option&gt;
          &lt;option value="submissionError"&gt;Submission Error&lt;/option&gt;
          &lt;option value="instructions"&gt;Student Didn't Follow Instructions&lt;/option&gt;
          &lt;option value="blankDocument"&gt;Blank Document&lt;/option&gt;
          &lt;option value="other"&gt;Other (please explain)&lt;/option&gt;
        &lt;/select&gt;
  
  
          &lt;/td&gt;
          &lt;td class="status"&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="header" style="vertical-align:top"&gt;Explanation:&lt;/td&gt;
  &lt;td class="data"&gt; &lt;textarea name="explanation" rows="10" cols="35"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;td class="status"&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  
  
  &lt;/table&gt;
  &lt;input type="hidden" id="fycuserid" name="fycuserid" value="33"/&gt;
  &lt;input type="hidden" id="documentGUID" name="documentGUID" value="26219247-EB85-4ABD-8F74-C8448BA06472"/&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>