FormData: 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.
構文
js
new FormData()
new FormData(form)
new FormData(form, submitter)
引数
例外
TypeError
-
指定した
submitter
が送信ボタンでない場合に発生します。 NotFoundError
DOMException
-
指定した
submitter
がform
のメンバーでない場合に発生します。submitter
はフォーム要素の子孫であるか、フォームを参照するform
属性がなければなりません。
例
空の FormData の作成
次の行は、空の FormData
オブジェクトを生成します。
js
const formData = new FormData();
append()
を使って、これにキーと値のペアを追加することができます。
js
formData.append("username", "Chris");
HTML フォーム要素からの事前入力
オプションで form
と submitter
を指定すると、FormData
オブジェクトを作成する際に、指定したフォームの値を事前入力することができます。
メモ: FormData オブジェクトに含まれるのは、正常なフォームコントロールのみです。つまり、名前を持ち、無効状態でないものです。
HTML
html
<form id="form">
<input type="text" name="text1" value="foo" />
<input type="text" name="text2" value="bar" />
<input type="text" name="text2" value="baz" />
<input type="checkbox" name="check" checked disabled />
<button name="intent" value="save">Save</button>
<button name="intent" value="saveAsCopy">Save As Copy</button>
</form>
<output id="output"></output>
JavaScript
js
const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);
const output = document.getElementById("output");
for (const [key, value] of formData) {
output.textContent += `${key}: ${value}\n`;
}
結果
簡潔にするため、<form>
要素は非表示にしています。
仕様書
Specification |
---|
XMLHttpRequest Standard # dom-formdata |
ブラウザーの互換性
BCD tables only load in the browser