LoginSignup
9
3

More than 3 years have passed since last update.

@yjn279(winnie 279)

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

Posted at

はじめに

タイトルの操作で悩んだので、自分で試したり調べたりしたことと、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という認識です。

参考

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
3