- ベストアンサー
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
- お礼率100% (282/282)
- 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を使うと、 > ページ全体を書き換えてしまいます。 そ…、そうだったんですか…。(^^; そこのところの知識が全くなかったので、原因が理解できず、とても悩んでいました。 どうもありがとうございました！！
関連するQ&A
- セレクトボックスとチェックボックスを使った絞込み検索
Yomi-Searchについての質問なのですがタイトルの通りの質問でチェックボックスを使った絞り込み検索では 01_03 04_01 と検索結果に表示されるのですがセレクトボックスとチェックボックスを組み合わせて絞り込み検索をしてみると 01_0304_01 とこのようにカテゴリとカテゴリの間にスペースが入らず絞り込み検索が出来ません‥ タグはこのように書きました。 <FORM action="http://www..." method="get" target="" name="form1"> <INPUT type="hidden" name="mode" value="search"> <INPUT type="hidden" name="page" value="1"> <INPUT type="hidden" name="sort" value="mark"> <INPUT type="hidden" name="engine" value="pre"> <INPUT type="hidden" name="kn" value="30"> <SELECT size="1" name="word"> <OPTION type="selected" value="">--------</OPTION> <option value="01_01" name="word1">○○○</option> <option value="01_02" name="word2">○○○</option> <option value="01_03" name="word3">○○○</option> </SELECT><BR> <BR> <INPUT type="checkbox" name="word4" value="04_01">○○○<BR> <INPUT type="checkbox" name="word5" value="04_02">○○○<BR> <INPUT type="checkbox" name="word6" value="04_03">○○○<BR> <BR> <INPUT type="submit" value=" 検 索 "> <INPUT type="reset" value="リセット"> </FORM> 全くの初心者ですいませんが良きアドレスなどをお願いします。
- 締切済み
- HTML
- セレクトボックスを無効に出来なくて困っています
このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <form method="POST" name="form01"> <script language="javascript" type="text/javascript"> <!-- function swDis() { fObj = document.form01; fObj.sentaku01.disabled = (fObj.namae[0].checked) ? false : true ; fObj.sentaku02.disabled = (fObj.namae[1].checked) ? false : true ; fObj.sentaku03.disabled = (fObj.namae[2].checked) ? false : true ; } //--> </script> <p> <input type=radio name="namae" value="AAA" onclick="swDis()" checked /> sentaku01 <select name="sentaku01" id="sentaku01"> <option>選択肢１</option> <option>選択肢２</option> <option>選択肢３</option> </select> <br /> <input type=radio name="namae" value="BBB" onclick="swDis()" /> sentaku01 <input type=text name="sentaku02" disabled /> <br /> <input type=radio name="namae" value="CCC" onclick="swDis()" /> sentaku01 <input type=text name="sentaku03" disabled /> <br /> <input type=radio name="namae" value="sentaku04" onclick="swDis()" /> sentaku04<br /> <input name="" type="submit" value="送信する" /> </p> </form> しかし、この方法ですと、最初にフォームが表示された段階ではセレクトボックスが生きてしまい、他のいずれかのラジオボタンをクリックしないとセレクトボックスがグレーアウトしてくれません。 フォームが表示された時点ですぐにセレクトボックスをグレーアウトさせる方法はないでしょうか？ 対策をご存じの方がいらっしゃいましたらどうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- セレクト選択時にチェックボックスをオフにしたい
フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>
- 締切済み
- JavaScript
- セレクトボックスの内容を次のページで受け取る方法
<form action="./check.asp" method="POST"> <table> <tr> <td> <select name="year"> <option value="2006" >2006</option> <option value="2007" >2007</option> <option value="2008" >2008</option> </select> </td> </tr> <tr> <td align="center"><input type="submit" value="確認する"></td> </tr> </table> </form> として 次のページで YEAR =Trim(request("year")) Response.Write YEAR で受け取り表示しようとしていますが取れません。なぜですか？教えてください
- ベストアンサー
- Microsoft ASP
- セレクトボックスの操作
<select name="example1"> <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> </select> <input type="submit" name="1" value="追加"> 例えば、上記のセレクトボックスの3を選択して送信ボタンを押したら、3以外の4つの数字の値を持ったセレクトボックス（select name="example2）を出現させたいのです。（example1を残したまま） 選択した数字以外の値を持ったセレクトボックスを出現させたいです。 <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="追加"> 上記のようになります。example2の1を選択し送信したら <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 上記の手順でセレクトボックスが3つに増えた場合のソースは次のような感じに <select name="example1"> <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> </select> <input type="submit" name="1" value="取り消し"> <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="取り消し"> <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 取り消しを押した場合、そのセレクトボックスを削除し、一番新しいセレクトボックス（example3）に削除された値を追加したいです。 example2を取り消した場合、 <select name="example3"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 どのように記述すれば実現可能でしょうか？ ご教示頂けますと幸いです。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ if(option value="＋"){ document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- 他のFormの入力内容により、Selectの状態を変化させたい
Formの状態を他のFormの入力によって変化させたいのですが。 イメージ的には <Script language="Javasript"> function data1() { document.forms[1].elements[0].value=document.test.i.value; } function data2() { document.forms[2].elements[0].options[document.test.i.value].selected=ture; } </script> 入力<br> <form name="test"> <input type="text" name="i" onKeyDown="javascript:if(event.keyCode==9){ data1();data2(); }" > </form><br><br> テキスト<br> <form> <input type="text"> </form><br><br> セレクト<br> <form> <select> <option>0 <option>1 <option>2 <option>3 </select> </form><br><br> こんな感じです。 これで、タブキーを押せば、「入力」Formに入力された内容が、関数data1()によって「テキスト」Formにも表示されます。 これと同じように、「入力」Formに入力された内容で、「セレクト」Formを変化させたいと思いますが、data2()エラーになり上手く動作しません。 「入力」Formに1を入力すれば、「セレクト」Formの1が選択された状態になる… と言った事をしたいのですが、どうすればいいでしょうか？
- ベストアンサー
- JavaScript
- セレクトボックスで指定した任意のCGIにPOSTしたい
フォームでリクエストを送信する際、セレクトボックスで指定した任意のCGIにPOSTしたいのです JavaScriptで実現したいのですが...教えてくださいm(__)m 下記はフォームの中身です。 <form action="" method="post"> <input type="text" name="key_word"> <select name="S1"> <option selected value="error">CATEGORY <option value="search_1.cgi">SELECT_1 <option value="search_2.cgi">SELECT_2</option> </select> <input type="hidden" value="kw_search" name="mode"> <input type="submit" value="検索"></td> </form>
- ベストアンサー
- JavaScript
- セレクトボックスの連動
セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0～複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜
- ベストアンサー
- JavaScript
- セレクトボックスのボタンにリンクを張りたい
下記のHTML文においてセレクトボックスの表示ボタンを押したら、リンク先にジャンプをしたいのですがその方法を教えていただけませんか． <FORM ACTION='' METHOD='POST'> <SELECT name="code"> <OPTION value='1'>A</OPTION> <OPTION value='2'>B</OPTION> </SELECT> <INPUT TYPE=SUBMIT VALUE='表示'>
- ベストアンサー
- PHP
お礼
早々のご回答をどうもありがとうございます。 あれっ？ disabledを使っても解決するとは思いませんでした。 「disabledだとグレーアウトするだけ」と最初から度外視していた上、これは質問文に書かなかったことではありますがセレクトボックスの数を複数にした場合の対応方法もわからなかったので。 styleって、こういう使い方があるんですね。 これだと、styleの名前を複数使うことで複数のセレクトボックスにも対応できました。 とても助かりました。どうもありがとうございました！！