SubmitEvent

Baseline Widely available

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

The SubmitEvent interface defines the object used to represent an HTML form's submit event. This event is fired at the <form> when the form's submit action is invoked.

Event SubmitEvent

Constructor

SubmitEvent()

Creates and returns a new SubmitEvent object whose type and other options are configured as specified. Note that currently the only valid type for a SubmitEvent is submit.

Instance properties

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

submitter Read only

An HTMLElement object which identifies the button or other element which was invoked to trigger the form being submitted.

Instance methods

While SubmitEvent offers no methods of its own, it inherits any specified by its parent interface, Event.

Examples

In this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. Each of the submit elements' id is used to identify which payment processor the button corresponds to.

js
let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  let submitter = event.submitter;
  let handler = submitter.id;

  if (handler) {
    processOrder(form, handler);
  } else {
    showAlertMessage(
      "An unknown or unaccepted payment type was selected. Please try again.",
      "OK",
    );
  }
});

The handler ID is obtained by using the submit event's submitter property to get the submit button, from which we then get the ID. With that in hand, we can call a processOrder() function to handle the order, passing along the form and the handler ID.

Specifications

Specification
HTML
# the-submitevent-interface

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SubmitEvent
Chrome – Full support
Chrome 81 (Release date: 2020-04-07)
footnote Full support
Edge – Full support
Edge 81 (Release date: 2020-04-13)
footnote Full support
Firefox – Full support
Firefox 75 (Release date: 2020-04-07)
footnote Full support
Opera – Full support
Opera 68 (Release date: 2020-04-22)
footnote Full support
Safari – Full support
Safari 15 (Release date: 2021-09-20)
footnote Full support
Chrome Android – Full support
Chrome Android 81 (Release date: 2020-04-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 79 (Release date: 2020-07-28)
footnote Full support
Opera Android – Full support
Opera Android 58 (Release date: 2020-05-13)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15 (Release date: 2021-09-20)
footnote Full support
Samsung Internet – Full support
Samsung Internet 13 (Release date: 2020-12-02)
footnote Full support
WebView Android – Full support
WebView Android 81 (Release date: 2020-04-07)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15 (Release date: 2021-09-20)
footnote Full support
SubmitEvent() constructor
Chrome – Full support
Chrome 81 (Release date: 2020-04-07)
footnote Full support
Edge – Full support
Edge 81 (Release date: 2020-04-13)
footnote Full support
Firefox – Full support
Firefox 75 (Release date: 2020-04-07)
footnote Full support
Opera – Full support
Opera 68 (Release date: 2020-04-22)
footnote Full support
Safari – Full support
Safari 15 (Release date: 2021-09-20)
footnote Full support
Chrome Android – Full support
Chrome Android 81 (Release date: 2020-04-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 79 (Release date: 2020-07-28)
footnote Full support
Opera Android – Full support
Opera Android 58 (Release date: 2020-05-13)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15 (Release date: 2021-09-20)
footnote Full support
Samsung Internet – Full support
Samsung Internet 13 (Release date: 2020-12-02)
footnote Full support
WebView Android – Full support
WebView Android 81 (Release date: 2020-04-07)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15 (Release date: 2021-09-20)
footnote Full support
submitter
Chrome – Full support
Chrome 81 (Release date: 2020-04-07)
footnote Full support
Edge – Full support
Edge 81 (Release date: 2020-04-13)
footnote Full support
Firefox – Full support
Firefox 75 (Release date: 2020-04-07)
footnote Full support
Opera – Full support
Opera 68 (Release date: 2020-04-22)
footnote Full support
Safari – Partial support
Safari 15 – 15.3 (Release date: 2021-09-20)
footnote Partial support
footnote Property is not set for <button> elements. See bug 229660.
Safari – Full support
Safari 15.4 (Release date: 2022-03-14)
footnote Full support
Chrome Android – Full support
Chrome Android 81 (Release date: 2020-04-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 79 (Release date: 2020-07-28)
footnote Full support
Opera Android – Full support
Opera Android 58 (Release date: 2020-05-13)
footnote Full support
Safari on iOS – Partial support
Safari on iOS 15 – 15.3 (Release date: 2021-09-20)
footnote Partial support
footnote Property is not set for <button> elements. See bug 229660.
Safari on iOS – Full support
Safari on iOS 15.4 (Release date: 2022-03-14)
footnote Full support
Samsung Internet – Full support
Samsung Internet 13 (Release date: 2020-12-02)
footnote Full support
WebView Android – Full support
WebView Android 81 (Release date: 2020-04-07)
footnote Full support
WebView on iOS – Partial support
WebView on iOS 15 – 15.3 (Release date: 2021-09-20)
footnote Partial support
footnote Property is not set for <button> elements. See bug 229660.
WebView on iOS – Full support
WebView on iOS 15.4 (Release date: 2022-03-14)
footnote Full support

Legend

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

Full support
Full support
Partial support
Partial support
Has more compatibility info.