Question

我环顾四周，发现了许多类似的答案，但我在代码中提交的表单失败了。什么似乎缺少或不正确，以防止在单击“提交”按钮并使用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>

点击“是的，我确定”然后“确定”不提交表单。

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

Answer 1

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

如果您在名为button的表单中有submit，则可以使用document.form1.submit访问它。但是，由于它与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>

Answer 2

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

以下是您更新的小提琴：http://plnkr.co/edit/lXUtzlMISxztGVvucFQS?p=preview

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

Answer 3

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

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

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

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

在PreventDefault之后恢复表单提交

3 个答案: