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 July 2015.

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

返値

FormData オブジェクトです。

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

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);
});

仕様書

Specification
HTML
# the-formdataevent-interface:dom-formdataevent-formdata-2

ブラウザーの互換性

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

Legend

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

Full support
Full support

関連情報