jQueryで複数のinputからそれぞれのvalueを取得する。

はじめに

タイトルの操作で悩んだので、自分で試したり調べたりしたことと、teratailなどで質問して分かったことをまとめます。

結論を簡潔にお伝えすると、複数のinputからそれぞれのvalueを一括に取り出すメソッドはありませんでした。代わりに、複数の要素に対して同じ処理をおこなう.map()とvalueを取り出す.valueを組み合わせて解決しました。

やりたいこと

同じクラスをもつ複数のinputから、それぞれのvalueを取り出したい。

form.html

<form action="" method="">
    <input class="input" type="text" name="inputs[]"></input>
    <input class="input" type="text" name="inputs[]"></input>
    <input class="input" type="text" name="inputs[]"></input>
    <button type="button" class="btn">button</button>
</form>

それぞれのinputには"input1", "input2", "input3"を入力。

解決方法

script.js

$(function(){

    $('.btn').on('click', function() {

        const inputs = $('.input').each(function(index, element){
            return element.value;  // valueを取り出す
        }).get();  // 標準的な配列に変換

        console.log(inputs);  // ["input1", "input2", "input3"]

    });
});

.each()を使うことで、複数のinputに対して同じ処理（valueの取得）をしています。また、.each()はjQueryオブジェクトを返すので、.get()を使って標準スタイルの配列に変換しています。

間違えたコード

1つ目

.valueではなく.val()を使っていた。

.val()はjQueryのオブジェクトに使用するメソッド、.valueはHTMLInputElementオブジェクトに使えるメソッドだそうです。$('.input')はjQueryのオブジェクトで、elementはHTMLInputElementになっているらしい、、ここらへんの理解が甘いので、勉強します。

2つ目

.map()ではなく.each()を使っていた（.each()の使い方を間違えていた）。

script.js

$(function(){

    $('.btn').on('click', function() {

        const tests = $('.input').each(function(index, element){
            return element.value;
        });

    });
});

.each()のreturnはbool型にしないといけないらしいです。
一般的なfor文のcontinueに当たるものがreturn True、breakに当たるものがreturn Falseという認識です。

参考

• JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる（teratail）
  https://teratail.com/questions/285400?whotofollow=

• JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる（スタック・オーバーフロー）
  https://ja.stackoverflow.com/questions/69636/javascript%e3%81%a7-value%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%84%e3%82%8b%e3%81%ae%e3%81%abvalue%e3%81%a7%e3%81%af%e3%81%aa%e3%81%8fhtml%e3%82%bf%e3%82%b0%e3%81%8c%e8%bf%94%e3%81%a3%e3%81%a6%e3%81%8f%e3%82%8b/69637#69637

• JavaScript初心者が失敗しがち/間違えがちなこと8選（Workship MAGAZINE）
  https://goworkship.com/magazine/javascript-beginner-mistakes/

• 【jQuery入門】2種類のeach()による繰り返し処理まとめ！（Samurai Blog）
  https://www.sejuku.net/blog/33609

• 【jQuery入門】map()を活用した繰り返し処理の方法まとめ！（Samurai Blog）
  https://www.sejuku.net/blog/66032