FormDataEvent

FormDataEvent インターフェイスは formdata イベントを表します。 — このようなイベントは HTMLFormElement オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 FormData() コンストラクターの呼び出しでも発行させることができます。

これにより、 XMLHttpRequest などのメソッドでフォームデータを送信する際に、自分で用意しなくても、 formdata イベントの発行に応じて、 FormData オブジェクトをすばやく取得することができます (FormData オブジェクトの使用を参照)。

コンストラクター

FormDataEvent()

新しい FormDataEvent オブジェクトインスタンスを生成します。

プロパティ

親インターフェイスである Event からプロパティを継承しています。

FormDataEvent.formData

イベントが発行された時点のフォーム内に含まれるデータを表す FormData オブジェクトです。

メソッド

親インターフェイスである Event からメソッドを継承しています。

例

js

// フォームの参照を得る

const formElem = document.querySelector('form');

// submit ハンドラー

formElem.addEventListener('submit', (e) => {
  // on form submission, prevent default
  e.preventDefault();

  // FormData オブジェクトを構築し、 formdata イベントを発行させる
  new FormData(formElem);
});

// データを受け取るための formdata ハンドラー

formElem.addEventListener('formdata', (e) => {
  console.log('formdata fired');

  // イベントオブジェクトからフォームデータを取得
  let data = e.formData;
  for (var value of data.values()) {
    console.log(value);
  }

  // XHR を通じてデータを送信
  var request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});

仕様書

Specification
HTML Standard
# the-formdataevent-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報