通过“提交”事件以编程方式提交表单

Question

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

HTMLFormElement.submit()

跳过“提交”事件，因此它对我不起作用。

HTMLFormElement.requestSubmit()

看起来它可以满足我的要求，但它的浏览器支持很差。我想要 Chrome/Safari/Firefox/Edge 支持。

Answer 1

要以编程方式提交表单并仍然触发“提交”事件，除了使用

.requestSubmit()

之外，还可以在“提交”按钮上使用

.click()

方法。在下面的示例中，有以下内容：

• A

  <form>

  将其数据发布到实时测试服务器。测试服务器的响应将显示在位于

  <iframe>

  之后的

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