代码之家 › 专栏 › 技术社区 › Caveatrob

在表单过帐前取消并关闭jQuery重置对话框

dialog validation jquery

Caveatrob · 技术社区 · 15 年前

如果用户单击“取消”,对话框应该重置,直到下次调用它。

如果用户单击“确定”,对话框应该关闭,表单应该发布,因此如果我单击“后退”按钮,对话框不会出现在页面上。

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

1 回复 | 直到 15 年前

Reigel Gallarde 15 年前

如果用户单击“取消”,则对话框应重置,直到下一个时间到了。

把你的“取消”编辑成这样,

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

我建议你在服务器端做。提交成功后,执行cookie或会话变量。在页面加载时检查该变量,并采取措施使对话框显示或不显示在页面中。