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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

ブラウザーの互換性

関連情報