【JavaScript】動的追加したテキストボックスは、どのようにして取得・管理するのか

Question

質問概要

<input type="text" id="hoge">のようなテキストボックスを、
ユーザが動的追加できるようにした場合の、全てのボックスのテキストの取得方法が知りたい

質問詳細

現在趣味で開発しているサービスで、ゲームの作者を入力する欄を作りたいのですが、
作者が複数人いる場合があり、<input type="text" id="hoge">のようなテキストボックスの隣に＋ボタンを設置し、
ユーザが自由に複数の作者を登録できるようにしたいと考えています。

この時、動的に作られたテキストボックスの値を取得したいのですが、

【1】一般的にどのように動的作成しているのでしょうか？
例：id="hoge"の統一（HTML文法的にアウトですよね…？）
例：name="hogeで統一…？

【2】その動的作成されたテキストボックスの値をどのように取得すればよいのでしょうか？

やってみたこと

動的追加ではありませんが…

<input type="text" id="hoge"><input type="text" id="hoge">
と、2つボックスを用意して、
$("#hoge").val();→1つ目の値しか取得できなかった

---

<input type="text" id="hoge" name="test"><input type="text" id="hoge" name="test">
と、name属性を同じに設定した2つボックスを用意して、
$(':text[name="test"]').val()→1つ目の値しか取得できなかった

を試してみましたがどうもできませんでした…
ご存じの方がいらっしゃいましたら、上記の【1】【2】のご教授をお願い致します。
よろしくお願いいたします。

Answer 1

ネーミング的にはある程度統一した方が管理しやすいかも。
例) hoge1, hoge2, ...

スマートな方法は他の方に任せて泥臭い方法を…
var f = document.form_name; //FORMタグのオブジェクトを取得
for (var i = 0; i < f.length; i++) {
var obj = f.elements[i]; //各部品のオブジェクトを取得
//型式 obj.type
//名前 obj.name
//内容 obj.value
//上記を使ってやりたいことをやる
}

Answer 2

Formで動的なinputを用いる場合、特にこれら２つについて考慮する必要があるかと思います。
1.POST先のサーバーサイドプログラムで扱う場合
2.Javascript内から扱う場合
1については、質問の【1】に、2については、【2】に関連するかと。

【１】について
1については、name属性を共通でhoge[]という形式にすることで、POST先プログラムでhogeの配列として
多くの場合扱うことができますので、nameを独自にインデックスを付与する等を行うよりも、
サーバーサイドで扱いやすくなります。

【２】について
2については、validation処理等のケースが多いと思いますので、nameをそのままセレクタに用いるか、
共通のclassを指定してください。
また、val()関数をいきなり用いると、一番最初の要素の値しか返しません。name/classをセレクタで
指定した場合は配列のイメージとなりますので、一度get等で取得するか、map関数で共通処理を記述する
のが良いと思います。

Comments

[nnahito]

ご回答有り難うございます。

>一度get等で取得するか、map関数で共通処理を記述する
ここの意味が理解できなかったのもう少し詳しい解説をお願いしてもよろしいでしょうか？

jQueryでの値の取得は「.val()」ですが、今回の場合は直接利用できないので、
「get」をつかうとのことですが、「.get()」で調べるとajaxの記事しかヒットしません……
どのように使うのでしょうか？

[退会済みユーザー]

get関数は、セレクタで複数の要素が取得できた時に、配列の添字のように、
指定したIndexの要素を取得することができます。
(Ajaxの同じ関数名なので紛らわしいですが・・・）
$(".hoge").get(0).val(); //hoge classが指定されたinputの1番目の値を取得
$(".hoge").get(1).val(); //hoge classが指定されたinputの2番目の値を取得

これを利用して、以下のような形でループを回して処理ができます。

var hoge = $(".hoge");

for (var i = 0; i < hoge.length; i++) {
　//１つ１つ値を取得する
　hoge.get(i).val();
}

なお、これをもっと簡単にしたのがmap関数です。
map関数の引数として渡した関数を、配列の各要素で実行します。

$(".hoge").map(function() {
　//1つ1つ値を取得する（実施している内容はほぼ上と一緒）
　$(this).val();
});

map関数については、関数型プログラミング等で出てきたりして概念として理解しようと
するとややこしいですか、こういう風に配列を一律で処理できるものだと
考えて使ってみると良いのではないかと思います。

[nnahito]

ご返信有り難うございます。

そのような使い方ができるのを初めて知りました。
しかし、

var hoge = $(".hoge");

for (var i = 0; i < hoge.length; i++) {
　//１つ１つ値を取得する
　hoge.get(i).val();
}

の方は、
「hoge.get(i).val() is not function」
のようなエラーが出ました……

$(".hoge").map(function() {
　//1つ1つ値を取得する（実施している内容はほぼ上と一緒）
　$(this).val();
});
の方は動いたので、こちらを利用させていただきます。

が、このエラーの謎が気になるので、調べてみます。
ありがとうございました。

Answer 3

他にもいくつかやり方はありますが、こういう感じでいけるのでは。

<input type=text name=aaa[]>

var frm = document.form_main;
frm.elements['aaa[]'][0].value = 'hello';
// ※ この例ではフォームの配列変数aaaのインデックス0に、文字列helloを格納。

【同じ名前のname属性を配列で持つ方法（フォームの配列） - JavaScript備忘録 - g:javascript】
https://javascript.g.hatena.ne.jp/py4s-tnk/20130226/1361884317