如果提交以编程方式启动，则提交事件不会触发

Posted 2023-05-08

【中文标题】如果提交以编程方式启动，则提交事件不会触发

【英文标题】：submit event does not fire if submit initiated programmatically

【发布时间】：2013-09-17 11:06:35

【问题描述】：

我有一个带有按钮的 html 表单：

<form action="/" method="post" id="MyForm">
<input type="hidden" name="Field1" value="Value1" />
<input type="hidden" name="Field2" value="Value2" />
<input type="submit" name="name" value="submit" />
</form>

我有提交附加到窗口的事件处理程序：

window.onsubmit = function()

    alert("Submit happening!");
;

如果我单击“提交”按钮，此事件处理程序会正确触发。 但是，当从 javascript 以编程方式触发提交时，事件永远不会起作用：

$("#MyForm")[0].submit();

当提交事件处理程序由 Javascript 启动时，如何捕获它，而不是通过用户点击？ 我尝试使用 Jquery 或 AddEventListener 订阅 Form 事件 - 不起作用。

【问题讨论】：

Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?的可能重复

【参考方案1】：

那是因为你不应该只使用submit 函数，而是trigger 提交之类的：

$("#MyForm").trigger('submit');

【参考方案2】：

当您手动调用 form.submit() 时，浏览器不会触发表单的 onsubmit 处理程序。

jQuery 还 mimicks 用来模仿它（参见 "wontfix" "bug" report）。

另见：

Should jQuery's $(form).submit(); not trigger onSubmit within the form tag? JQuery: on submit doesn't work

【讨论】：

这很有趣，我会尝试找出 jquery 的不同之处。

为什么要创建无限循环？

@Rishabh 因为调用提交的最佳位置是 onsubmit 事件处理程序。

@bfavaretto 抱歉，但我仍然很困惑。你不会从onsubmit 处理程序内部调用form.submit()。 OP的示例没有这样做。因此，理想情况下，调用form.submit() 应该只触发事件处理程序并完成它。

我把推理放到了一篇更有意义的文章中 - codetheory.in/javascript-fire-onsubmit-by-calling-form-submit - 基本上这种行为实际上符合 HTML 表单验证规范。