HTMLFormElement: formdata イベント

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

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

構文

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

addEventListener('formdata', (event) => {});

onformdata = (event) => { };

イベント型

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

Event FormDataEvent

イベントプロパティ

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

FormDataEvent.formData

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

例

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

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 版はこのようになります。

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報