document.writeでセレクトボックスを表示させると他のページ内容が白紙になるのですが

解決済

質問者：chack
質問日時：2008/04/07 14:25
回答数：3件

チェックボックスにチェックを入れるとセレクトボックスが表示されるようにしたいと思い、

お名前［テキストエリア］
ご住所［テキストエリア］
□特別指定します（ご希望の方はチェックして下さい）

という表示のページにJavascriptを追加し、

<body>
<script type="text/javascript">

</script>
<form name="F1" action="#">
<input type="checkbox" name="C1" value="指定します" onclick="func()">
指定します<br>
<br>
　　　　　　・
　　　　　　・
　　　　　　・
　　　　　　・
　　　　　　・
<input type="submit" value="送信">
</form>

としたところ、「特別指定します」のチェックボックスにチェックを入れても何も反応が無く、逆に、一旦入れたチェックを外すと、セレクトボックスが表示されるかわりに他のページ内容が全て消えて真っ白ページにセレクトボックスだけがあるという結果になってしまいます。

チェックボックスにチェックを入れるとその下にセレクトボックスが表示され、さらにその後に続く入力欄にも色々記入した上で「送信」ボタンをクリックしてフォームを送信できるという結果を得るにはどうしたら良いでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： auty
回答日時：2008/04/07 15:25

・　ラジオボタンに替えてみました。

・　<select>タグは、最初から準備しておき、表示・非表示を切り替えることにしてみました。

以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<style type="text/css">
#amonth {
visibility: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">

</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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
教えていただいた方法は、たまたま、「どこでお知りになりましたか？」というラジオボタンでの選択肢で「その他」を選ばれた場合の「”その他”の詳細」を表示したり非表示にしたりするところにも参考にさせていただくことができます。
どうもありがとうございました！

通報する

お礼日時：2008/04/07 15:48

No.2

回答者： sun_wil_19
回答日時：2008/04/07 15:11

　ページの読み込みが完了した後document.writeを使うと、

ページ全体を書き換えてしまいます。
innerHTMLを使ったほうが良いです。

- 0
- 件

通報する

この回答へのお礼

> ページの読み込みが完了した後document.writeを使うと、
> ページ全体を書き換えてしまいます。

そ…、そうだったんですか…。(^^;
そこのところの知識が全くなかったので、原因が理解できず、とても悩んでいました。

どうもありがとうございました！！

通報する

お礼日時：2008/04/07 15:43

No.1ベストアンサー

回答者： yambejp
回答日時：2008/04/07 14:46

全般的に見直しが必要です。

とくに、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>

- 0
- 件

通報する

この回答へのお礼

早々のご回答をどうもありがとうございます。
あれっ？ disabledを使っても解決するとは思いませんでした。
「disabledだとグレーアウトするだけ」と最初から度外視していた上、これは質問文に書かなかったことではありますがセレクトボックスの数を複数にした場合の対応方法もわからなかったので。
styleって、こういう使い方があるんですね。
これだと、styleの名前を複数使うことで複数のセレクトボックスにも対応できました。
とても助かりました。どうもありがとうございました！！

通報する

お礼日時：2008/04/07 15:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！