HTMLFormElement: submit event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

当表单 <form> 提交的时候触发 submit 事件。

是否冒泡 是(虽然其通常被看作不冒泡的简单事件)
是否可取消
接口 SubmitEvent
事件处理器属性 GlobalEventHandlers.onsubmit

注意 submit 事件只能作用于 <form> 元素本身,不能作用于 <button> 或者 <input type="submit">。但 SubmitEvent 被用于表单提交时,会携带 submitter 属性,这是触发提交请求时会调用的按钮。

当用户点击提交按钮(<button><input type="submit">),亦或是在表单里输入时(e.g. <input type="text">)按下 Enter 键,submit 事件将会被触发。直接调用 form.submit() 方法时,事件不会发送到表单。

备注: 当试图提交一个未通过验证的表单时,会触发 invalid 事件。在这种情况下,表单提交将会被验证机制阻止。因此,sumbit 事件也就不存在了。

示例

这个示例使用 EventTarget.addEventListener() 去监听表单的提交。并记录当前的 Event.timeStamp,然后阻止提交表单的默认操作。

HTML

html
<form id="form">
  <label>Test field: <input type="text" /></label>
  <br /><br />
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

JavaScript

js
function logSubmit(event) {
  log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);

结果

规范

Specification
HTML
# event-submit
HTML
# handler-onsubmit

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
submit event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见