FormData: FormData() コンストラクター
構文
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