FormDataEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.

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

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

コンストラクター

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

インスタンスプロパティ

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

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

インスタンスメソッド

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

例

// フォームの参照を得る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());});