JAVASCRIPTで、ボタンを押したら 入力項目を追加できるようにしたい。

FORMタグ内に下記のようなの入力項目があります。
JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。

(最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい）

どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。

どうぞよろしくお願い致します。

<select>
<option value="　" selected="selected">選んでください</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</select>
<br class="spacer">
</div>
<div class="forms">
<label>テーブル1</label>
<input type="text" name="textfield" id="textfield" />
<label>テーブル2</label>
<input type="text" name="textfield" id="textfield" />
<label>テーブル3</label>
<input type="text" name="textfield" id="textfield" class="short" />
<div class="btns">
<input type="button" value="送信" />
<input type="button" value="さらに入力項目を追加する" />
<input type="button" value="クリア" />
</div>

No.3 ベストアンサー 回答者： t_netbug 回答日時： 2009/07/31 11:33

＞下記部分を、ボタンを押すごとにすべて、増殖させる感じです。

という事は
<input type="button" value="送信" />
<input type="button" value="さらに入力項目を追加する" />
<input type="button" value="クリア" />
この部分も増殖させるって事になるという事で良いのですね？

要素の構造の見直しをした方がよさげです。
それからdiv要素にはname属性は無かったと思います。

ヒントです。
勉強もふまえ、調べてみて下さい。
getElementsByTagName([タグ名(div,inputなど)]);

No.4 回答者： fujillin 回答日時： 2009/07/31 18:38

No1です。

#1にも書きましたが、そのまままとめて複製するのなら、#2様の回答の方法のほうが簡単です。
附番を変えて3個ずつ増加したいのなら、#1を1度に3回処理するようにすればば良いでしょう。

再度、言わせてもらうと、idの重複は避けるべきです。仮に、質問や、補足の投稿文の中であろうとも。

No.2 回答者： t_netbug 回答日時： 2009/07/29 14:34

#1様と同じくどこからどこまでをコピーしたいのかがよく分からないです。

#1様が既にソースを提示して下さっているのであえて書く必要ないかもだけど、自分ならこんな感じです。
<script type="text/javascript">
function copyNode(){
p = document.getElementById('par');
p.appendChild(p.firstChild.cloneNode(true));
}
</script>

<div id="par"><div>
<!-- コピーしたい内容をここに書く -->
</div</div>

この回答へのお礼

ありがとうございました。
参考にさせていただきます。

質問に不適切があり申し訳ありませんでした。
下記部分を、ボタンを押すごとにすべて、増殖させる感じです。
NAMEタグ内の、*マークの箇所が、追加されるたびに2.3.4と割り振られるイメージです。

自分でトライしてみますが、もしもお時間がありましたら、再回答いただけますと嬉しく思います。

<div class="title" name="select*"><div class="f_left">
<select>
<option value="　" selected="selected">選んでください</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</select>
<br class="spacer">
</div>
<div class="forms">
<label>テーブル1</label>
<input type="text" name="textfield1*" id="textfield" />
<label>テーブル2</label>
<input type="text" name="textfield2*" id="textfield" />
<label>テーブル3</label>
<input type="text" name="textfield3*" id="textfield" class="short" />
<div class="btns">
<input type="button" value="送信" />
<input type="button" value="さらに入力項目を追加する" />
<input type="button" value="クリア" />
</div>

お礼日時：2009/07/30 13:46

No.1 回答者： fujillin 回答日時： 2009/07/28 21:03

＞下記の部分を2個、3個と追加させたいと思っております。

「下記の部分」ってこれ全部が1セット？
まぁ、追加のボタンまでは作成はしないだろうと想像して、ラベルとインプットボックスが一つずつ増加して番号も増してゆくというのだろうか？
あるいは、セレクターもいっしょに増えるのかなぁ？？

その前に、ご質問文では<div>と</div>が対応していなかったり、idが重複していたり、ラベルと要素の関係が不明だったりするけれど、そのへんは適宜修正してください。

とりあえず、最小単位として1個ずつ追加するだけならこんな感じ。
「inputfield」にラベルとインプットをセットで追加。（for属性などは無し）
（レイアウトはCSSなどでなされていると仮定。）

<script type="text/javascript">
function sample() {
var i, tmp, e = document.getElementById('inputfield');
i = e.getElementsByTagName('INPUT').length + 1;
tmp = document.createElement('LABEL');
tmp.appendChild(document.createTextNode('テーブル'+i));
e.appendChild(tmp);
tmp = document.createElement('INPUT');;
tmp.name = 'textfield' + i;
e.appendChild(tmp);
}
</script>

<div id="inputfield">
<label>テーブル1</label>
<input type="text" name="textfield1">
</div>
<input type="button" value="入力項目追加" onclick="sample()">

インプットのname属性にも一応連番を振っていますが、不要な場合は削除。などなど、適当に変更してください。
（↑では、ラベルとインプット要素をそれぞれ生成していますが、多くの要素をまとめて追加したいのならcloneNodeを利用する方がはるかに簡単。）

この回答への補足

ご回答ありがとうございました。
早速導入しましたところ、テキストフィールドの追加動作を確認いたしました。参考にさせていただきます。

ありがとうございます。

質問が不適切で申し訳ありませんでした。
下記の部分を全て、ボタンを押すたびに増殖させることとなります
それぞれの入力項目のNAMEタグのラスト(*マークの箇所)を、2,3とつくようにする感じです。

自分でトライしてみますが、もしもお時間がありましたら、再回答いただけますと嬉しく思います。

<div class="title" name="select*"><div class="f_left">
<select>
<option value="　" selected="selected">選んでください</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</select>
<br class="spacer">
</div>
<div class="forms">
<label>テーブル1</label>
<input type="text" name="textfield1*" id="textfield" />
<label>テーブル2</label>
<input type="text" name="textfield2*" id="textfield" />
<label>テーブル3</label>
<input type="text" name="textfield3*" id="textfield" class="short" />
<div class="btns">
<input type="button" value="送信" />
<input type="button" value="さらに入力項目を追加する" />
<input type="button" value="クリア" />
</div>

補足日時：2009/07/30 13:35