javascriptでテキストボックスの値を取得したいです。

Question

javascriptでテキストボックスに入力された値を渡したいです。

javascriptでテキストボックスに値を渡す方法で困っています。
以下のようなシチュエーションの場合はどのように値を渡せばよいですか？
<input type=text name=a val=a>
<input type=text name=b val=b>
<input type=button name=c val=c>
このような要素があって、ボタンを押すと、フォーム送信されて(formを省略してしまい申し訳ございません)、JavaScriptでtextボックスの中身をそれぞれとりたいです。

しかし、更に条件をつけて、どんなinput type=textが来ても、JavaScriptで値を受け取れるものにしたいです。
どのようなinput type=textがくるのかがわかっている場合は、getElementsByIdのようなものを使用すればできそうですが、どのようなものがくるかわからないと言うことが前提です。

回答よろしくお願いします。

Answer 1

まず、HTMLの属性が不思議な感じになっています。
属性の値は"で囲ったほうがようでしょう。そして、inputタグの値を入れる属性はval=値ではなくvalue="値"です。
属性が正しく指定されていればフォームを送信すると正確にデータが送信されているはずです。

<input type="text" name="a" value="a">
<input type="text" name="b" value="b">
<input type="button" name="c" value="button">

まず、input[type="text"]限定であれば、
jQueryのタグも付いておりますので、jQueryを使ってinput[type="text"]で丸っと取得して.each()で1つ1つループで回して値を取得してあげることができます。

どんなinput type=textが来ても

この部分が、textではなく、checkboxやradioなどの違うタイプが来てもと言う意味であれば、
$('input')で丸っとインプットタグを取得してループで回して、その際に1つ1つのtypeで判別して、入力されている値の取得方法を変更して上げる必要があります。

以下、input[type="text"]のみが沢山あるかも知れないけど、全部取得したい。と言う前提になります。

ボタンを押すと、フォーム送信されて、JavaScriptでtextボックスの中身をそれぞれとりたいです。

この部分の意図することがいまいち不明瞭なのですが、
0. ボタンをクリックする
0. フォームが送信される
0. 何らかの処理が行われた後でこのページに戻ってくる？
0. ページに戻ってきた後に送信した内容がinput[type="text"]タグのvalueに予め入力されている？
0. ここでinput[type="text"]タグのvalueをjavascriptで取得したい？
ということでしょうか？

上記のような想定であれば、フォーム送信後に戻ってくる時に予めvalueをセットするのに何かしらの言語を使用しているかと思いますので、その言語でフォームが送信された後の時だけ、出力されるブロックを作成し、そこにループで値を取得するjavascriptを記述すれば良いかと思います。

<?php if( 'フォーム送信後' ): ?>
<script>
$(function() {
  var data = {};
  !function() {
    $('input[type="text"]').each(function(i, elm) {
      var $input = $(elm),
          val = $input.val(), // inputタグのvalue
          inputName = $input.attr('name'); // inputタグのname属性
      data[inputName] = val;
    });
  }();
  console.log(data);
});
</script>
<?php endif: ?>

そうではなく、buttonクリック時(フォーム送信前)にバリデーションとかで現在入力されている値を取得したいと言うことであれば、buttonにclickイベントをつけてデータを取得するようにすれば良いかと思います。

$(function() {
  var getInputTextValues = function() {
    var data = {};
    $('input[type="text"]').each(function(i, elm) {
      var $input = $(elm),
          val = $input.val(), // inputタグのvalue
          inputName = $input.attr('name'); // inputタグのname属性
      console.log(inputName, val);
      data[inputName] = val;
    });
    return data;
  };
  $('input[type="button"]').on('click', function(evt) {
    var data = getInputTextValues();
    console.log(data);
    // 取り急ぎフォームを送らないようにするのであれば下記を追加してください。
    // evt.preventDefault(); evt.stopPropagation(); を使う方法もあります。
    // 興味があれば調べてみてください。
    return false;
  });
});