2010-09-22 75 views
1

我有代码,当验证成功时打开对话框,验证和张贴表单。jQuery重置对话框取消和关闭表格发布

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

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

代码如下:

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

回答

7

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

编辑您的“取消”这样的事情,

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

如果用户点击“OK”的对话框应该关闭和形式要张贴检查,因此,如果我打的后退按钮该对话框不会出现在页面上。

我建议你在服务器端做。提交成功时,请执行cookie或会话变量。加载页面时检查该变量,并为对话框显示或不显示在页面上做些事情。

+0

是否值得设置内容...在页面上过期,以便他们不能回去? – Caveatrob 2010-09-22 22:06:26

+0

如果文档有多个表单会怎么样?我能找到('#formname')。reset(); ? – Caveatrob 2010-09-27 00:10:23

+0

如果它在对话框中,是的,你可以... – Reigel 2010-09-27 00:59:59