[JavaScript] Formの入力内容をObject形式で取得する

Ajaxなどでフロントエンドからサーバーサイドと連携する際に
Object形式でサーバーサイドにパラメータをpostします。
そのような場合に、Formの入力内容をまとめてObject形式で取得する方法が
便利なのでシェアしたいと思います。

入力Formを配列で取り出してObjectに変換する

以下のような一般的なhtml入力Formのすべての入力内容をObjectにまとめる方法です。


<form action="" method="post" class="test_form">


    <label for="name">name: </label>
    <input type="text" name="name" value="西田">

    <label for="company">company: </label>
    <input type="text" name="company" value="ギガスジャパン">

    <label for="email">email: </label>
    <input type="email" name="email" value="nishida@gigas-jp.com">

    <label for="car">car:</label>
    <select name="car">
        <option value="nissan">日産</option>
        <option value="toyota">トヨタ</option>
        <option value="honda">ホンダ</option>
        <option value="subaru" selected>スバル</option>
    </select>

    <input type="submit" value="登録">

</form>


まずはquerySelectorでformを選択します。


const myform = document.querySelector('.test_form');


つぎに登録ボタン(submitボタン)にEventListenerを追加して
submit時に処理を呼び出します。


myform.addEventListener('submit',function(e){
    //
});


実際にsubmitされてしまうと画面がリロードされ、console.logなどでの
確認ができなくなるので、いったんsubmitされるデフォルトの挙動をキャンセルします。


myform.addEventListener('submit',function(e){
    e.preventDefault(); //デフォルトのsubmit挙動をキャンセル
    //
});


つぎにForm入力情報を配列で取り出します。
このためにはFormDataオブジェクトのコンストラクタにform引数を指定します。
さらにスプレッド構文(…)で配列に格納します。


myform.addEventListener('submit',function(e){
    e.preventDefault();

    //Form入力情報を配列で取り出す
    const dataArr = [...new FormData(this)];
    console.log(dataArr);

});


console.logで確認すると以下のように入力情報が取り出せていることが
確認できます。


つぎにこの配列をObjectに変換します。
Object.fromEntriesを使用することでKey-Valueの組み合わせで
配列をObjectに変換することができます。


myform.addEventListener('submit',function(e){
    e.preventDefault();
    const dataArr = [...new FormData(this)];

    //配列をObjectに変換
    const data = Object.fromEntries(dataArr);
    console.log(data);

});


console.logで確認すると以下のように正しくObject化できたことが確認できました。



木曜日担当:nishida



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム