- ベストアンサー
フォームメール ラジオボタンＯＮでリストボックス表示
現在グッズデザインの注文フォームを構築中なんですが、 出来る限り分かりやすい注文フォームを構築したいと考えています。 で！ 『デザイン加工を希望する』のラジオボタンをチェックした時のみ 各デザイン部分のリストボックスが表示されるようにしたいのですが 例） ○ デザイン加工を希望する（希望の方はチェックをお願いします。） ラジオボタンをチェックすれば、以下の項目が表示される ●●部分の色『リストボックス』 ●●部分の形『リストボックス』 ●●部分の向き『リストボックス』 という感じです。 もう少し分かりやすい感じですと、 注文フォームで 『○ ご注文者と送り先が違う場合はチェックして下さい』 で、チェックすると名前、住所、電話など入力できるフォームが表示される 見ないな感じです。 この様な内容を解説しているページをご存知でしょうか？ ここが良いよ！的なWebサイトがありましたら教えてください。 宜しくお願い致します。
- torento19
- お礼率51% (25/49)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
「javascript 表示 非表示」で検索すると参考になるページが見つかると思います。 #1さんのサンプルとも似ていますが一応。 <html> <head> <script type="text/javascript"> function optionView(condId,targetBlockId) { document.getElementById(targetBlockId).style.display = (document.getElementById(condId).checked)?'block':'none'; } </script> </head> <body> <form> <div> <label for="jouken1" onclick="optionView(this.htmlFor,'targetblock1')">デザイン加工を希望する場合はチェックして下さい</label> <input type="checkbox" onclick="optionView(this.id,'targetblock1')" id="jouken1"> <ul id="targetblock1" style="display:none"> <li>●●部分の色 <select><option>選択してください</option></select></li> <li>●●部分の形 <select><option>選択してください</option></select></li> <li>●●部分の向き <select><option>選択してください</option></select></li> </ul> </div> <div> <label for="jouken2" onclick="optionView(this.htmlFor,'targetblock2')">ご注文者と送り先が違う場合はチェックして下さい</label> <input type="checkbox" onclick="optionView(this.id,'targetblock2')" id="jouken2"> <div id="targetblock2" style="display:none"> お名前<input><br> ご住所<input> </div> </div> </form> </body> </html> 私的には、最初隠れていて、何かすると出てくるってのはあまり好きではありません。 このケースでいうと、何が選べるのかってのもチェックをするかどうかの判断材料だと思えるから。 ただのサンプルケースなんで実際のフォームではまた違う印象を持つかもしれませんが。 あと、分かりやすいフォームを目指すなら「アクセシビリティ フォーム」 「ユーザビリティ フォーム」とかで検索すると参考になりますよ。 （フォームは結構奥が深い）
その他の回答 (1)
- arenani_sorenani
- ベストアンサー率73% (58/79)
サイトは知らないので書きました・・ こんな感じでしょうか。 <style type="text/css"> #design1{ display:none; } </style> <script type="text/javascript"> function check(){ return false; } function show_Design1(obj){ if(obj.checked){ document.getElementById("design1").style.display="block" }else{ document.getElementById("design1").style.display="none" } } </script> <body> <form name="form1" method="POST" action="" onsubmit="return check()"> <input type="checkbox" id="check1" name="check1" onclick="show_Design1(this)" /> <label for="check1">デザイン加工を希望する（希望の方はチェックをお願いします。）</label><br> <div id="design1"> ●●部分の色 <select name=""><option value="">--選択--</option></select><br> ●●部分の形 <select name=""><option value="">--選択--</option></select><br> ●●部分の向き<select name=""><option value="">--選択--</option></select> </div> <input type="submit" value="送信" /> </form> </body> .
お礼
arenani_sorenaniさん ありがとうございます。 まさしくイメージ通りって感じです（涙） 参考にさせて頂き、構築したいと思います。 本当にありがとうございました。
お礼
お～～！ これこれーー～って感じです（涙） ありがとうございます。 「アクセシビリティ フォーム」「ユーザビリティ フォーム」という 言葉を知りませんでした…。 「javascript 表示 非表示」も含めて検索して勉強します。 ありがとうございました。m(_ _)m