[JavaScript] jQueryで複数のテキストボックスの値をまとめて取得する

このページのタグ:[JavaScript] [jQuery]
jQueryで複数のテキストボックスの値をまとめて取得するコードを紹介します。

概要

クラスなどの複数要素を選択するセレクターで要素を選択し、val()メソッドを呼び出した場合、最初に選択された要素のvalueの値のみ取得できます。複数要素を選択した場合は、map関数を用いると複数の値をまとめて取得できます。

コード


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        var inputText = $(".textBox").map(function (index, el) {
          return $(this).val();
        });

        showtext = "";
        for (i = 0; i < inputText.length; i++) {
          showtext += inputText[i] + "<br/>";
        }
        $("#output").html(showtext);

      })
    })
  </script>
</body>
  <input id="Text1" class="textBox" type="text" /><br/>
  <input id="Text2" class="textBox" type="text" /><br />
  <input id="Text3" class="textBox" type="text" /><br />
  <input id="Text4" class="textBox" type="text" /><br />
  <input id="Text5" class="textBox" type="text" /><br />
  <input id="Button1" type="button" value="button" />
  <div id="output"></div>
</html>

解説


  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        var inputText = $(".textBox").map(function (index, el) {
          return $(this).val();
        });

        showtext = "";
        for (i = 0; i < inputText.length; i++) {
          showtext += inputText[i] + "<br/>";
        }
        $("#output").html(showtext);

      })
    })
  </script>


  $(document).ready(function () {
    ...
  }
上記コードにより、ページ表示後にJavaScriptが実行されます。


  $("#Button1").click(function () {
    var inputText = $(".textBox").map(function (index, el) {
      return $(this).val();
    });

    showtext = "";
    for (i = 0; i < inputText.length; i++) {
      showtext += inputText[i] + "<br/>";
    }
    $("#output").html(showtext);
  })
ボタンのクリックイベントを実装するコードです。セレクタで複数の要素(今回の例の場合は"textBox"クラス)を選択し、map関数によりそれぞれの選択要素に対してコールバック関数を実行します。コールバック関数ではval()メソッドを呼び出し、テキストボックスの値を返します。返した値はinputTextに配列として格納されます。
inputText配列から値を取り出し整形してid="output"の枠に表示します。

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。


テキストボックスに値を入力します。


入力後[Button]をクリックします。ボタンの下部にテキストボックスに入力したテキストが表示されます。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)