- 締切済み
ラジオボタンの表示非表示のjavascriptにつ
申し訳ありません。 お詳しい方に教えていただきたいのです。 以前、こちらでご質問して回答いただいたのですが、 問題がありまして、ラジオボタンのyes,noでyesを選択したら、フォームページが現れるという仕組みを教わったのですが、 フォームの方はjavascriptを仕組み、例えば記入していない欄をそのままにして送信ボタンを押すと、赤い文字でエラー表示するフォームを作っているのです。エラーの状態で送信ボタンを押すと、最初のラジオボタンのyes,noに戻ってしまい、フォームがたたんだ状態になるそうなのです。 それで、いきなりフォームがたたまれて最初の状態に戻るのではなく、フォームにエラーが表示されるようにしたいのです。 yes.noをせんたくするjavascriptに問題があるのではないかと思っているのですが。。 もしおわかりになるかたがいらっしゃいましたらおしえていただけませんでしょうか。 よろしくお願い致します。 以下は教えていただいたjavascriptです。 フォームは簡単なものになっているので、javascriptは入っておりません。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7294891/ ==== ソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】ラジオボタンによる表示、非表示について</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript"> var dispArea; var dispAreaMsg; window.onload = function() { dispArea = document.getElementById('disparea'); dispAreaMsg = document.getElementById('dispareamsg'); } function change ( value ) { if ( value == 'yes' ) { dispArea.style.display = 'block'; dispAreaMsg.style.display = 'none'; } else if ( value == 'no' ) { dispArea.style.display = 'none'; dispAreaMsg.style.display = 'block'; } } </script> <style type="text/css"> #disparea { display:none; } #dispareamsg { display:none; } </style> </head> <body> <h1>ラジオボタンによる表示、非表示について</h1> <form name="test"> <input type="radio" name="conf" value="yes" onclick="change(this.value);"/>はい <input type="radio" name="conf" value="no" onclick="change(this.value);" />いいえ <p id="disparea"> <input type="button" value="応募" /> </p> <p id="dispareamsg"> 応募できません。 </p> </form> </body> </html>
- k-nisshy
- お礼率66% (2/3)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ご提示のものでは、ご質問の現象を確認できません。 単にスクリプトで表示/非表示を行っているだけのソースですね。 ＞例えば記入していない欄をそのままにして送信ボタンを押すと、 ＞赤い文字でエラー表示するフォームを作っているのです そのチェックは、スクリプトでおこなっているのではないのでしょうか？ エラーがあったら送信ができないようにしていますか？ ＞の状態で送信ボタンを押すと、最初のラジオボタンのyes,noに ＞戻ってしまい、フォームがたたんだ状態になるそうなのです 察するに、それは単に送信されてしまってリロードされているってことではないでしょうか？ submit時の処理や送信先からのレスポンスはどのようになっているのでしょうか？ そもそもエラーチェックはsubmit時に実行されるようになっているのではないのですか？ それなら、送信ボタン（submitボタン）を何回押しても、エラーチェックがされるだけのはずですが…？
関連するQ&A
- JavaScriptを使ってボタンを消したい
<input type="button" value="ボタン" name="aaa" onClick="this.style.display='none'"> で、消すことができますが、 これをJavaScriptを使って、 別のところからボタンを消すためにはどうやったらいいのでしょうか？ ＃例えばどこかをクリックしたときにボタンを表示したり消したりするなど。
- ベストアンサー
- JavaScript
- jqueryの表示非表示に関する質問
jqueryの初心者です。 調べてもわからなかったので質問します。 display:noneで要素を非表示にし、クリックしたときに要素をcssで表示するようにしたのですが別のボタンを押したときにまた非表示にすると2回押さないと表示してくれなくなります。 具体的には下記のような感じのサンプルを作ってみました。 表示・非表示ボタンをクリックしたら交互に表示・非表示が切り替わるのですがクリアボタンを押した後に表示・非表示ボタンを押すとなぜか2回クリックしないと表示しません。 どなたかご教授いただけませんか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq表示/非表示test</title> </head> <style type="text/css"> .text_h{ display:none; } .text_v{ display:inline; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#a01").toggle(function(){ $(this).parent().next().children("span").attr("class","text_v"); },function(){ $(this).parent().next().children("span").attr("class","text_h"); }); $("#clear").click(function(){ $(this).parent().next().children("span").attr("class","text_h"); }); }); </script> <body><p> <input type="button" value="表示・非表示" id="a01" /> <input type="button" value="クリア" id="clear" /> </p> <p><span class="text_h">ボタンを表示します</span></p> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptのラジオボタン選択で値取得
JavaScriptでフォームのラジオボタン選択で選択した項目に応じて、複数の変数に特定の数値を入れたいのですが、どうしたらいいでしょうか? ラジオボタンで仮に、 ・東京 ・大阪 ・名古屋 という選択があったとして、 (そのボタンの下部に<input type="button" value="Go!" onclick="hogehoge();">というような実行ボタンがあったとします) 東京を選んだ場合は、 a = 4; b = 3; 大阪を選んだ場合は、 a = 3; b = 2; 名古屋を選んだ場合は、 a = 5; b = 4; と、a/bに数値を入れたいです。 今現在下記のように書いたのですが、動作しません。 <script type="text/javascript"> function hogehoge() { no = document.hoge.a.value - 0; if(no == 1) { n1 = 4; n2 = 3; }else if(no == 2) { n1 = 3; n2 = 2; }else if(no == 3) { n1 = 5; n2 = 4; } document.hoge.no1.value = n1; document.hoge.no2.value = n2; } </script> <form name="hoge"> <input type="radio" name="a" value="1" checked>東京 <input type="radio" name="a" value="2">大阪 <input type="radio" name="a" value="3">名古屋 <br> <input type="button" value="Go!" onclick="hogehoge();"><br> <input type="text" size="5" name="no1"><br> <input type="text" size="5" name="no2"> </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 2段階ラジオボタン後、DIVを表示したい
色々と自力で試行錯誤しましたが、知識が足りません。 javaScriptのif構文とかswich構文の部分が問題かなぁ～と推測しますが、自力で構文を認識・改造が出来ませんので、ご指導をお願い致します。 1段目（ラジオ）＜バス＞＜電車＞ 2段目（ラジオ）＜バス/高級＞＜バス/普通＞ 2段目（ラジオ）＜電車/高級＞＜電車/普通＞ 3段目（DIV）＜高級バス＞＜バス＞＜高級電車＞＜電車＞ 2段目の動作がオカシイです。 連動している一方のみを表示したいです。（連動してないその他は、見えなくしたいです） 以下、ソースです。 <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <style type="text/css"> .second , .third{ display: none; } </style> <script type="text/javascript"><!-- function AllHide() { document.getElementById('bus_high').style.display = 'none'; document.getElementById('bus_normal').style.display = 'none'; document.getElementById('train_high').style.display = 'none'; document.getElementById('train_normal').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); if( idname != "" ) { document.getElementById(idname).style.display = 'block'; } } // --></script> </head> <body> <form action=""> <label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(value);">バス</label> <label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(value);">電車</label> </form> <form action=""> <div class="second" id="bus"> <label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu(value);">バス/高級</label> <label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu(value);">バス/普通</label> </div> <div class="second" id="train"> <label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu(value);">電車/高級</label> <label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu(value);">電車/普通</label> </div> </form> <div class="third" id="bus_high">高級バス</div> <div class="third" id="bus_normal">バス</div> <div class="third" id="train_high">高級電車</div> <div class="third" id="train_normal">電車</div> </body> </html>
- ベストアンサー
- JavaScript
- Javascriptによるフォームの選択表示について教えてください。
Javascriptによるフォームの選択表示について教えてください。 概要としてはカートCGIのお客様情報入力欄のカスタマイズを行なっています。 別の場所への発送を希望される場合において(1)、(2)、(3)のラジオボタンを作り、それぞれ選択によって該当のフォームを表示するところまではできました。 問題は、(1)→１箇所、(2)→３箇所、(3)→５箇所とフォームを作ったところ、入力ページが表示された時点で(1)(2)(3)全ての表示がされた状態で表示されます。 ちなみに、その際にラジオボタンを選択すると(1)(2)(3)それぞれに対応したフォームが表示され切り替わります。 実際にやりたいことは、ページが表示された時点で(1)のフォームのみ表示されるようにし、(2)(3)とラジオボタンを選択された際にそこで初めて(2)(3)のそれぞれのフォームを表示したいと思っています。 以下はソースです。 ■Javascript <script type="text/javascript"> function func1() { document.getElementById("sele1").style.display="inline"; document.getElementById("sele1").disabled=false; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func2() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="inline"; document.getElementById("sele2").disabled=false; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func3() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="inline"; document.getElementById("sele3").disabled=false; } </script> ■CGI(HTML)側 <form action="xxx"> <table border=0 cellpadding=5 cellspacing=2 width=500> <p>発送先が２箇所以上の場合はこちらから選択ください。 <input type="radio" value="1" onclick="func1('block')" />１箇所</label> <input type="radio" value="2" onclick="func2('none')" />２箇所</label> <input type="radio" value="3" onclick="func3('none')" />５箇所</label> </p> </table> <table id="sele1"> </table> <table id="sele2"> </table> <table id="sele3"> </table> </form> table内容は省略しています。 説明が下手ですがどうかご教授ください。宜しくお願いします。
- ベストアンサー
- JavaScript
- javascript ボタンによる表示について
javascriptのボタンによる表示について質問があります． 質問内容と致しましては，ボタンを表示した時に隠れている問題文を出現させるソースを作っているのですが，うまくプログラムが動作しません． おそらく，window.onloadの使い方が理解しきれてないからだとは思いますが， よくわかりませんので質問させていただきました． 回答の方よろしくお願いします． 以下ソースです． <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function hideForm1(){ document.getElementById("formblock1").style.display = "none"; } function showForm1() { document.getElementById("formblock1").style.display = "block"; } window.onload = function(){ hideForm1(); }; function hideForm2(){ document.getElementById("formblock2").style.display = "none"; } function showForm2() { document.getElementById("formblock2").style.display = "block"; } window.onload = function(){ hideForm2(); }; function hideForm3(){ document.getElementById("formblock3").style.display = "none"; } function showForm3() { document.getElementById("formblock3").style.display = "block"; } window.onload = function(){ hideForm3(); }; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value !=""); return r; } var r = true; r &= chk1(document.forms['nform'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14','kaitouran21','kaitouran22','kaitouran23','kaitouran24','kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.forms['nform'].submit(); }else{ alert('解答欄に空白があります'); } } </script> </head> <body> <form> <input type="button" value="問題1" onclick="showForm1(); this.disabled = true;"/> </form> <form> <input type="button" value="問題2" onclick="showForm2(); this.disabled = true;"/> </form> <form> <input type="button" value="問題3" onclick="showForm3(); this.disabled = true;"/> </form> <form name="nform" method="post" action="./kaitou1.php" enctype="multipart/form-data"> <div id="formblock1"> <p> 問題1</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran11" size="14"> (2)<input type="text" name="kaitouran12" size="14"> (3)<input type="text" name="kaitouran13" size="14"> (4)<input type="text" name="kaitouran14" size="14"> </p> </div> <div id="formblock2"> <p> 問題2</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran21" size="14"> (2)<input type="text" name="kaitouran22" size="14"> (3)<input type="text" name="kaitouran23" size="14"> (4)<input type="text" name="kaitouran24" size="14"> </p> </div> <div id="formblock3"> <p> 問題3</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran31" size="14"> (2)<input type="text" name="kaitouran32" size="14"> (3)<input type="text" name="kaitouran33" size="14"> (4)<input type="text" name="kaitouran34" size="14"> </p> </div> </form> <input type="button" value="送信" onclick="send()"> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンの選択に応じてインプットを表示する。
お世話になります。 現在、ラジオボタンの選択に応じてインプットのフィールドが表示されるようなHTMLフォームを作っているのですが、煮詰まってしまいました。どうしてもうまくいかないのですが、 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function checkradio( disp ) { document.getElementById('input').style.display = disp; } //--> </script> </head> <body> <form action="xxx"> <p> <input type="radio" name="domain" id="1" value="1" onclick="checkradio('none');" /> <label for="1">選択１</label><br /> <input type="radio" name="domain" id="2" value="2" onclick="checkradio('none');" /> <label for="2">選択２</label><br /> <input type="radio" name="domain" id="3" value="3" onclick="checkradio('block');" checked /> <label for="3">選択３</label><br /> </p> <p id="input"> 選択３の詳細を書いてください。：<input type="text" id="input" name="select3" value="" size="20" /> </p> </form> </body> </html> と、こんな感じで、３を選択した時しかインプットを表示できません。選択１や選択２を表示した時には、「選択１の詳細を書いてください。」または「選択２の詳細を書いてください。」と表示させたいのですが、どこをどんな風に直せばいいでしょうか？ それと同時に初期画面ではこのインプットを非表示にしてラジオボタンを選択した時に表示されるようにしたいと思っています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ラジオのチェックでフォーム表示、PHPへPOSTさせたい
見よう見まねで作成したのですが、わからないので教えてください。 ラジオボタンのOKをクリックするとアカウントとパスワードの入力フォーム、ログインボタンが表示され、aaa.phpに飛びたいです。 「OK」で表示、「NO」で非表示はなんとかできましたが、問題が２点あります。 １．test.htmlにアクセスしたときすでに「OK」にチェックがついていて、テキストエリアとログインボタンが表示されてしまいます。 「NO」のほうにcheckedをいれてみましたがダメでした。 ２．phpへとばず、test.htmlにとんでしまいます。 宜しくお願いいたします。 test.html - - - - - - - - - - - - - - - - - - - <script type="text/javascript"> <!-- function Sel(me){ if(me.value=="1"){ me.form.account.disabled=false; me.form.password.disabled=false; me.form.btn.disabled=false; document.getElementById('SelA').style.display=(document.all)? 'block':'table-row'; document.getElementById('SelB').style.display='none'; }else{ me.form.account.disabled=true; me.form.password.disabled=true; me.form.btn.disabled=true; document.getElementById('SelA').style.display='none'; document.getElementById('SelB').style.display='none'; } } //--> </script> <form name="Quick1"> <form name="send" method="POST" action="aaa.php"> <input type="radio" name="AB" value="1" checked onclick="Sel(this)">OK <input type="radio" name="AB" value="2" onclick="Seｌ(this)">NO</td></tr> <tr id="SelA"> <td></td><td> <input type="text" size="30" maxlength="5" name="account" ><br> <input type="password" size="24" maxlength="5" name="password" > <input type="submit" name="btn" value="ログイン"> </form> </td></tr> <tr id="SelB" style="display:none">・・・</form>
- ベストアンサー
- JavaScript
- jsでラジオボタンによって表示内容を変えたい
とても困っているのでお力をお貸しください。 HTML側に ==================================================== <table summary="条件問題"> <tr> <th>問題1</th> <td> <ul> <li><input type="radio" name="AAAAAA" value="あああ" id="a1" onclick="mondaiChange1();"/> <label for="a1"> あああ</label></li> <li><input type="radio" name="AAAAAA" value="いいい" id="a2" onclick="mondaiChange1();"/> <label for="a2"> いいい</label></li> <li><input type="radio" name="AAAAAA" value="ううう" id="a3" onclick="mondaiChange1();"/> <label for="a3"> ううう</label></li> <li><input type="radio" name="AAAAAA" value="えええ" id="a4" onclick="mondaiChange1();"/> <label for="a4"> えええ</label></li> <li><input type="radio" name="AAAAAA" value="おおお" id="a5" onclick="mondaiChange1();"/> <label for="a5"> おおお</label></li> </ul> </td> </tr> </table> <div class="TableA"> <table summary="問題その2" id="TableA"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> <div class="TableB"> <table summary="問題その2" id="TableB"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> ========================== と記載。 includeしているjsファイル側に ========================== function mondaiChange1(){ radio = document.getElementsByName('AAAAAA') if(radio["a1"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a2"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a3"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a4"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a5"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; } ========================== としているのですが、これだと最初にアクセスしたとき 問題その2のTableAとTableB両方のテーブルが表示されてしまいます。 （その後ラジオボタンを選択すると希望通りの動作になります。） //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; を入れたら大丈夫というのをネットで見たのですが、どう書き換えてもうまくいきません。 希望としては 最初にアクセスしたときは問題1の回答は何も選択されてない状態で、その下には何も表示されていない。 ↓ 問題1の選択肢を選択した時点で初めて「問題その2」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか？
- 締切済み
- JavaScript
- javascriptがIEだけ動作しません
javascript初心者です。 サイトに、ラジオボタンの選択に応じて、 値をテキストボックスに返す仕組みを作りたいと思っています。 Chrome,FireFox,Operaでは正しく動作していすが、 IEでは、テキストボックスのみ表示され、 ラジオボタンと選択肢が非表示になってしまいます。 お手数ですが、ご教示をお願いしたく、 よろしくお願いします。 <form> <script type="text/javascript"> NoDHTML=(!document.all && !document.getElementById) || (navigator.userAgent.indexOf('Opera/6.')>=0) || (navigator.userAgent.indexOf('Opera 6.')>=0); function changeMenu2(n) { if (NoDHTML) return; if (n==100) { if (document.all) { document.all['TNAME'].style.display='none'; document.all['TNAME2'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME').style.display='none'; document.getElementById('TNAME2').style.display='none'; } with(document.forms[0].TNAME) { options.length=1; options[0].text=''; options[0].value=''; } document.forms[0].TNAME2.value=''; } else { if (document.all) { document.all['TNAME2'].style.display='none'; document.all['TNAME'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME2').style.display='none'; document.getElementById('TNAME').style.display='none'; } if (n==0) { document.forms[0].course_name.value='りんご'; document.forms[0].course_price.value='600円'; } else if (n==1) { document.forms[0].course_name.value='メロン'; document.forms[0].course_price.value='1000円'; } else if (n==2) { document.forms[0].course_name.value='マンゴー'; document.forms[0].course_price.value='5000円'; } } document.forms[0].TNAME.options[0].selected=true; } if (!NoDHTML) { document.write( ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(0);" onkeypress="return(true)" />リンゴ</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(1)" onkeypress="return(true)" />メロン</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(2);" onkeypress="return(true)" />マンゴー</label>'+ '<input type="hidden" name="course_name">' ); } </script> <!-- ★★ここの部分はCSSで強制的に見えないようになっています --> <select name="TNAME" id="TNAME" style="display:none !important;"> <option value="" selected="selected" style="display:none !important;"></option> </select> <!-- /★★ここの部分はCSSで強制的に見えないようになっています --> <script type="text/javascript"> if (!NoDHTML) { document.write( '<input type="hidden" name="TNAME2" id="TNAME2" value="" size="20" />' ); } </script> <br /> <br /> <br /> <!-- ★★ここに"course_priceの値が表示されます --> <input type="text" name="course_price" readonly="readonly"> <!-- /★★ここに"course_priceの値が表示されます --> </form>
- ベストアンサー
- JavaScript
お礼
早急にお答えいただきありがとうございます。 私の知識不足で申し訳ありません。 再度、担当にきいてみたいと思います。 ありがとうございました。