1. 開発者向けのウェブ技術
  2. Web API
  3. SubmitEvent

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

SubmitEvent

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年9月以降、すべてのブラウザーで利用可能です。

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 を渡しながら注文を処理することができます。

仕様書

仕様書
HTML
# the-submitevent-interface

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /