PreventDefault 后恢复表单提交

Question

我环顾四周，发现了许多类似的答案，但我的代码中的表单提交失败了。当单击 'submit' 按钮并使用 SweetAlert 确认时，似乎缺少或不正确的内容会阻止提交表单？

http://plnkr.co/edit/NL7r4E9UKVjGSBbAwt86?p=preview

   <form id='submissionForm' autocomplete='off' method='POST'>
        <button>Save</button>
        <input type='submit' name='submit' id='submitTest1' value='Submit 1'>
        <input type='submit' name='submit' id='submitTest2' value='Submit 2'>
    </form>

单击 "Yes, I am sure" 然后 "Ok" 不会提交表单。

更新： 我简化了代码：http://plnkr.co/edit/A9aDycYhIkJcTmK5qIUS?p=preview

Answer 1

~~您的表单对象是一个普通的 javascript 对象，无法访问 jQuery 的提交方法。~~

~~将表单对象包装在 jQuery 包装器中 $(form).submit()~~

不确定 vanilla javascript 是否是必需的，因为我看到 jQuery 包含在 plnkr 中，但我使用 jQuery 的 submit() 方法进行了测试而不是 javascript 方法，它起作用了。

创建表单变量时，将 this 设为 jQuery 对象 var form = $(this);

Answer 2

在第二次提交之前使用removeEventListener删除事件处理程序。

这是您更新后的 fiddle：http://plnkr.co/edit/lXUtzlMISxztGVvucFQS?p=preview

如答案中所述，您拥有名为 "submit" 的表单元素这一事实覆盖了 .submit() 方法。您应该避免在提交按钮中使用 "submit" 作为名称。改变它应该工作。

Answer 3

表单元素有一个名为 submit 的方法，但也有表单中的表单元素作为成员。

如果您有一个名为 submit 的 button，您可以使用 document.form1.submit 访问它。但是，由于它与提交方法同名，因此无法再访问该方法。如果您使用该方法提交表单，将不再有效。

使用这个 plunker:

HTML:

<form id='submissionForm' autocomplete='off' method='POST'>
        <button>Save</button>

        <input type='submit' name='submit1' id='submitTest1' value='Submit 1'>
        <input type='submit' name='submit2' id='submitTest2' value='Submit 2'>
    </form>

PreventDefault 后恢复表单提交

Resume Form Submit after PreventDefault

javascript

forms

jquery

submit

sweetalert