為什么 form.submit() 不會觸發“提交”事件？

Question

我正在使用 JavaScript .submit() 函數提交我的表單。

form.submit();

但是當我使用 addEventListener 來捕獲我的提交事件時，它不起作用。

form.addEventListener("submit", function(event){
    //codes
});

我發現 addEvenetListener 函數只會監聽 onsubmit 事件而不是提交。 執行 form.submit() 時，是否有其他解決方案可以調用我的函數？

ps：出於某些原因，我需要使用 form.submit() 來提交我的表單而不是使用提交按鈕。

Answer 1

根據MDN ：

從基於 Gecko 的應用程序調用此方法時，不會觸發表單的 onsubmit 事件處理程序（例如， onsubmit="return false;" ）。 通常，不保證 HTML 用戶代理會調用它。

要解決此問題，請嘗試使用dispatchEvent() ：

 var form = document.querySelector('form'); form.addEventListener('submit', function () { console.log('invoked'); return false; }); // form.submit(); form.dispatchEvent(new Event('submit'));

 <form></form>

Answer 2

而不是使用它然后將事件偵聽器添加到提交

var form = $('form');
form.submit();
form.addEventListener("submit", function(event){
    //codes
});

你可以用這個代替

var form = $('form');
form.submit(function(event){
    // Do something on submit
});

Answer 3

使事件處理程序偵聽按鈕單擊，然后在回調中調用form.submit() 。

Answer 4

我認為此解決方案比您嘗試的解決方案更有用。 可能有一些語法錯誤。

HTML：

<button onclick="formSubmit()"> Submit form</button>

JavaScript：

function formSubmit()
{
   var form = document.getElementById('formName');
   form[0].submit();
}

Answer 5

如果您不需要支持IE 和 Safari，則可以使用requestSubmit() 。

與@Patrick Roberts 的dispatchEvent()解決方案不同，這也將驗證表單的內容！ 根據MDN ：

submit() 提交表單，但僅此而已。 另一方面， requestSubmit() 的行為就像點擊了提交按鈕一樣。 表單的內容被驗證，並且只有在驗證成功時才提交表單。 提交表單后，將提交事件發送回表單對象。

或者，如果您有權訪問提交按鈕（我知道 OP 沒有）， btn.click()是最受支持的方式，因為它會進行表單驗證並觸發submit事件。