- 締切済み
選択したラジオボタンに対応した言葉を表示させたい
こんにちは 早速なんですが、職場のアンケートのサイトを作っています。 ラジオボタンをA,B,Cと作ってその下にフォームを作りました。 選んだラジオボタンによってフォームの案内文が変わるようにしたいのですが、 なかなか上手くいきません。 現在は下の状態です。 <html> <head> <script type="text/javascript"> var GuideSentence = 'テスト'; function ShowFormGuide(obj) { if( obj.value == '' ) { obj.value = GuideSentence; obj.style.color = '#808080'; } } function HideFormGuide(obj) { if( obj.value == GuideSentence ) { obj.value=''; obj.style.color = '#000000'; } } </script> <input type="radio" value="A" name="q1">A <input type="radio" value="B" name="q1">B <input type="radio" value="C" name="q1">C <input type="text" value="テスト" style="color: #808080;" onFocus="HideFormGuide(this);" onBlur="ShowFormGuide(this);"> </p> <input type="submit" name="button1" value="送信" /></p> </body> </html> ここで"テスト"の文字の部分をAをクリックしたら"a"、Bをクリックしたら"b"、Cをクリックしたら"c"といった形にする方法を教えて頂きたいです。 よろしくお願いいたします。
- ravijourlove
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Ogre7077
- ベストアンサー率65% (170/258)
> 別の既存のtextやtextareaに反映する方法が解りません。 出力対象の input 要素に id 属性を付けると、 <input type=text id=hogehoge> スクリプトは id を利用して input 要素を取得できます var obj = document.getElementById('hogehoge'); obj.value = GuideSentence; 注意点として、id 属性はページ内で重複する値を指定できません。
- yambejp
- ベストアンサー率51% (3827/7415)
＞Aをクリックしたら"a" なら該当するラジオボタンのonclickを指定してあげればよいのでは？
関連するQ&A
- ラジオボタンの選択で解答・点数を表示する
10問のテストを作成しています。 (1)選択肢はラジオボタンで3択（正解は10点、その他0点） (2)採点をクリックすると、テキストボックスに○×の結果を出し、もう一つ別のテキストボックスに×の場合は正しし解答を表示 (3)アラートで「あなたの点数は～～点」と出す (4)FORM1.2のSCOREに点数を表示 以上のようにしたいと思い、下記のように作りました。 まだ初心者のため、長々と同じことを書くことしか分からないので、もっと簡単にまとめられる方法がありましたら、教えてください。 よろしくお願いいたします。 function dispscore() { var score=0; if (document.form1.q0[0].checked) { score += 10; document.form1.r0.value = "○"; } else{ document.form1.r0.value = "×"; document.form1.a0.value = "ナイル川"; } if (document.form1.q1[2].checked) { score += 10; document.form1.r1.value = "○"; } else{ document.form1.r1.value = "×"; document.form1.a1.value = "バチカン市国"; } alert("点数は " + score + " 点 です "); document.form1.score.value=score document.form2.score.value=score } ------------------------------------------------------------ <INPUT type=radio name="q1" value="10">ナイル川 <INPUT type=radio name="q1" value="0">ミシシッピー川 <INPUT type=radio name="q1 value="0">アマゾン川> <INPUT size="3" name="r1" type="text"> <INPUT size="25" name="a1" type="text"> <INPUT type=radio name="q2" value="0">バルカン市国 <INPUT type=radio name="q2" value="0">バルタン市国 <INPUT type=radio name="q2" value="10">バチカン市国 <INPUT size="3" name="r2" type="text"> <INPUT size="25" name="a2" type="text">
- ベストアンサー
- JavaScript
- ラジオボタンを選択したらテキストに数字入力
ラジオボタンを選択してvalueが1だったら、テキスト欄（Q1_TEXT）に0を入力し、それ以外だったら何もしない、というJavascriptを書きたいです。ラジオボタンによって、テキスト欄の有効化、無効化に関する書き方は見つけられたのですが、このような挙動について見つけることができませんでした。 ご存じの方がおられましたらご教示いただけますと助かります。 よろしくお願いいたします。 <body> <form> <INPUT type="radio" name="Q1" value="1"> <INPUT type="radio" name="Q1" value="2"> <INPUT type="radio" name="Q1" value="3"> <INPUT type="text" name="Q1_TEXT" value="_Q1_TEXT_CHK_" SIZE="7"> </form> </body>
- ベストアンサー
- JavaScript
- ラジオボタンについて
ラジオボタンのnameにそれぞれ違う名前をつけても 選択の制限を1つだけにできるやり方はありませんか？ 例 <input type="hidden" name="a1" value="0151" /> <input name="a" type="radio" value="1" /> <input type="hidden" name="b1" value="0152" /> <input name="b" type="radio" value="1" /> <input type="hidden" name="c1" value="0153" /> <input name="c" type="radio" value="1" /> 私がやりたいことはあるプログラムシステムで使用するため ラジオボタンの上にhiddenでそれぞれ指定してるため このような形で表示できないかと、おもっています。
- ベストアンサー
- HTML
- CGIでラジオボタンの選択結果を保持する
http://okwave.jp/qa/q8211303.html 上記質問の続きです。 Q1,Q2,Q3・・・と質問をいくつか用意し、 それぞれで選択したラジオボタンによって、最終ページに表示させる回答を変えたいです。 ひとつ前のページで選択したものを次ページに反映させることはなんとかできたのですが 何ページも前に選択した回答を、最終ページに反映させる方法がわかりません。 <input type="hidden"を使うところまでは教えていただいたのですが 具体的にどうしていいかわかりません。 参考サイト等ありましたら教えていただけますでしょうか。 よろしくお願いいたします！ ちなみに作成方法は以下のような感じです。 【Q1】 <form name="q1" action="com.cgi" method="POST"> <input type="hidden" name="stage" value="q1" /> <ol> <li><input type="radio" name="q11" value="q11_a"> 犬がすき</li> <li><input type="radio" name="q11" value="q11_b"> 猫がすき</li> <li><input type="radio" name="q11" value="q11_c"> うさぎがすき</li> </ol> <ol> <li><input type="radio" name="q12" value="q12_a"> 右利き</li> <li><input type="radio" name="q12" value="q12_b"> 左利き</li> </ol> <input type="submit" value="次へ" /> 【Q2】 <form name="q2" action="com.cgi" method="POST"> <input type="hidden" name="stage" value="q2" /> <ol> <li><input type="radio" name="q21" value="q21_a"> 海がすき</li> <li><input type="radio" name="q21" value="q21_b"> 山がすき</li> <li><input type="radio" name="q21" value="q21_c"> 散歩がすき</li> </ol> <input type="submit" value="次へ" /> 【Q3】 <form name="q3" action="com.cgi" method="POST"> <input type="hidden" name="stage" value="q3" /> <ol> <li><input type="radio" name="q31" value="q31_a"> 男性</li> <li><input type="radio" name="q31" value="q31_b"> 女性</li> </ol> <ol> <li><input type="radio" name="q32" value="q32_a"> 既婚</li> <li><input type="radio" name="q32" value="q32_b"> 未婚</li> </ol> <input type="submit" value="判定" /> 【最終ページ】 「あなたは犬がすきで右利きですね」 「あなたは海がすきですね」 「あなたは女性で既婚ですね」 と表示させたいです。 実際には、Q1→Q2→Q3と順番にページが飛ぶのではなく、 この答えだったら次はこのページ、それ以外は別のページ、 といった感じで、様々なページに飛びます。 以下のような感じで条件分岐を書いています。 if ($stage eq "q1") { if ($q11 eq "q11_a") { Q2(); } elsif ($q11 eq "q11_c") { ・・・; } elsif ($q12 eq "q12_b") { Q3(); } else { ・・・; } } よろしくお願いいたします！
- ベストアンサー
- CGI
- ラジオボタンでの表示の切替方法
2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A <input type="radio" name="B" value="2">B </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">－ <input type="text" size="6" maxlength="5" name="text2" value="">－ <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 複数のラジオボタンのチェック
複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか？ 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0～4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------
- ベストアンサー
- JavaScript
- 色をラジオボタンで選択
エレメントでボタンを押すと色を変えるJavaScriptです。 検索をしながら ボタンで一度変えることはできるようになりましたが <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <button onclick="effect()">チェンジ</button> <span id="sample">■□□■</span> ラジオボタンで選択するようにしたいのですが どのようにすればよいでしょうか？ うまくいく方法を教えてください。 ブラウザーはGoogle Chrome最新版です。 どうしてもできなければ Firefoxでもかまいません。 <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <input type=radio name="colorcode" value="#000000" checked>黒 <input type=radio name="colorcode" value="#ff0000">赤 <input type=radio name="colorcode" value="#00ff00">緑 <span id="sample">■□□■</span>
- ベストアンサー
- JavaScript
- ラジオボタンによる有効なボタンの切り替えについて
はじめまして。 下記のような機能を実装したいと思っています。 どなたか教えていただけませんでしょうか？ <html> <head> <title>サンプル</title> </head> <input type="radio" name="radio1" value="a">A <input type="radio" name="radio1" value="b">B <input type="radio" name="radio1" value="c">C <input type="radio" name="radio1" value="x">全部ダメ <br><br> <input type="button" value="Aボタン"> <input type="button" value="Bボタン"> <input type="button" value="Cボタン"> </body> </html> ラジオの「A」を選択すると「Aボタン」のみ有効で他は無効（disabled）になり 「B」を選択すると「Bボタン」のみ有効というように、 選択したラジオボタンの値と有効なボタンを連動させたいのです。 さらに、ラジオの「全部ダメ」を選択すると全てのボタンを無効としたいです。 ラジオボタンの値の取得のjavascriptなど個々の機能について調べてみたりしたのですが どのように組み合わせれば、機能を実現できるのかわかりませんでした。 お手数ですが、ご教示いただけますでしょうか。。 可能ならばソースのサンプルをいただけるとありがたいのですが。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- (jQuery)ラジオボタン選択値を配列で送信
ちょっと前に別の方の同名の質問があり、正しい回答が出る前に、例によって不適切な回答で閉め切られてしまったため、失礼とは存じますが改めて質問させていただきます。 <form id="enqe" action="/hoge/enqe" method="post"> <label for="group_a">好きなフレームワーク</label> <input type="radio" name="group_a" value="a1">cake php</input> <input type="radio" name="group_a" value="a2">fuel php</input> <input type="radio" name="group_a" value="a3">symphony</input> <label for="group_b">使っているOS</label> <input type="radio" name="group_b" value="b1">windows</input> <input type="radio" name="group_b" value="b2">macintosh</input> <input type="radio" name="group_b" value="b3">linux</input> <label for="group_c">使っているCPU</label> <input type="radio" name="group_c" value="c1">ivy bridge</input> <input type="radio" name="group_c" value="c2">sandy bridge</input> </form> のような選択肢があって、選択値を配列で送信したいです。 配列で受けたい理由は、送信側のフォーム（項目、グループ分け）が逐次追加変更される予定で、それに合わせてDBだけを変更して対応したいからです。 したがって、「毎度サーバサイドで対応しろ」という回答は困ります。 <input type="hidden" name="gval[]" value="a1" /> <input type="hidden" name="gval[]" value="b2" /> <input type="hidden" name="gval[]" value="c3" /> という内容を生成して送信すればいいのはわかりますが、どう記述したらいいかがわかりません。 いちおうjQueryで、 $('form#enqe').submit(function(){ // $(this).find("input[type='radio']"); で、<input type="radio">を取得 }); まではわかりましたが、jQueryに疎く、その先がわかりません。 識者の方々のお力をお借りできれば幸いです。
- ベストアンサー
- JavaScript
- ラジオボタンの内容を受けてCGIでコメント表示
あるhtmlページにラジオボタンを設置しています。 このボタンを選択したらこのページ、このボタンの場合はこのページ、 と、CGIを使って、選択したボタンによってさまざまなページにジャンプさせています。 最後に、判定結果を掲載するページとして、 インラインフレームを設置し、そのなかにcgiを読み込ませて 選択したラジオボタンによってそのなかに表示させるコメントを変えたいです。 Q1でaを選んだ場合はこのコメント、 Q2でbを選んだ場合はこのコメント、 と、拾ってくる質問が記載されているhtmlページが複数にわたります。 以下でいう、test2.cgiは、どのように記述したらいいでしょうか？ サンプルコードなど掲載されているサイトがあったら教えてください。 ＜ラジオボタンが設置してあるhtmlページ＞ <form name="q1" action="test1.cgi" method="POST"> 質問 <input type="radio" name="q1" value="q1_a">回答a <input type="radio" name="q1" value="q1_b">回答b <input type="radio" name="q1" value="q1_c">回答c <input type="submit" value="判定" /> ＜コメントを表示させるhtmlページ＞ 判定結果をお知らせします <div id="frame"> <iframe src="test2.cgi" title="判定結果"> </iframe>
- ベストアンサー
- CGI
補足
onclickをradioに組み込んだ後、scriptで別の既存のtextやtextareaに反映する方法が解りません。 popup等なのであれば解るのですが。