HTMLFormElement: formdata イベント

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.

formdata イベントは、フォームのデータを表す項目リストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 FormData() コンストラクターが呼び出されたときにも発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。

js
addEventListener("formdata", (event) => {});

onformdata = (event) => {};

イベント型

FormDataEvent です。 Event から継承しています。

Event FormDataEvent

イベントプロパティ

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

FormDataEvent.formData

イベントが発行されたときにフォームに含まれていたデータを表す FormData オブジェクトが格納されています。

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

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

// submit ハンドラー

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

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

  // FormData オブジェクトを構築し、 formdata イベントが発行される
  const formData = new FormData(formElem);
  // formdata は 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 イベントでフォームデータを変更する
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

onformdata 版はこのようになります。

js
formElem.onformdata = (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
# event-formdata

ブラウザーの互換性

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
formdata event

Legend

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

Full support
Full support

関連情報