如何使用jQuery的对话框劫持的形式，然后用提交

我有一个简单的形式继续：如何使用jQuery的对话框劫持的形式，然后用提交

<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'); 

}); 

});

我的问题是，如何获得提交代码返回真/假基于从对话框中响应客户端。

任何帮助表示赞赏。

来源

2011-09-05 Matt

我不会发布，作为一个答案，但确实知道你可以做到这一点，而无需使用的jQuery JavaScript的' confirm（）'函数，根据用户在GUI中的输入，它返回“true”还是“false”，所以你可以做'areYouSure = confirm（“你确定吗？”）;返回areYouSure;' –

这里的问题是，当你使用$('#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

来源

2011-09-05 17:38:43

谢谢。 jsfiddle上的演示非常有用。之前没有看到该网站 - 将再次使用它！ – Matt

@Matt不客气！很高兴帮助。 –