フォームタグの中のラジオボタンの選択による制御

このQ&Aのポイント
  • フォームタグ内のラジオボタンの選択により、プレゼントの希望をしない場合はテキストボックスへの入力を制限する方法を教えてください。
  • フォームタグ内のラジオボタンの選択により、プレゼントの希望をしない場合はテキストボックスに文字が入力されないようにする方法を教えてください。
  • フォームタグの中のラジオボタンの選択により、プレゼントの希望をしない場合はテキストボックスへの入力を制限する方法を具体的に教えてください。
回答を見る
  • ベストアンサー

フォームタグの中のラジオボタンの選択による制御

まず、サンプルのHTMLソースを書きます。 <html> <head> <title>プレゼント </title> head> <body> <center> <form method="post" action="https://regist02.smp.ne.jp/regist/Reg2"> table cellspacing="2" cellpadding="5" border="1"> <tr> <td>プレゼント</td> <td> <input type="radio" name="f000016397" value="1"> 希望する<br> <input type="radio" name="f000016397" value="2"> 希望しない<br> </td> </tr> <tr> <td>カラー</td> <td> <input type="text" name="f000009756" value="" maxlength="6"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="送信"> </td> </tr> </table> </form> </center> </body> </html> この中で、「プレゼントを希望する」のラジオボタンをチェックした場合のみ、下のテキストボックスにカラーが入力できるようにしたいと思います。 「プレゼントの希望をしない」を選択しているのに、テキストボックスに文字が入力されたないように制御することはできるでしょうか?またはデータが送信されないで警告k画面が出る方法でもよいのですが。 宜しくお願いします。

  • cheb
  • お礼率74% (20/27)

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

<head></head>の間に以下のスクリプトを挿入する <script type="text/javascript"> <!-- function check(f){ if(f.value=="1"){ document.forms[0].elements["f000009756"].disabled=false; } else { document.forms[0].elements["f000009756"].disabled=true; document.forms[0].elements["f000009756"].value=""; } } // --> </script> ラジオボタンを以下の様に変更する <input type="radio" name="f000016397" value="1" onclick="check(this)"> <input type="radio" name="f000016397" value="2" onclick="check(this)"> でいけると思います。 ちなみに head> table …の部分は </head> <table …に変更

cheb
質問者

お礼

ありがとうございました。勉強になりました!

関連するQ&A

  • フォームタグの中のラジオボタンの選択による制御

    まず、サンプルのHTMLソースを書きます。 <html> <head> <title>プレゼント </title> head> <body> <center> <form method="post" action="https://regist02.smp.ne.jp/regist/Reg2"> table cellspacing="2" cellpadding="5" border="1"> <tr> <td>プレゼント</td> <td> <input type="radio" name="f000016397" value="1"> 希望する<br> <input type="radio" name="f000016397" value="2"> 希望しない<br> </td> </tr> <tr> <td>カラー</td> <td> <input type="text" name="f000009756" value="" maxlength="6"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="送信"> </td> </tr> </table> </form> </center> </body> </html> この中で、「プレゼントを希望する」のラジオボタンをチェックした場合のみ、下のテキストボックスにカラーが入力できるようにしたいと思います。 「プレゼントの希望をしない」を選択しているのに、テキストボックスに文字が入力されたないように制御することはできるでしょうか?またはデータが送信されないで警告k画面が出る方法でもよいのですが。 宜しくお願いします。

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効) 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>

  • ラジオボタン選択でtextfieldをアクティブにするには?

    ■下記サンプルソースのラジオボタン「はい」を選択するとtextfieldがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」でtextfieldはグレーで入力無効) 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form1" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、textfield(カテゴリー1~4)がアクティブになる</td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい  <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> カテゴリー1<input name="textfield" type="text" size="30" maxlength="30"> <br> カテゴリー2 <input name="textfield22" type="text" size="30" maxlength="30"> <br> カテゴリー3 <input name="textfield32" type="text" size="30" maxlength="30"> <br> カテゴリー4 <input name="textfield42" type="text" size="30" maxlength="30"> </td> </tr> </table> </form>

  • ラジオボタンで入力し、その結果をCGIで表示するプログラム

    htmlで <html> <head> </head> <body> <form method="get" action="question.cgi"> <table width="50" height="" border="1" bordercolor="black" bgcolor="white" cellSpacing="0" cellpadding="5"> <tr><th>/</th><th>yes</th><th>no</th></tr> <tr><th>1</th><td><input type="radio" name="char1"></td> <td><input type="radio" name="char1"></td></tr><br> <tr><th>2</th><td><input type="radio" name="char2"></td> <td><input type="radio" name="char2"></td></tr><br> <tr><th>3</th><td><input type="radio" name="char3"></td> <td><input type="radio" name="char3"></td></tr><br> <tr><th>4</th><td><input type="radio" name="char4"></td> <td><input type="radio" name="char4"></td></tr><br> </table> <input type="button" value="送信" ><input type="reset" value="リセット"><br> </form> </body> </html> と書き、C言語でCGIを書き、ラジオボタンを押して送信ボタンを押すと 1:yes,2:no,3:no,4:yesなどと文字列で出力したいのです。 getメソッドがいいのかpostメソッドいいのかも教えていただければうれしく思います。 (この質問ではgetメソッドを使っていますが、あまり気にしないでください)

    • ベストアンサー
    • CGI
  • ラジオボタンで選択した項目の合計金額を出したい

    簡単な見積フォームを作成中です。 ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。 根本的な考え方が間違っているのでしょうか? 皆様ご教授の程お願いします。 <HTML><HEAD> <!-- function calc(){ hontai=document.ordersheet.hontai.VALUE; document.ordersheet.output.value=hontai; } //--> </SCRIPT></HEAD> <BODY> <FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()"> <TABLE cellPadding=3 width=680> <TBODY><TR> <TD align=middle colSpan=5>お見積り内容 <TR><TD align=middle width=30> <TD align=middle width=200> <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 </TD> <TR><TD rowspan="2" align=middle width=30>本体 <TD rowspan="2" width=350></TD> <TD width=145>A商品<BR>273000円(税込)<BR> <TD width=145>B商品<BR>288750円(税込)<BR> <TD width=145>C商品<BR>109410円(税込)<BR> </TD> <TR> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="273000" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="288750" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="109410" onClick="calc()"></DIV></TD> </TR> <TR><TD align=center colspan="2">合計金額</TD> <TD colspan="3" ><INPUT TYPE="text"NAME="output" SIZE="12">円</TD></TR> </TBODY></TABLE></FORM> </BODY></HTML>

  • ラジオボタンが選択された項目のみ操作可能

    ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled?readonly? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />A小学校<br/> <input type="checkbox" name="aa[]" value="2" />B小学校<br/> <input type="checkbox" name="aa[]" value="3" />C小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />A中学校<br/> <input type="checkbox" name="bb[]" value="2" />B中学校<br/> <input type="checkbox" name="bb[]" value="3" />C中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

  • 【フォーム】PHPで確認画面をだした後にボタンを

    ほぼ初心者のものです 下記のようなフォームをつくりました <form action="regist.php" method="post"> <input type="radio" name="08241" value="A11"/> <input type="radio" name="08241" value="B11"/> <input type="radio" name="08241" value="C11"/> <input type="radio" name="08241" value="D11"/> <input type="radio" name="08241" value="E11"/> <input type="radio" name="08241" value="F11"/> <input type="submit" value="登録する" /> そしてこれらを確認するためにregist.phpを作成し <table width="250" border="1"> <tr> <td width="250">選択したもの</td> </tr> <tr> <td><?php echo $_POST["08241"] ?></td> </tr> <tr> <td>●●●</td> と記載し、選んだものを表示できるようにしました ここからが皆様にお力を借りたいところなのですが フォームから「A11」が選択されて確認画面に「A11」と表示されたとき ●●●のところに下記のような情報を含んだボタンを表示させたいんです <form name="a11" action="/products/detail.php" method="post" > <input type="hidden" name="mode" value="cart" /> <input type="hidden" name="product_id" value="137" /> <input type="hidden" name="product_class_id" value="634" /> <input type="hidden" name="quantity" value="1" /><br /> <input type="submit" value="決定する" onClick="alert('選択しました')" /> </form> このボタン情報はA11~F11まであって、product_idやproduct_class_idは それぞれ異なっています どこかに一覧を作成しておいて form nameで一致したものを表示させるといった やり方なのかなとは思うのですが、その方法がわかりません PHPを使えばいいのかJavascriptがよいのかもあわせ、記述方法などをご教授いただけませんでしょうか? どうかよろしくお願いいたします

    • 締切済み
    • PHP
  • ラジオボタンでの表示の切替方法

    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> すみませんが、よろしくお願い致します。

  • チェックボックスやラジオボタンでの計算

    チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております ソース途中からですが…↓ <tr> <Td Valign="middle" Width="80">部数選択</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br> <Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br> <Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br> <Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br> <Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以上 ※お見積もりいたします<Br> </td> </tr> <tr> <Td Valign="middle" Width="80">オプション選択<Br>(複数選択可)</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br> <Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br> <Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br> <Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br> <Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br> <Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br> <Input Type="checkbox" Name="op[]" value="QRコード">QRコード<Br> </td> </tr> といった感じです。 value はすでに、他のところで使用しています 単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか?

専門家に質問してみよう