javascript - 以编程方式提交带有 "submit"事件的表单

Question

我想用 vanilla JS 提交一个表单，但仍然触发提交事件。基本上与按下“提交”按钮相同。

HTMLFormElement.submit() 跳过“提交”事件，所以它对我不起作用。

HTMLFormElement.requestSubmit() 似乎可以满足我的要求，但它对浏览器的支持很差。我想要 Chrome/Safari/Firefox/Edge 支持。

Answer 1

要以编程方式提交表单并仍然触发“提交”事件，除了使用 .requestSubmit() 之外，将使用 .click() “提交”按钮上的方法。在下面的例子中有以下内容:

• A <form>会将其数据发布到实时测试服务器。测试服务器的响应将显示在 <frame> 中。位于 <form> 之后.

• A <button>在<form>之外并且没有 form分配给它的属性。此按钮与 <form> 隔离但它仍然会间接触发“提交”事件，因为它已注册到“单击”事件，并且事件处理程序将以编程方式单击“提交”按钮。

• 请注意，<button>没有必要使用 .click()方法，它可以像任何其他方法或函数一样通过其他方式调用。

点击触发按钮

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