Question

我有代码在验证成功时打开对话框，验证并发布表单。

如果用户点击“取消”，则对话框应重置，直到下次调用为止。

如果用户点击“确定”，则对话框应该关闭，表单应该发布，所以如果我点击后退按钮，页面上就不会出现对话框。

代码如下：

<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>

Answer 1

如果用户点击“取消”，则对话框应该重置，直到下一个时间被称为。

将“取消”编辑为类似的内容，

"Cancel": function() {
     $(this).dialog("close");
     $(this).find('form')[0].reset();
}

如果用户点击“确定”，则对话框应该关闭，表单应该发布，所以如果我点击后退按钮，页面上就不会出现对话框。

我建议你在服务器端做这件事。提交成功后，执行cookie或会话变量。加载页面时检查该变量，并执行操作以使对话框显示或不显示在页面中。

在表单发布之前取消并关闭jQuery重置对话框

1 个答案: