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 2015年7月.

submit 事件會在 <form> 被提交時觸發。

請注意 submit 事件是在 <form> 元素本身觸發，而不是在內部的任何 <button> 或 <input type="submit"> 上觸發。然而，用來表示表單提交動作已被觸發的 SubmitEvent 包含一個 submitter 屬性，即為被呼叫以觸發提交請求的按鈕。

submit 事件會在下列情況下觸發：

使用者點擊提交按鈕、
使用者在編輯表單欄位（例如 <input type="text">）時按下 Enter、
指令碼呼叫 form.requestSubmit() 方法

然而，當指令碼直接呼叫 form.submit() 方法時，此事件不會發送給表單。

備註：嘗試提交未通過驗證的表單會觸發 invalid 事件。在此情況下，驗證會阻止表單提交，因此不會有 submit 事件。

語法

在 addEventListener() 等方法中使用事件名稱，或設定事件處理器屬性。

js
addEventListener("submit", (event) => { })

onsubmit = (event) => { }

事件類型

一個 SubmitEvent。繼承自 Event。

Event SubmitEvent

事件屬性

除了下列列出的屬性外，此介面也繼承其父介面 Event 的屬性。

submitter Read only

一個 HTMLElement 物件，用來識別被呼叫以觸發表單提交的按鈕或其他元素。

範例

本範例使用 EventTarget.addEventListener() 監聽表單提交，並在發生時記錄當下的 Event.timeStamp，接著阻止提交表單的預設行為。

HTML

html
<form id="form">
  <label>測試欄位：<input type="text" /></label>
  <br /><br />
  <button type="submit">提交表單</button>
</form>
<p id="log"></p>

JavaScript

js
const form = document.getElementById("form");
const log = document.getElementById("log");

function logSubmit(event) {
  log.textContent = `表單已提交！時間戳記：${event.timeStamp}`;
  event.preventDefault();
}

form.addEventListener("submit", logSubmit);