ラジオボタンをチェックした時のテキスト許可

このQ&Aのポイント
  • 入力フォームの中にある項目にラジオボタンがありますが、2番目のラジオボタンを選択すると、下にあるテキストボックスの入力が有効になります。しかし、ラジオボタンのnameに問題があり、機能が正常に動作しません。javascriptの効果的な方法はあるでしょうか?
  • javascript初心者ですが、入力フォームの中にある項目に2つのラジオボタンがあります。2番目のラジオボタンを選択すると、下にあるテキストボックスの入力を有効にしたいのですが、ラジオボタンのnameに問題があり、うまく機能しません。javascriptの適切な方法を教えてください。
  • ラジオボタンをチェックした時にテキストの入力を許可するための方法について助言してください。問題があるのは、2番目のラジオボタンのnameにあり、そのためにラジオボタンが正常に機能しません。初心者にも理解しやすい方法を教えてください。
回答を見る
  • ベストアンサー

ラジオボタンをチェックした時のテキスト許可

1年に数回ぐらいしかjavascriptを作成しない初心者です。 よろしくお願いします。 入力フォームの中に1つの項目に2つのラジオボタンがあり、2番目を選択した際に 下にあるテキストボックスの入力を有効にしたいのですが、ラジオボタンのnameに( )がついており、 機能が上手く効きません。 送信時には、フリーでダウンロードしたcgiが機能して入力チェックを行なうため、その名前を変更することができないのですが、javascriptの上手く効く方法はありませんでしょうか? <script language="javascript" type="text/javascript"> <!-- function txtinp() { fObj = document.mailform; fObj.その他_会社名.disabled = (fObj.会社名(必須)[1].checked) ? false : true ; } //--> </script> <form id="mailform" method="post" action="mailform/send.cgi" onsubmit="return sendmail(this);">   <input type="radio" name="会社名(必須)" value="○○株式会社" onclick="txtinp();" /> ○○株式会社   <input type="radio" name="会社名(必須)" value="その他" onclick="txtinp();" /> その他<br /> <p>*その他を選択の場合は、下記に会社名を入力してください</p> <input type="text" name="その他_会社名" size="50" maxlength="50" class="mf" style="ime-mode:active;" onclick="txtinp();" disabled /> というようなソースとなっています。 根本的に記述方法などを理解していないので、分り易く教えていただけると助かります。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

name属性はさわらずに onclick=txtinp();をonclick=txtinp(this.form);にして、 テキストボックスのonclick=txtinp();は意味不明なので削除して scriptは↓のように <form id="mailform" method="post" action="mailform/send.cgi" onsubmit="return sendmail(this);">   <input type="radio" name="会社名(必須)" value="○○株式会社" onclick="txtinp(this.form);" /> ○○株式会社   <input type="radio" name="会社名(必須)" value="その他" onclick="txtinp(this.form);" /> その他<br /> <p>*その他を選択の場合は、下記に会社名を入力してください</p> <input type="text" name="その他_会社名" size="50" maxlength="50" class="mf" style="ime-mode:active;" disabled /> <script type="text/javascript"> function txtinp(frm) { fObj = document.mailform; frm.elements["その他_会社名"].disabled = (frm.elements["会社名(必須)"][1].checked) ? false : true ; } </script>

rie-mama
質問者

お礼

yyr446さんへ バッチリです!! 本当に助かりました。ありがとうございます。 このようなタイプは、この例だけでないので、他にも活用させていただきます。 本当にありがとうございました!!

関連するQ&A

  • 複数のラジオボタン項目でのテキスト入力欄の有効化

    調べながら手探りでソースを書いてみましたが、うまく動きません。 javascript初心者ですので、ものすごく初歩的な勘違いがあったり、または根本から全く間違っているかもしれません。 以下のソースのように、ラジオボタンで選択してもらう項目が3つある場合、それぞれ「なし」を選択した場合だけテキスト入力欄を非表示にしたいのですがうまく動きません。 ラジオボタンで選択する項目が1つずつだとうまくいくのですが、3つの場合どこを修正したらいいのでしょうか? よろしくお願いします。 【HTML】 <script type="text/javascript" src="sample.js" charset="UTF-8"></script> <ul> <li><input type="radio" name="AAA" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="AAA" id="by_week" value="1週間ごと" onClick="changeDisplay()"/>1週間ごと</li> <li><input type="radio" name="AAA" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="AAA" id="by_year" value="1年ごと" onClick="changeDisplay()"/>1年ごと</li> </ul> <p id="AAA-text" style="display:none;"> <input type="text" name="XXX" size="15" > </p> <ul> <li><input type="radio" name="BBB" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="BBB" id="by_week" value="1週間ごと" onClick="changeDisplay()"/>1週間ごと</li> <li><input type="radio" name="BBB" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="BBB" id="by_year" value="1年ごと" onClick="changeDisplay()"/>1年ごと</li> </ul> <p id="BBB-text" style="display:none;"> <input type="text" name="YYY" size="15" > </p> <ul> <li><input type="radio" name="CCC" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="CCC" id="by_week" value="1週間ごと" onClick="changeDisplay()"/>1週間ごと</li> <li><input type="radio" name="CCC" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="CCC" id="by_year" value="1年ごと" onClick="changeDisplay()"/>1年ごと</li> </ul> <p id="CCC-text" style="display:none;"> <input type="text" name="ZZZ" size="15" > </p> 【sample.js】 function changeDisplay() { if ( document.mailform["AAA"][0].checked ) { document . mailform["XXX"] . disabled = true; document . getElementById('AAA-text') . style . display = "none"; } else { document . mailform["XXX"] . disabled = false; document . getElementById('AAA-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["BBB"][0].checked ) { document . mailform["YYY"] . disabled = true; document . getElementById('BBB-text') . style . display = "none"; } else { document . mailform["YYY"] . disabled = false; document . getElementById('BBB-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["CCC"][0].checked ) { document . mailform["ZZZ"] . disabled = true; document . getElementById('CCC-text') . style . display = "none"; } else { document . mailform["ZZZ"] . disabled = false; document . getElementById('CCC-text') . style . display = "inline"; } } window.onload = changeDisplay;

  • このラジオボタンをチェックした場合、以下の任意のラジオボタンの入力を禁止(disabale)にしたい。

    つまずいております。 ラジオボタンのタグにonClick=""でスクリプトを記述するとチェックそのものができなくなってしまいます。 ラジオボタンをチェックしたときに瞬時に以下のラジオボタンを選択不可能にする場合はどのようにしたらいいのでしょうか? <!--head内のスクリプト部分--> <script type="text/javascript" language="JavaScript"> <!-- function f0bj(){ document.form1.namae2.disabled; } // --> </script> <body> <input name="namae1" type="radio" onClick="fobj()" value="任意の名前1">任意の名前1 <input name="namae2" type="radio" value="任意の名前2">任意の名前2 </body>

  • 特定のラジオボタンが選択されたらテキストフィールドを入力可

    下のような6つのラジオボタンと1つのテキストフィールドのあるフォームがあります。 「あ・い・う・え・お」のラジオボタンが選択されたらテキストフィールドをdisabledに、「か」なら入力可能にしたくて、JavaScriptで次のように記述しました。 一応動作しているように見えるのですが、見よう見まねで書いた初めてJavaScriptなので大丈夫なのか不安です。これで良いのでしょうか。 function txtClose () { if (document.f_frm.motive[5].checked) { document.f_frm.motive_add.disabled = false; } else { document.f_frm.motive_add.disabled = true; } } <form name="f_frm"> <input type="radio" name="motive" value="あ" onclick="txtClose();" />あ<br /> <input type="radio" name="motive" value="い" onclick="txtClose();" />い<br /> <input type="radio" name="motive" value="う" onclick="txtClose();" />う<br /> <input type="radio" name="motive" value="え" onclick="txtClose();" />え<br /> <input type="radio" name="motive" value="お" onclick="txtClose();" />お<br /> <input type="radio" name="motive" value="か" onclick="txtClose();" />か<br /> <input type="text" name="motive_add" size="20" maxlength="40" onclick="txtClose();" /> </form>

  • セレクトボックスを無効に出来なくて困っています

    このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <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>選択肢1</option> <option>選択肢2</option> <option>選択肢3</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をすっきりした形で書くのは、どうしたらいいでしょうか? 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <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"> ---------------------------------------

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信(submit)」ボタンを enable で表示させたいです。 1:● 2:○ 1:● 2:○ それ以外の選択肢では「送信(submit)」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

  • ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには

    どなたかお力を・・・ 宜しくお願いします。 メールフォームを作成していて、 テキストボックス入力欄 ○ラジオボタン01 ○ラジオボタン02 から、1箇所選択してもらうようにしてあります。 テキストボックスに始めから、例を記入してあるのですが、 ラジオボタンにチェックを入れた際に消えるようにしたいのです。 フォームのコメントを消すjavascriptは変更してもらっても構いません。 <INPUT type="text" name="あいうえお" onfocus="if (this.value == '例)Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例)テスト';" value="例)テスト"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02

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

    ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンは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>

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

    お世話になります。 やりたい事 (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>

  • ラジオボタンを選択したらテキストに数字入力

    ラジオボタンを選択して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>

専門家に質問してみよう