- ベストアンサー
document.writeでセレクトボックスを表示させると他のページ内容が白紙になるのですが
チェックボックスにチェックを入れるとセレクトボックスが表示されるようにしたいと思い、 お名前［テキストエリア］ ご住所［テキストエリア］ □特別指定します（ご希望の方はチェックして下さい） という表示のページにJavascriptを追加し、 <body> <script type="text/javascript"> <!-- function func() { if ((!document.F1.C1.checked)) { document.write("<SELECT NAME=\"有効月\" id=\"有効月\"><OPTION VALUE=\"指定なし\">お選び下さい<option>1<option>2<option>3<option>4<option>5<option>6<option>7<option>8<option>9<option>10<option>11<option>12</SELECT>"); } } // --> </script> <form name="F1" action="#"> <input type="checkbox" name="C1" value="指定します" onclick="func()"> 指定します<br> <br> ・ ・ ・ ・ ・ <input type="submit" value="送信"> </form> としたところ、「特別指定します」のチェックボックスにチェックを入れても何も反応が無く、逆に、一旦入れたチェックを外すと、セレクトボックスが表示されるかわりに他のページ内容が全て消えて真っ白ページにセレクトボックスだけがあるという結果になってしまいます。 チェックボックスにチェックを入れるとその下にセレクトボックスが表示され、さらにその後に続く入力欄にも色々記入した上で「送信」ボタンをクリックしてフォームを送信できるという結果を得るにはどうしたら良いでしょうか？
- chack
- お礼率99% (286/287)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
全般的に見直しが必要です。 とくに、document.write()はやめた方がいいですね。 チェックをつけることで表示したり隠したりする方が現実的では？ あわせてdisabledを操作すれば、送るデータを制御できます <style type="text/css"> #yukoduki{ display:none; } </style> <script type="text/javascript"> function func(obj) { var f=obj.form; f.yukoduki.disabled=!obj.checked; f.yukoduki.style.display=obj.checked?"block":"none"; } </script> <form id="F1" action="#"> <input type="checkbox" id="C1" value="指定します" onclick="func(this)"><label for="C1">指定します</label><br> <SELECT NAME="yukoduki" id="yukoduki" disabled> <OPTION VALUE="指定なし">お選び下さい</OPTION> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </SELECT> <input type="submit" value="送信"> </form>
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
・ ラジオボタンに替えてみました。 ・ <select>タグは、最初から準備しておき、表示・非表示を切り替えることにしてみました。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <style type="text/css"> #amonth { visibility: hidden; } </style> </head> <body> <script type="text/javascript"> <!-- function func(r) { if (r.value==0) { document.getElementById('amonth').style.visibility = 'visible'; } else { document.getElementById('amonth').style.visibility = 'hidden'; } } // --> </script> <form name="F1" action="#"> <input type="radio" name="R1" value="0" onclick="func(this)"> 特別指定します <input type="radio" name="R1" value="1" onclick="func(this)"> 指定しません <br> <br> <select id="amonth" name="有効月" id="有効月"> <option value="指定なし"> お選び下さい </option> <option> 1 </option> <option> 2 </option> </select> <hr /> AAAAAAAAAAAA </form> </body> </html>
お礼
ご回答ありがとうございます。 教えていただいた方法は、たまたま、「どこでお知りになりましたか？」というラジオボタンでの選択肢で「その他」を選ばれた場合の「”その他”の詳細」を表示したり非表示にしたりするところにも参考にさせていただくことができます。 どうもありがとうございました！
ページの読み込みが完了した後document.writeを使うと、 ページ全体を書き換えてしまいます。 innerHTMLを使ったほうが良いです。
お礼
> ページの読み込みが完了した後document.writeを使うと、 > ページ全体を書き換えてしまいます。 そ…、そうだったんですか…。(^^; そこのところの知識が全くなかったので、原因が理解できず、とても悩んでいました。 どうもありがとうございました！！
お礼
早々のご回答をどうもありがとうございます。 あれっ？ disabledを使っても解決するとは思いませんでした。 「disabledだとグレーアウトするだけ」と最初から度外視していた上、これは質問文に書かなかったことではありますがセレクトボックスの数を複数にした場合の対応方法もわからなかったので。 styleって、こういう使い方があるんですね。 これだと、styleの名前を複数使うことで複数のセレクトボックスにも対応できました。 とても助かりました。どうもありがとうございました！！