JavaScriptでフォーム要素の状態を制御する方法

2023/08/15 18:33

このQ&Aのポイント

JavaScriptを使用してフォーム要素の状態を制御する方法について説明します。フォーム内のラジオボタンやチェックボックスの状態に応じて、他のフォーム要素を制御することができます。
具体的には、質問文の例では、ラジオボタン「q1」の値によって、ラジオボタン「q2」やプルダウン、テキスト入力の有効・無効を切り替える方法を紹介しています。
この方法を使用することで、ユーザーが特定の条件を満たさない場合に、余分な入力を制限することができます。JavaScriptを使用することで、フォームの操作性を向上させることができます。

ベストアンサー

javascriptでフォーム要素の状態を制御

2011/12/18 07:58

いつもお世話様です。 phpでフォームを構成しています。フォーム内のradioボタンの状態で、以降のラジオボタン、プルダウン、テキスト入力を制御したいです。＜制御内容（やりたいこと）＞ situmon.phpで、 q1のラジオボタンが1の場合は、q2は回答しなくていい。（2の場合だけ回答させる。） q3のチェックボックスが1でない場合は、プルダウンとテキストは入力しなくていい。（1の場合だけ回答させる。）＜現状のソース＞ちなみに、該当するjavascript部分は、いろいろなサイトをみて、いろいろ書き換えて試しましたが、どうもうまくいかず、断念した段階そのままの状態です。よって、ご回答はこれをベースにしなくても大丈夫です。よろしくお願いします。 ---situmon.php--- <script type="text/javascript">  </script> <body> <form name="form">  <input type="radio" name="q1" id="q1" value="1" onclick="check();"/>はい <input type="radio" name="q1" id="q1" value="2" onclick="check();"/>いいえ  <input type="radio" name="q2" id="q2" value="1" />なぜ１ <input type="radio" name="q2" id="q2" value="1" />なぜ２　（その他： <input type="text" name="q2t" id="q2t" value="<php echo h(@$q2t); ?>" />）  <input type="checkbox" name="q3c" value="1" />楽しかった <select name="q3s"> <option value="" />▼選んで <option value="1" />めちゃめちゃ <option value="2" />めっちゃ <option value="3" />めちゃ </select> その他なにかあったら書いて <textarea name="q3t" id="q3t"><?php echo h(@$q3t); ?></textarea> </body>

nccno21
お礼率70% (45/64)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2011/12/18 09:03 回答No.1

NGな箇所 (1)同じidを2箇所以上につかっている (2)formにnameをつけて管理しようとしているそれを踏まえるとこんな感じです <script> window.onload=function(){check();} function check() { var flg=document.getElementById("q1_1").checked; document.getElementById("q2_1").disabled=flg; document.getElementById("q2_2").disabled=flg; document.getElementById("q2t").disabled=flg; var flg=!document.getElementById("q3c").checked; document.getElementById("q3s").disabled=flg; document.getElementById("q3t").disabled=flg; } </script> <form> <legend>q1</legend> <fieldset> <input type="radio" name="q1" id="q1_1" value="1" onclick="check();" />はい <input type="radio" name="q1" id="q1_2" value="2" onclick="check();" />いいえ </fieldset> <legend>q2</legend> <fieldset> <input type="radio" name="q2" id="q2_1" value="1" />なぜ１ <input type="radio" name="q2" id="q2_2" value="1" />なぜ２　（その他： <input type="text" name="q2t" id="q2t" value="" />） </fieldset> <legend>q3</legend> <fieldset> <input type="checkbox" name="q3c" value="1" id="q3c" onclick="check();" />楽しかった <select name="q3s" id="q3s"> <option value="" />▼選んで <option value="1" />めちゃめちゃ <option value="2" />めっちゃ <option value="3" />めちゃ </select> その他なにかあったら書いて <textarea name="q3t" id="q3t"></textarea> </fieldset>

質問者

お礼 2011/12/18 12:09

ご回答ありがとうございます。教示通りの設定で、q3は解決しました！

質問者

補足 2011/12/18 12:14

q1とq2の動作ですが、リロードすると（フォーム内のサブミットボタンを押して、send.phpに移り、そこからreturnしてくると）動作しますが、 q1のラジオボタンのON/OFFによって瞬時にq2の方に反映されません。記述内容はご教示のとおりに行いました。 <legend>や<fieldset>もすべてです。 ※send.phpは、データベースに回答内容を送信するプログラム（php）で、エラー（未回答や条件に合致しない回答）がある場合は、situmon.php に返してエラー箇所を表示するというものです。

その他の回答 (1)

yambejp
ベストアンサー率51% (3827/7415)

2011/12/19 12:01 回答No.2

＞q1のラジオボタンのON/OFFによって瞬時にq2の方に反映されません。＞記述内容はご教示のとおりに行いました。おかしいですね。一通りのブラウザで試しましたが、ご指定の動作をするようです。私の認識がまちがってるかもしれないのでなんとも言えませんが・・・（q1の「はい」にチェックがついている時だけq2がdisableになるということですよね？）＞<legend>や<fieldset>もすべてです。はずかしながら表記間違いです。正しくは<legend>は<fieldset>の中に記載します。ただし、今回の動作とは無関係です。

質問者

お礼 2011/12/21 12:38

ご回答ありがとうございます。お礼が遅くなり申し訳ありません。あれから、いろいろといじって、何度もやり直しましたが、どうも動かず・・・。しかし、ふとした瞬間に、input onClick="check();"が、javascript側で、 function check() {　になっているのに気づきました。ですので、yambejpさんのご回答通りで解決できました。どうしようもなくてすみません。補足このアンケートページはログインするものだったので、回答途中の方が、再度ログインすると、当該部分の値がdisableでクリア（空）になる不具合（当該アンケートでは）がでたため、コードは少し修正して使用しています。ありがとうございました。

関連するQ&A

JavaScriptで入力制御＆チェックをしたい
JavaScriptを使ってフォームの質問1の3を答えたら質問2が入力可能なるようにしたです。 name="q2"の形にすると制御できますが、ｐｈｐでの受け取りが、最後にチェックされた値しか表示されないためname="q2[]"にしたいです。しかし、name="q2[]"にした時のJS側の記述がわかりません。 name="q2[]"にするとphpの配列でチェックされた値全部を取得できるので、name="q2[]"の形でJSの修正をしたいのですが、どのように記述すれがいいのでしょうか？なお、JSで難しい場合は、JSではなくPHPの修正でもかまいません。結果、入力制御、入力チェックもでき、チェックボックスの値すべてがpostでｐｈｐに送れればいいです。現状では下記のようにしています。どうぞよろしくお願いいたします。 <form id="form1" name="form1" method="post" action="kakunin2.php" > <label for="q1">質問1</label> <p>今回のイベントはどうでしたか？</p> <p> <input type="radio" name="q1" value="よかった" onClick="changeDisabled()" />よかった　　 <input type="radio" name="q1" value="普通" onClick="changeDisabled()" />普通　　 <input type="radio" name="q1" value="おもしろくなかった" onClick="changeDisabled()" />おもしろくなかった <br /><span id="q1_error" name="q1_error"></span> </p> <label for="q2">質問2</label> <p>質問1で「おもしろくなかった」とお答えの方に質問です。<br />おもしろくなかった理由は何ですか？</p> <p> <input type="checkbox" name="q2[]" value="退屈だった" disabled="disabled" />退屈だった　　 <input type="checkbox" name="q2[]" value="時間が長かった" disabled="disabled" />時間が長かった　　 <input type="checkbox" name="q2[]" value="時間が短すぎた" disabled="disabled" />時間が短すぎた　　 <br /><span id="q2_error" name="q2_error"></span> </p> <input type="button" name="submit_01" id="submit_01" value="確認" onclick="check()"/> </form> ----------以下JavaScript---------- var frm = document.form1; var q1 = ""; var q2 = ""; var error_flag = ""; //質問1のチェック for(i = 0; i < frm.q1.length; i++){ if(frm.q1[i].checked){ q1 = frm.q1[i].value; } } if(q1 == "") { document.getElementById("q1_error").innerHTML = "質問1におこたえください"; error_flag = "1"; }else{ document.getElementById("q1_error").innerHTML = ""; } //質問2のチェック if(q1 == "おもしろくなかった" ) { for(j = 0; j < frm.q2.length; j++){ if(frm.q2[j].checked){ q2 = frm.q2[j].value; } } if(q2 == "") { document.getElementById("q2_error").innerHTML = "質問2におこたえください"; error_flag = "1"; }else{ document.getElementById("q2_error").innerHTML = ""; } }else{ document.getElementById("q2_error").innerHTML = ""; } if(error_flag !=""){ alert("入力が正しくありません！"); }else{ document.form1.submit(); } } //質問2のチェックボックスを使えるようにするかどうかを設定する function changeDisabled(){ //フォームのオブジェクトを入れておく var frm = document.form1; //質問1で「おもしろくなかった」を選ばれている場合に質問を入力できるようにする if(frm.q1[2].checked) { //チェックが入っていた場合の処理 for(i = 0; i < frm.q2.length; i++){ frm.q2[i].disabled = false; } }else{ //チェックが入っていなかった場合の処理 for(i = 0; i < frm.q2.length; i++){ frm.q2[i].disabled = true; } document.getElementById("q2_error").innerHTML = ""; } } ----------以下PHP（kakunin2.php）での受け取り---------- $q2 = $_POST["q2[]"]; for($i=0; $i<count($_POST["q2"]); $i++){ $q2[$i] = $_POST["q2"][$i] .","; echo $q2[$i]; }
- 締切済み
- JavaScript
JavaScript フォームでのラジオボタン制御
JavaScript初心者です。 <input name="sample1" value="左ラジオボタン" checked="checked" type="radio"> 左ラジオボタン <input name="sample1" value="右ラジオボタン" type="radio">右ラジオボタン右ラジオボタンをクリックした場合に下記のラジオボタンをクリックできる <input name="sample2" value="1" type="radio">1 <input name="sample2" value="2" type="radio">2 <input name="sample2" value="3" type="radio">3 <input name="sample2" value="4" type="radio">4 上記のように右ラジオボタンにチェックした時だけ1～4のラジオボタンをクリックできるように制御したいのですがどのように書いて言ったらいいのか困っています。 $(function() { $("[name='sample1']").click(function(){ var num = $("[name='sample1']").index(this); if(num == 1){ $("[name='sample1']").attr("disabled", false); } else { $("[name='sample1']").attr("disabled", true); } }); }); 上記のようにしてみたのですがここからどう下のラジオボタンを操作させるようにしていったらいいのかわかりません。詳しい方どなたかご教示頂けないでしょうか？宜しくお願い致します。
- ベストアンサー
- JavaScript
セレクトの内容に応じてラジオボタンを自動選択する方法
<script type="text/javascript"> function selectChange(){ var selectedNum = document.form1.Q1.selectedIndex; if(selectedNum == 0 | selectedNum == 1) { document.formGeneratorForm1.Q2[0].disabled=false; document.formGeneratorForm1.Q2[1].disabled=false; }else{ document.formGeneratorForm1.Q2[0].disabled=true; document.formGeneratorForm1.Q2[1].disabled=true; } } </script> <select name="Q1" onchange="selectChange()"> <option value="0" selected >AAA</option> <option value="1" >BBB</option> <option value="2" >CCC</option> </select> <input type="radio" name="Q2" value="0" />000 <input type="radio" name="Q2" value="1"　checked/>111 上記のソースでQ1でCCCを選択した時に、Q2で000を選択していたとしても111に自動的にチェックを入れる方法をご教授下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
javascript 要素取得
htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、下記のようなプログラムを書きました。セレクトボックスから複数選択できるようにしたいのですが、表示されるのは複数選んだ際に一番初めに選択したものだけです。　例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。しかし、これを「あああ.いいい」としたいのです。できれば、「あああ　いいい」と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか？どなたかよろしくお願いします。 javascript側 function checkbox(){ 　var str=""; 　for(i=0;i<document.form1.elements.length;i++){ 　　if(document.form1.elements[i].checked){ 　　　　if(str != "") str = str + "."; 　　　　str = str + document.form1.document[i].value; 　　} 　} 　if(str == ""){ 　　alert("入力してください"); 　　return false; 　}else{ 　　document.form1.submit(); 　} } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">
- 締切済み
- JavaScript
オブジェクト名に変数を使いたい
<form id="form1" name="form1" method="post" action=""> <label for="q1-1"><input id="q1-1" name="q1" type="radio" value="1" />あ</label> <label for="q1-2"><input id="q1-2" name="q1" type="radio" value="0" />い</label> <label for="q1-3"><input id="q1-3" name="q1" type="radio" value="0" />う</label> <label for="q1-4"><input id="q1-4" name="q1" type="radio" value="0" />え</label> <label for="q2-1"><input id="q2-1" name="q2" type="radio" value="1" />あ</label> <label for="q2-2"><input id="q2-2" name="q2" type="radio" value="0" />い</label> <label for="q2-3"><input id="q2-3" name="q2" type="radio" value="0" />う</label> <label for="q2-4"><input id="q2-4" name="q2" type="radio" value="0" />え</label> </form> ============================================================ 上のような４択の問題が10問あります。これを採点して合計点数を表示させたいと思っていますが、下記のようにfor文を使う際、オブジェクト名の、"q1"の"1"というところに変数nを使いたいのですが、やり方がわかりません。 ============================================================ for(var n=0;n<10;n++){ var length=document.form1.q1.length; for(var i=0;i<length;i++){ var checked=document.form1.q1[i].checked; if(checked==true){ ans = i; } } var value=document.form1.q1[ans].value; } ============================================================ いろいろ調べてみましたが、うまくいかず固まっております。どなたかご教授いただけませんでしょうか？
- ベストアンサー
- JavaScript
JavaScript for文の処理
JavaScriptでクイズの採点をしたいと思っています。 ↓のスクリプトを書いたのですが「ページでエラーが発生しました」という表示がステータスバーにでます。二問とも一番下の選択肢を選んだ場合「２点です」とアラートに表示させたいのですがどうしても、うまくいきません。おそらくfor文内の score + document.myFORM.elements[i].value; このへんがおかしいのだと思うのですが。どなたか修正方法をお願いします。 <HTML> <HEAD> <script Language="JavaScript"></script> </HEAD> <BODY> <FORM name="myFORM">第一問：あなたは？ <BR> <INPUT TYPE="RADIO" NAME="q1" ID="r1"VALUE="0"> <LABEL FOR="r1">引きこもり</LABEL> <BR> <INPUT TYPE="RADIO" NAME="q1" ID="r2" VALUE="1"><LABEL FOR="r2">立てこもり</LABEL> <BR> <INPUT TYPE="RADIO" NAME="q1" ID="r3" VALUE="1"><LABEL FOR="r3">生き残り</LABEL> <BR><BR> 第二問：あなたは？ <BR> <INPUT TYPE="RADIO" NAME="q2" ID="r2_1" VALUE="0"><LABEL FOR="r2_1">引きこもり</LABEL> <BR> <INPUT TYPE="RADIO" NAME="q2" ID="r2_2" VALUE="0"><LABEL FOR="r2_2">立てこもり</LABEL> <BR> <INPUT TYPE="RADIO" NAME="q2" ID="r2_3" VALUE="1"><LABEL FOR="r2_3">オタク</LABEL> <BR><BR> <input type="button" value="採点する" onClick="GetScore()"> </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">  </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
他フォームの入力データの引継ぎ
入力フォームを2つ用意し第1フォームの入力欄の1部を第2フォームの入力欄のデータとして submitさせたいのですが <INPUT TYPE="radio">と<SELECT>の入力値がうまく引継げません。下記のようなJavaスクリプトとHTMLなのですが Javaスクリプトで「value」を＝にすると「radio」のほうはundefin、「SELECT」で複数選択した場合は、一つ目の選択肢のみしか引継げませんでした。 Javaスクリプトでうまくいく方法がありましたらご教示ください。 ----Javaスクリプト-------------------------------- function aaa() { document.FROM2.A.value = document.FROM1.A.value; document.FROM2.B.value = document.FROM1.B.value; document.FROM2.C.value = document.FROM1.C.value; document.FROM2.submit(); } ----HTML-------------------------------- <FORM NAME="FROM1" METHOD="POST" ACTION="***"> <SELECT NAME="A" MULTIPLE> <OPTION VALUE="aa">セレクトa <OPTION VALUE="bb">セレクトb <OPTION VALUE="cc">セレクトc <OPTION VALUE="dd">セレクトd </SELECT> <INPUT TYPE="radio" NAME="B" VALUE="" CHECKED>選択なし <INPUT TYPE="radio" NAME="B" VALUE="1" CHECKED>ラジオ1 <INPUT TYPE="radio" NAME="B" VALUE="2" CHECKED>ラジオ2 <INPUT TYPE="text" NAME="C"> <INPUT TYPE="text" NAME="D"> <INPUT TYPE="submit" NAME="OK_BTN" VALUE="ＯＫ"> </FORM> <FORM NAME="FROM2" METHOD="POST" ACTION="***"> <INPUT TYPE="hidden" NAME="A"> <INPUT TYPE="hidden" NAME="B"> <INPUT TYPE="hidden" NAME="C"> <INPUT type="button" onClick="JavaScript:aaa();" name="OK_BTN" value="ＯＫ"> </FORM>
- 締切済み
- JavaScript
ラジオボタンの選択項目によってコメントを表示する方法
ラジオボタンの「Yes・No」にチェックすると、チェックした項目別に欄外にコメントを表示するページを作成しました。初心者のため、Q1～Q15までcheckの方法を延々と書いたのですが、もっと簡単に書く方法はありますでしょうか？参考にQ1・Q2の分を掲載させていただきます。ぜひ、教えてください。よろしくお願いいたします。 <SCRIPT language="JavaScript">  </SCRIPT> <INPUT type="radio" name="q1"> Yes　<INPUT type="radio" name="q1"> No <INPUT size="41" type="text" name="q1com"> <INPUT type="radio" name="q2"> Yes　<INPUT type="radio" name="q2"> No <INPUT size="44" type="text" name="q2com"> <INPUT type="button" value="　診断ボタン " onclick="check();>
- ベストアンサー
- JavaScript
一つのチェックボックスでテキストフィールドとプルダウンリストを制御
現在以下のようなテキストフィールドとプルダウンがあります。 <form name="register" action="register_kakunin.php" method="post"> <input type="checkbox" name="name_check" onclick="fchk(this,1);" /> <input name="revenue" onChange="keisan()" type="text" id="revenue" size="6" readOnly="true"/> <input type="checkbox" name="chk" onclick="fchk2(this)" /> <select name="paymethod" disabled="disabled"> <option value="">Pay Method</option> <option value="cash">cash</option> <option value="card">card</option> <option value="point">point</option> <option value="coupon">coupon</option> </select> </form> これを function fchk(obj, name_check){ var frm=document.register; if(!obj.checked){ /* チェックされたら、テキストボックスを有効化 */ frm.revenue.readOnly=true; }else{ /* チェックが外されたら、テキストボックスを無効化 */ frm.revenue.readOnly=false; } } function fchk2(obj) { var frm=obj.form; var len=frm.elements.length; /* フォームの要素数 */ if(obj.checked==true){ /* チェックボックスが選択されている場合、　プルダウンを有効化（disabled=false） */ frm.elements["paymethod"].disabled=false; }else{ /* チェックボックスが選択されていない場合、　プルダウンを無効化（disabled=true） */ frm.elements["paymethod"].disabled=true; } } という2つのスクリプトで制御しているのですが、前者を操作するときには必ず後者も操作することになるため、一つのチェックボックスで2つとも制御できるようにしたいのですが、どうしたらいいのでしょうか？上記のjavascriptはネットから拾ってきたもので、自作ではありません。宜しくお願いします。
- ベストアンサー
- JavaScript

JavaScriptでフォーム要素の状態を制御する方法

javascriptでフォーム要素の状態を制御