以編程方式提交帶有“提交”事件的表單

Question

我想提交一個帶有 vanilla JS 的表單，但仍會觸發提交事件。 基本上與按下“提交”按鈕相同。

HTMLFormElement.submit() 跳過“提交”事件，因此它對我不起作用。

HTMLFormElement.requestSubmit() 似乎可以滿足我的要求，但它對瀏覽器的支持很差。 我想要 Chrome/Safari/Firefox/Edge 支持。

Answer 1

要以編程方式提交表單並仍然觸發“提交”事件，除了使用.requestSubmit()之外，還可以在“提交”按鈕上使用.click()方法。 在下面的例子中有以下內容：

• 將其數據發布到實時測試服務器的<form> 。 測試服務器的響應將顯示在位於<form>之后的<frame>中。

• <form> <button>並且也沒有分配給它的form屬性。 此按鈕與<form>隔離，但它仍會間接觸發“提交”事件，因為它已注冊到“單擊”事件，並且事件處理程序將以編程方式單擊“提交”按鈕。

• 請注意， <button>不是使用.click()方法所必需的，它可以通過其他方式調用，如任何其他方法或 function。

單擊觸發按鈕

<button class='trigger'>Trigger</button>

 const trigger = document.querySelector('.trigger'); trigger.onclick = e => document.querySelector('form button').click();

 .trigger { vertical-align: top }

 <form id='UI' action='https://httpbin.org/post' method='POST' target='response'> <fieldset> <legend>Programmatically Submit a Form</legend> <input name='test' value='TEST'> <button name='send'>Send</button> </fieldset> </form> <hr> <button class='trigger'>Trigger</button> <iframe name='response'></iframe>