- ベストアンサー
リストとテキストフィールドとボタンと文字を同時に添加したいですが
ウェブページにリストとテキストフィールドとボタンと文字を同時に添加したいですが、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）
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
javascriptでやるなら (1)隠しておいて見せる (2)DOMで追加する (3)DOMでクローンする そのた (4)サーバー側のphpやCGIで処理する など
お礼
どうもありがとうございます。 参考になりました。
お礼
実際は入力したデータをデータベースへ送信するべきですが、今回はウェブページの外見だけを作ればいいって話なので、これで結構です。 わたしにとってちょっとむずかしいからスクリプトの部分がわかりませんけど、それ以外のものがとてもわかりやすいで本当に助かりました。 どうもありがとうございました。