SubmitEvent

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.

SubmitEvent インターフェイスは、 HTML フォームの submit イベントを表現するために使用されるオブジェクトを定義します。このイベントは、フォームの送信操作が呼び出されたときに <form> で発行されます。

Event SubmitEvent

コンストラクター

SubmitEvent()

type と他のオプションが指定された SubmitEvent オブジェクトを新しく作成して返します。現在、SubmitEvent の有効な typesubmit だけであることに注意してください。

プロパティ

以下のプロパティに加えて、このインターフェイスには親インターフェイスである Event から継承したプロパティがあります。

submitter 読取専用

フォーム送信のきっかけとなったボタンやその他の要素を特定する HTMLElement オブジェクトです。

メソッド

SubmitEvent には自身のメソッドがありませんが、親インターフェイスである Event から継承したメソッドがあります。

この例では、ユーザーの設定、店舗の設定、決済業者によって確立された商品券の合計額の最小値または最大値等の要因に応じて、ショッピングカートに様々な組み合わせの送信ボタンが表示される可能性があります。それぞれの送信要素の id で、ボタンに対応する決済業者を識別します。

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(
      "不明または未対応の支払い方法が選択されました。やり直してください。",
      "OK",
    );
  }
});

ハンドラー ID は、 submit イベントの submitter プロパティを使用して送信ボタンを取得し、そこから ID を取得します。これで、 processOrder() 関数を呼び出して、フォームとハンドラー ID を渡しながら注文を処理することができます。

仕様書

Specification
HTML
# the-submitevent-interface

ブラウザーの互換性

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
SubmitEvent
SubmitEvent() constructor
submitter

Legend

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

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