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

Thesubmit event fires when a<form> is submitted.

Note that thesubmit event fires on the<form> element itself, and not on any<button> or<input type="submit"> inside it. However, theSubmitEvent which is sent to indicate the form's submit action has been triggered includes asubmitter property, which is the button that was invoked to trigger the submit request.

Thesubmit event fires when:

the user clicks asubmit button,
the user pressesEnter while editing a field (e.g.,<input type="text">) in a form,
a script calls theform.requestSubmit() method

However, the event isnot sent to the form when a script calls theform.submit() method directly.

Note:Trying to submit a form that does not passvalidation triggers aninvalid event. In this case, the validation prevents form submission, and thus there is nosubmit event.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

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

Event type

ASubmitEvent. Inherits fromEvent.

Event properties

In addition to the properties listed below, this interface inherits the properties of its parent interface,Event.

submitterRead only: AnHTMLElement object which identifies the button or other element which was invoked to trigger the form being submitted.

Examples

This example usesEventTarget.addEventListener() to listen for form submit, and logs the currentEvent.timeStamp whenever that occurs, then prevents the default action of submitting the form.

HTML

html

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

JavaScript

const form = document.getElementById("form");const log = document.getElementById("log");function logSubmit(event) {  log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;  event.preventDefault();}form.addEventListener("submit", logSubmit);