FormDataEvent

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.

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

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

Event FormDataEvent

コンストラクター

FormDataEvent()

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

インスタンスプロパティ

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

FormDataEvent.formData

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

インスタンスメソッド

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

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

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

// submit ハンドラー

formElem.addEventListener("submit", (e) => {
  // フォーム送信時に、既定の動作を抑止
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // FormData オブジェクトを構築し、 formdata イベントを発行させる
  const formData = new FormData(formElem);
  // フォームデータがが formdata イベントによって変更される
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

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

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

  // フォームデータを変更
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

仕様書

Specification
HTML
# the-formdataevent-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
FormDataEvent
FormDataEvent() constructor
formData

Legend

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

Full support
Full support

関連情報