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

IT技术 javascript jquery html forms event-handling
2021-03-14 07:02:03

我有一个带按钮的 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 事件 - 不起作用。

2个回答

那是因为你不应该只使用submit函数,而是trigger像这样提交:

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

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

jQuery 也模仿了过去的模仿(参见这个“wontfix”“bug”报告)。

也可以看看:

@bfavaretto 抱歉,但我仍然很困惑。你不会form.submit()onsubmit处理程序内部调用OP 的例子没有这样做。因此,form.submit()理想情况下,调用应该只触发事件处理程序并完成它。
2021-04-23 07:02:03
这很有趣,我将尝试找出 jquery 的不同之处。
2021-05-05 07:02:03
为什么会产生无限循环?
2021-05-14 07:02:03
@Rishabh 因为调用 submit 的最佳位置是 onsubmit 事件处理程序。
2021-05-15 07:02:03
我把推理放到了一篇更有意义的文章中 - codetheory.in/javascript-fire-onsubmit-by-calling-form-submit - 基本上这种行为实际上符合 HTML 表单验证规范。
2021-05-20 07:02:03