質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.35%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 14K+
nnahito

nnahito

score 1863

 質問概要

<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】のご教授をお願い致します。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3 件

link

checkベストアンサー

+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関数で共通処理を記述する
のが良いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/13 01:42

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

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

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

    キャンセル

  • 2016/04/13 02:04

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

    キャンセル

  • 2016/04/13 04:48

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

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

    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();
    });
    の方は動いたので、こちらを利用させていただきます。

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

    キャンセル

link

+2

ネーミング的にはある程度統一した方が管理しやすいかも。
例) 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
  //上記を使ってやりたいことをやる
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0

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

<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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る