HTMLFormElement: submit event

基线广泛可用

自 2015年7月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

当表单 <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);

结果

规范

HTML
# event-submit

HTML
# handler-onsubmit

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

HTML <form> 元素
相关事件：invalid

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2024年12月21日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题