2010-09-22 56 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