ベストアンサー

リストとテキストフィールドとボタンと文字を同時に添加したいですが

2008/12/14 17:18

ウェブページにリストとテキストフィールドとボタンと文字を同時に添加したいですが、JavaScriptの知識が乏しくて困るところです。具体的にはこうしたいです。まずこれを見てください。 "and"のボタンを押すと： http://i474.photobucket.com/albums/rr106/fortegsv5/cap1.jpg 「（リスト）is（リスト）（テキストフィールド）（ボタン）」の欄を挿入する： http://i474.photobucket.com/albums/rr106/fortegsv5/cap2.jpg 以降、"and"のボタンを押すと何度でも挿入できるようにするつもりですが、どう書けばいいかわかりません。ご回答をお願いいたします。ウェブページのHTMLです： <html> <body> <form name="form1" method="post" action=""> <p>Show rent records such that</p> <p> <select name="select" size="1" id="select"> <option>rent ID</option> <option>user ID</option> <option>book ID</option> <option>date of borrow</option> <option>date of return</option> <option>expiration date</option> </select> is <select name="select2" id="select2"> <option>equal to</option> <option>smaller than</option> <option>larger than</option> </select> <input name="textfield" type="text" id="textfield" /> <input name="button3" type="submit" id="button3" value='and'/> </p> <p>in the <select name="select3" size="1" id="select3"> <option>ascending</option> <option>descending</option> </select> order of <select name="select4" size="1" id="select4"> <option>rent ID</option> <option>user ID</option> <option>book ID</option> <option>date of borrow</option> <option>date of return</option> <option>expiration date</option> </select> </p> <p> <input type="submit" name="button" id="button" value="Submit" /> <input type="reset" name="button2" id="button2" value="Reset" /> </p> </form> </body> </html>

fortegsv5
お礼率100% (21/21)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2008/12/15 22:54 回答No.2

andのボタンがsubmitということは、オリジナルはサーバ側で処理しているのでしょうか。 javascriptだとユーザー環境に依存するけど、同じものが増えていくだけなので、雛形を作っておいて追加してあげればよいのでは？以下、サンプルです。（optionは一部省略）送信時の項目名をどうするか不明なので、とりあえず雛形のid、nameに連番で「_番号」を振っています。（適宜、調整の要あり） <html> <script type="text/javascript"> window.onload=function(){fuga();} function fuga() { var num=document.getElementById('hoge0').getElementsByTagName('div').length; var e=document.createElement('div'); e.innerHTML=document.getElementById('hoge').innerHTML; id_set(e,'select',num); id_set(e,'input',num); document.getElementById('hoge0').appendChild(e); } function id_set(el,tg,n){ var t=el.getElementsByTagName(tg); for (var i=0; i<t.length; i++){t[i].id+="_" + n; t[i].name += "_" + n;} } </script> <body> <form name="form1" method="post" action=""> <p>Show rent records such that</p> <div id="hoge0"> </div> <p>in the <select name="select3" size="1" id="select3"> <option>ascending</option> <option>descending</option> </select> ～～以下省略～～ </p> </form>  <div id="hoge" style="display:none;"> <p> <select name="select1" size="1" id="select1"> <option>rent ID</option> <option>user ID</option> </select> is <select name="select2" id="select2"> <option>equal to</option> <option>smaller than</option> </select> <input name="textfield" type="text" id="textfield" /> <input name="button3" type="button" id="button3" onclick="fuga()" value='and'/> </p> </div> </body> </html>

質問者