FormDataEvent: formData プロパティ

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月⁩.

formData は FormDataEvent インターフェイスの読み取り専用プロパティで、このイベントが発行された時点のフォームに含まれていたデータを表す FormData オブジェクトが入っています。

返値

FormData オブジェクトです。

例

// フォームの参照を取得
const formElem = document.querySelector("form");
// submit ハンドラー
formElem.addEventListener("submit", (e) => {
 // フォームの送信時、既定の動作を抑止
 e.preventDefault();
 // FormData オブジェクトを構築、これにより formdata イベントが発行
 new FormData(formElem);
});
// データを取得するための formdata ハンドラー
formElem.addEventListener("formdata", (e) => {
 console.log("formdata fired");
 // イベントオブジェクトからのフォームデータの取得
 let data = e.formData;
 for (const value of data.values()) {
 console.log(value);
 }
 // XHR を介してデータを送信
 const request = new XMLHttpRequest();
 request.open("POST", "/formHandler");
 request.send(data);
});