JavaScript FormDataの基礎

JavaScript FormDataの基礎

FormDataとは

FormDataクラスは、HTML5世代の機能です。

<FORM>要素内に存在する、全てのコントロール要素のnameとvalue属性値を取り出して、1つのFormDataオブジェクトとして纏めることが出来ます。

構文

const formData = new FormData(form)

HTMLの<form>要素を引数にとり、FormDataオブジェクトは<form>要素のnameプロパティをキー、送信される値をvalueとして使い、フォームの現在のキーと値が設定される。

formDataオブジェクトを作成する

引数で必要になる<form />を先に作成します。

<form id='myForm' name='test'>

  <input type='text' name='userName'>

  <input type='email' name='email'>

</form>

この<form>要素を引数にformDataを作成する

const form = document.getElementById('myForm') 

const formData = new FormData(form)


上記の例では連想配列のような形でデータを所持しておりキーバリューはそれぞれ
userName: inputに入力された名前」「email: 入力されたメール」になります。
次はformDataの中身を確認してみましょう。

formDataの中身を確認する

console.logでformDataの中身を見ようと試みても上手くいきません。

下記の画像はconsole.log(formData)にした時のコンソールです。

見ての通り返ってくるのはFormDataオブジェクトとそのメソッドです。

中身を一括で確認する方法は以下のようにするのが簡単です。

for (let data of formData) {

  console.log(data);

}

// formDataに対してentriesメソッドを使っても等価になります。
for (let data of formData.entries()) {

  console.log(data);

}

// ES6のスプレッド演算子を使えばシンプルに1行で済んじゃいます。
console.log(...formData.entries());

データを追加する

FormDataオブジェクトを作成する際に引数に何も与えなければ空のオブジェクトが生成されます。
これにデータを追加するには・・・

const formData = new FormData(); 

formData.append("hoge", "piyo");

上記のようにすれば第一引数にname属性値第二引数にvalu属性値を与えれば良い。

データを送信する

FormDataオブジェクトを外部に送信するにはXMLHttpRequestクラスを使用する(今はFetch APIの方が主流)

const xhr = new XMLHttpRequest(); 

xhr.open("POST" , URL); 

xhr.send(form_data);

その他のメソッド

  • get() / getAll()

    get => FormData オブジェクトから、指定したキーに関連付けられた最初の値を返します。
    getAll => FormData オブジェクトから、指定したキーに関連付けられた最初の値を返します。

    全ての値を一括で取得することは出来ないので特定のキーの値を取得する際はgetメソッドを活用するといいでしょう。
  • delete()

    FormData オブジェクトからキーと値のペアを削除します。

    formData.delete(‘key’);

    該当するキーがあった際にはそれに一致するvalueが削除されます。
  • set()

    これはappendと同じようにFormDataオブジェクトへ新しい値を追加します。

    appendと同様、第一引数にname属性値第二引数にvalu属性値を与えれば良い。
    formData.set(‘key’, ‘value’);

    appendとの違いは、

    ・append
    データがあろうがなかろうが引数のkeyとvalueを追加する。

    ・set
    keyが存在していればvalueを上書きする
    keyが存在していなければ新しく設定する