javascript - 使用javascript触发表单提交

Question

我有一个表单，我想通过 JavaScript 提交。显然这可以通过以下方式实现:

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

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

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

当我调用 .submit() 时，不会触发此事件处理程序。来自 MDN :

The form's onsubmit event handler (for example, onsubmit="return false;") will not be triggered when invoking this method from Gecko-based applications. In general, it is not guaranteed to be invoked by HTML user agents.

那么，鉴于这种限制，我如何才能以确保调用事件处理程序的方式提交表单？

Answer 1

您需要创建一个提交事件，然后发送它。

(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.