jQuery模态对话框未提交我的表单

Question

我正在使用jQuery模式对话框询问用户是否希望提交表单。

但是，在用户单击对话框的提交按钮后，表单不提交。

如果我再次单击表单提交按钮，它会提交。

我猜这是一个范围问题，我已经看到了一些关于它的其他帖子，但仍然花了很多时间没有运气。有关如何解决这个问题的任何想法？

的Javascript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
}); 

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="submit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div> 

Answer 1

变化从 '提交' 给你的提交按钮的名称属性 'btnSubmit按钮'

<input type="submit" name="btnSubmit" value="Go!" /> 

装在了 '＃'将action属性设置为空白或任何其他有效的url。

Answer 2

解决方案只是...您的按钮名称。你为什么问？我会告诉你！

以此jsfiddle并注意我只做了一些更改。 JavaScript没有改变，只是在HTML

HTML

<form id="myform" action="javascript:alert('Success!')" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

我做了两个转变：

1. 我改变了动作是一个javascript调用的兼容性的jsfiddle
2. 我将您的按钮名称修改为除提交以外的内容

我不得不做＃2因为调用$（'＃myform'）。submit是引用按钮，而不是提交方法，jQuery有各种各样的困惑。通过重命名按钮，$（'＃myform'）。submit仍然是预期的jQuery提交功能，每个人都很开心。

我偶然发现了几次迭代，这些迭代我在后面为后人保留。

祝你好运！

=======原帖低于========

如果你想要做的是 “解决这个问题”，你可以重构如下：

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

的JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() { 
     $("#confirm").dialog('open'); 
    }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } 
    }); 
});​ 

奇怪的是，下面的工作原理一报还一：

HTML

<form id="myform" action="javascript:alert('success!');" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

的JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       $('#myform').submit(); 
       //submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
});​ 

我这里唯一改变的是删除了提交按钮，并100％通过jQuery提交。

Answer 3

您可以尝试on submit event窗体有不同类型的事件。

onsubmit="return confirm('Please confirm that you want to submit')" 

看到这个EDIT，现在你可以改变用模态对话框创建一个函数返回true或false。