使用JavaScript触发表单提交

Question

我有一个要通过JavaScript提交的表单。显然，这可以通过以下方法实现：

document.getElementById("myForm").submit();

问题是我有一个submit事件监听器，如下所示：

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    // Other work
});

我调用时不会触发此事件处理程序.submit()。从MDN：

从基于Gecko的应用程序中调用此方法时，将不会触发表单的onsubmit事件处理程序（例如，onsubmit =“ return false;”）。通常，不能保证HTML用户代理会调用它。

因此，在这种限制下，我如何以确保事件处理程序被调用的方式提交表单？

Answer 1

2022 年 11 月 21 日更新

我现在推荐这个requestSubmit()方法。如果需要，您可以将提交按钮传递给它。它更干净并且可以被拦截。

document.getElementById("myForm").requestSubmit();

原答案

自定义事件效果很好。

document.getElementById("myForm").dispatchEvent(new CustomEvent('submit', {cancelable: true}));

Answer 2

您需要创建一个Submit事件，然后分派它。

(function () {
              if ( typeof window.CustomEvent === "function" ) return false;

              function CustomEvent ( event, params ) {
                params = params || { bubbles: true, cancelable: true, detail: undefined };
                var evt = document.createEvent('submit');
                evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
                return evt;
               }

              CustomEvent.prototype = window.Event.prototype;

              window.CustomEvent = CustomEvent;

})();
var evt = new CustomEvent("submit", {"bubbles":true, "cancelable": true});
document.getElementById("myForm").addEventListener("submit",function(event) {
                event.preventDefault();
                alert('submit');
});

然后，当您要提交此功能时，您需要调用：

!document.getElementById("myForm").dispatchEvent(evt);

有关更多事件信息，请参见dispatchEvent。