DOM

インターフェイス

SubmitEvent インターフェイス

  編集:2022.04.08 by T.A.

MS(en-US)

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

コンストラクター
new SubmitEvent()
タイプおよびその他のオプションが指定どおりに構成されている新しい SubmitEvent オブジェクトを作成して返します。現在、SubmitEvent の唯一の有効なタイプは submit であることに注意してください。
プロパティ

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

SubmitEvent.submitter 読取専用
送信されるフォームをトリガーするために呼び出されたボタンまたはその他の要素を識別する HTMLElement オブジェクト。
メソッド

SubmitEvent は独自のメソッドを提供しませんが、親インターフェイスである Event によって指定されたメソッドを継承します。

この例では、ショッピングカートには、ユーザーの設定、ショップの設定、および支払い処理業者によって設定されたショッピングカードの最小または最大の合計などの要因に応じて、さまざまな送信ボタンがあります。各送信要素の ID は、ボタンが対応する支払い処理業者を識別するために使用されます。
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");
  }
});

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


テスト
HTML:

ここに表示
スクリプト組み込み:



スクリプト:


スクリプト:



表示内容:
表示内容: