JQUERY模态框确认表单提交答案

【问题标题】：JQUERY modal box confirm form submitJQUERY模态框确认表单提交
【发布时间】：2011-12-15 10:01:29
【问题描述】：

我有一个表单，当提交被点击时，我想要一个带有“是”和“否”按钮的模式框弹出我想要“是”和“否”按钮来提交表单，但我需要知道他们点击了哪个按钮。

这是我的代码

<input onclick="$.msgbox('confirm text',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {

});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

我的问题是当用户点击提交时表单正在提交。

任何帮助或想法都会很棒

谢谢

【问题讨论】：

标签： javascript jquery forms submit

【解决方案1】：

虽然我不熟悉 $.msgbox 插件，但您应该在 <form> 提交而不是按下按钮时打开模式对话框，因为表单也可以通过特定输入的回车键提交字段（如文本框<input type="text|password">）

var confirmed = false;
$('#myform').bind('submit', function() {
  if (confirmed) {
    return true;  // confirmation received, continue form submission process
  } else {
    $.msgbox(
      'my modal message',
      {
        buttons : [
          { type: 'button', value: 'YES' },
          { type: 'button', value: 'NO' }
        ]
      }, 
      function(buttonPressed) {
        confirmed = buttonPressed.value;  // Update the confirmed variable
        $('#myform').submit();  // re-submit the form
      }
    );  
    return false;  // cancel form submission
  }
});

【讨论】：

【解决方案2】：

添加返回false：

<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {

}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

【讨论】：

谢谢，这阻止了表单提交，但是当在框中单击“是”或“否”按钮时，没有任何反应我如何获得“是”和“否”按钮来提交表单，谢谢
在你的函数中：$('#idfortheform').submit();

【解决方案3】：

也不确定msgbox，但对您的代码有一些评论：

不要将您的 JS 逻辑直接附加到您的代码中，而是使用 jQuery 将点击事件附加到您的标记（请参阅unobtrusive javascript）：

代替
```
<input onclick="$.msgbox('confirm text',{
```
使用
```
$('#btnApply').click(function(e) {
```

您可以通过将事件参数的one property设置为false来停止点击处理：

$('#btnApply').click(function(e) {
     e.preventDefault(); // stop click handling and so form submitting

最后在msgbox回调函数中处理表单提交与否：

$.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
    {
    type: "submit",
    value: "Yes"},
{
    type: "submit",
    value: "No"},
{
    type: "cancel",
    value: "Cancel"}
]
}, function(result) {
    if(result == "Yes") // display the form on submit
         $('form').submit();
});

jsFiddle available.

【讨论】：