クリックでHTMLを操作してフォームを追加したい

質問

こんにちわ
名前、住所、電話番号の入力フィールド、
submitで送信するJTMLがあったとします。

「住所を追加」をクリックした場合のみに、送付先の入力フィールドがjavascriptで追加されるようなサイトを見たことがあるのですが、どのように制御されるのでしょうか？

クリックされればされただけフィールドが追加されるのが希望です。

参考サイトなどあれば教えて下さい。

回答No.5

yambejp · ベストアンサー

えーと、ループ番号ってのがどういうものかわかりませんが
思いっきり手をぬいてグローバルにカウンタをもたせてみました
本来なら最後の番号を見ながらそれにインクリメントするのが
正しい気はします。
（例によって挿入の都合上div_submitをクラスからidに変更しています）

<script>
var num=1;
function addrow(obj){
var n=obj.parentNode.parentNode.firstChild;
var flg=true;
while(n){
if(n.nodeName=="DIV"){flg=false; break;}
n=n.nextSibling;
}
if(flg) return false;
var row=n.cloneNode(true);
var n=row.firstChild;
var flg=false;
while(n){
if(n.nodeName=="#text" && n.nodeValue.match(/.*\:/)){
n.nodeValue=n.nodeValue.replace(/(.*)\:/,"$1"+ num +":");
flg=true;
}
n=n.nextSibling;
}
if(flg) num++;
obj.parentNode.parentNode.insertBefore(row,document.getElementById('div_submit'));
}
</script>
<form action="hoge.php">
<div class="div1">名前:<input type="text" name="name[]">住所:<input type="text" name="address[]">電話番号:<input type="text" name="tel[]"></div>
<div id="div2">備考1<input type="text" name="bikou"></div>
<div id="div_submit"><input type="button" value="add" onclick="addrow(this)"></div>
</form>

回答No.4

yambejp

この場合備考も含めてクローンしたいのでしたらあわせてdivで
くくります。
たんに住所の行だけでよいなら、備考はクラスではなくidで
管理するとやりやすくなります。

<script>
function addrow(obj){
var n=obj.parentNode.parentNode.firstChild;
var flg=true;
while(n){
if(n.nodeName=="DIV"){flg=false; break;}
n=n.nextSibling;
}
if(flg) return false;
var row=n.cloneNode(true);
obj.parentNode.parentNode.insertBefore(row,document.getElementById('div2'));
}
</script>
<form action="hoge.php">
<div class="div1">名前:<input type="text" name="name[]">住所:<input type="text" name="address[]">電話番号:<input type="text" name="tel[]"></div>
<div id="div2">備考1<input type="text" name="bikou"></div>
<div class="div_submit"><input type="button" value="add" onclick="addrow(this)"></div>
</form>

ボタンが下にあると、連続して押せないのでUIとしてはどうかと・・・
備考をクラスにした場合、ちょっと面倒なやりかたになるので
今回は割愛しますが、別にできないわけではありません。

お礼

なんどもありがとうございます。

追記される項目をボタンのしたにぶら下げるのではなく、備考１の下（この場合はdiv2とdiv_submitの間）に追記していくにはどうすれば良いでしょうか？

また、項目名（この場合は名前：住所：電話番号：のみっつ）にループ番号を振ることは可能でしょうか？

回答No.3

yambejp

＞javascriptを動かすためのボタンはどのように表示すれば良いでしょうか？

あれ？提示したボタンではダメですか？
もしそうであればインタフェースを具体的にどうしたいのか書いてください。

お礼

大変失礼しました。確認不足でした。

再度ご質問なのですが、form部分が下記の場合は

<form action="hoge.php">
<div class="div1">名前:<input type="text" name="name[]">住所:<input type="text" name="address[]">電話番号:<input type="text" name="tel[]"></div>
<div class="div2">備考1<input type="text" name="bikou"></div>
<div class="div_submit"><input type="button" value="add" onclick="addrow(this)"></div>
</form>

どのような記述になりますか？

回答No.2

yambejp

手っ取り早いのは、オブジェクトをクローンして、アペンドするのかな・・・

<script>
function addrow(obj){
var n=obj.parentNode.nextSibling;
var flg=true;
while(n){
if(n.nodeName=="DIV"){flg=false; break;}
n=n.nextSibling;
}
if(flg) return false;
var row=n.cloneNode(true);
obj.form.appendChild(row);
}
</script>
<form id="f0" action="hoge.php" method="get">
<div><input type="button" value="add" onclick="addrow(this)">
<hr />
</div>
<div>名前:<input type="text" name="name[]">住所:<input type="text" name="address[]">電話番号:<input type="text" name="tel[]"></div>
</form>

お礼

アドバイスありがとうございます。

javascriptを動かすためのボタンはどのように表示すれば良いでしょうか？

回答No.1

t_ohta

簡単なのは、スタイルシートを使い追加するフィールドを非表示（display: none;）にしておき、ボタンをクリックした時にJavaScriptでスタイルシートを書き換えて表示（display: block;）する方法ではないでしょうか。

<div id='soufusaki' style='display: none;'>
住所：<input type='text' name='xxx' />
</div>
<input type='button' value='表示' onclick='soufusaki.style.display = "block";' />

お礼

アドバイスありがとうございます。
今回は、POSTされるデータにも影響与えるため、HTMLを変更する形を希望しています。

javascriptでCSSを制御が必要になった場合には役立たせて頂きます。