如何使用jQuery的對話框劫持的形式，然後用提交

Question

我有一個簡單的形式繼續：

<form id="cancel" method="post" action="/Controller/Cancel"> 
    <input class="submitbtn" type="submit" value="Go"> 
    ... 

我使用jQuery與jQuery UI的對話框。我想要做的就是劫持表單的提交併顯示一個對話框。當用戶在對話框中點擊「是」時，表單繼續並進行正常頁面提交。如果他們點擊「否」，對話框就會取消。

我有這樣的代碼：

$(document).ready(function() { 

$("#dialog").dialog({ 
    resizable: false, 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     "Yes": function() { 
      // Not sure what to do here 
      $(this).dialog("close"); 
     }, 
     "No": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$('#cancel').submit(function (event) { 
    event.preventDefault(); 
    $('#dialog').dialog('open'); 

}); 

}); 

我的問題是，如何獲得提交代碼返回真/假基於從對話框中響應客戶端。

任何幫助表示讚賞。

Answer 1

這裏的問題是，當你使用$('#cancel').submit()內「是「按鈕回調，再次觸發submit事件和event.preventDefault()停止從實際被提交。

速戰速決將只是實際提交表單之前解除綁定您提交的事件。 （演示：http://jsfiddle.net/WQjFj/6/）

$("#dialog").dialog({ 
    resizable: false, 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     "Yes": function() { 
      $('#cancel').unbind("submit").submit(); 
      $(this).dialog("close"); 
     }, 
     "No": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

另一種解決方案可以在這個回答中找到：Using jquery ui dialog to confirm action for form submission

Answer 2

你可以從對話框直接提交表單。當你//不知道這裏做什麼，把

$("#cancel").submit(); 

這裏是你可能已經看到了一個指南：

http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/