• 締切済み

JavaScriptで入力制御&チェックをしたい

JavaScriptを使ってフォームの質問1の3を答えたら質問2が入力可能なるようにしたです。 name="q2"の形にすると制御できますが、phpでの受け取りが、最後にチェックされた値しか表示されないためname="q2[]"にしたいです。 しかし、name="q2[]"にした時のJS側の記述がわかりません。 name="q2[]"にするとphpの配列でチェックされた値全部を取得できるので、name="q2[]"の形でJSの 修正をしたいのですが、どのように記述すれがいいのでしょうか? なお、JSで難しい場合は、JSではなくPHPの修正でもかまいません。 結果、入力制御、入力チェックもでき、チェックボックスの値すべてがpostでphpに送れればいいです。 現状では下記のようにしています。 どうぞよろしくお願いいたします。 <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]; }

みんなの回答

  • newwave2
  • ベストアンサー率0% (0/0)
回答No.2

ご質問の意味を正確に理解していない気がしますが input,textをhiddenでつくって、そのvalueに履歴を入れるのではダメですか? 試してないのでできなかったらすいません。 また、理解が間違えていたら重ねてすいません。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

> frm.q2 最低でもfrm.elements["q2[]"]としてください

関連するQ&A

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

    いつもお世話様です。 phpでフォームを構成しています。 フォーム内のradioボタンの状態で、以降のラジオボタン、プルダウン、テキスト入力を 制御したいです。 <制御内容(やりたいこと)> situmon.phpで、 q1のラジオボタンが1の場合は、q2は回答しなくていい。 (2の場合だけ回答させる。) q3のチェックボックスが1でない場合は、プルダウンとテキストは入力しなくていい。 (1の場合だけ回答させる。) <現状のソース> ちなみに、該当するjavascript部分は、いろいろなサイトをみて、 いろいろ書き換えて試しましたが、どうもうまくいかず、 断念した段階そのままの状態です。 よって、ご回答はこれをベースにしなくても大丈夫です。 よろしくお願いします。 ---situmon.php--- <script type="text/javascript"> <!-- function Check() { document.form.elements["q2"][1].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2"][2].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2t"].disabled = (!document.form.elements["q1"][2].checked); } // --> </script> <body> <form name="form"> <!-- q1 --> <input type="radio" name="q1" id="q1" value="1" onclick="check();"/>はい <input type="radio" name="q1" id="q1" value="2" onclick="check();"/>いいえ <!-- q2 --> <input type="radio" name="q2" id="q2" value="1" />なぜ1 <input type="radio" name="q2" id="q2" value="1" />なぜ2 (その他: <input type="text" name="q2t" id="q2t" value="<php echo h(@$q2t); ?>" />) <!-- q3 --> <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>

  • 複数対応できるチェックボックスONでのテキストフィールド有効化

    nameでなくidから値を取得する方法を模索中です。 下記のようにしてみましたが、 「オブジェクトでサポートされていない~」とでます。 どのあたりに問題がありますでしょうか? <script type="text/javascript"> function fchk(obj,id) { var frm=obj.form; if(obj.checked==true) { /* テキストボックスを有効化(false)*/ for(var i=1; i<=2; i++){ frm.getElementById("t"+i).disabled=false; } } else { for(var i=1; i<=2; i++){ /* 無効化する前に、入力値をクリア */ if(id=='t'){ frm.getElementById("t"+i).value=""; } /* 無効化(true) */ frm.getElementById("t"+i).disabled=true; } } } </script> <form name="form" action="#"> <input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,'t')" /> <br /> <input type="text" name="aaa" id="t1" value="" size="20" disabled/> <input type="text" name="aaa" id="t2" value="" size="20" disabled/> </form>

  • 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>

  • 一つのチェックボックスでテキストフィールドとプルダウンリストを制御

    現在以下のようなテキストフィールドとプルダウンがあります。 <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はネットから拾ってきたもので、自作ではありません。 宜しくお願いします。

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <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>

  • CheckBoxの入力チェックについて

    CheckBoxの入力チェックについて CheckBoxの数は可変です。 全て未チェックのときにalertを表示したいです。 今はチェックしてもalertが表示されてしまいます。 よろしくお願いします。 <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>チェックボックス入力チェック</title> <SCRIPT TYPE="text/javascript"> <!-- function item_check() { count = 0; for (i=0;i<=document.form1.elements['item[]'][i].length;i++){ if(document.form1.elements['item[]'][i].checked){ count++; } } if(count==0){ alert("項目を選択してください。"); return(false); } return(true); } --> </SCRIPT> </head> <body> <form name="form1" method="POST" action="test.htm" onSubmit="return item_check()"> <p><input type="checkbox" name="item[]" value="1">項目1</p> <p><input type="checkbox" name="item[]" value="2">項目2</p> <p><input type="checkbox" name="item[]" value="3">項目3</p> <p><input type="checkbox" name="item[]" value="4">項目4</p> <p><input type="checkbox" name="item[]" value="5">項目5</p> <input type="submit" name="kakunin" value="確認"> </form> </body> </html>

  • チェックボタンの受け取り方法

    フォーム作成したチェックボタンの受け取り方法を教えてください。 javaのプログラムを書きたいのですがわかりません。助けてください。 <html> <head> <title>練習</title> <body> <script language="Java Script"> <!-- function send_form(){ for(i=0;i<5;i++){ if(document.form1.Q1[i].checked==true){ int a1=i; return a1; } } } //--> </script> </head> <p> <form action=http://localhost:8080/MyApp/servlet/Param2 method=get> Q1 質問をここに書き込む </p> <form name="form1" action="cgi-bin/formsample.cgi" method="post" onSubmit="return send_form()"> <p> <input type='radio'name='Q1'>思う <input type='radio'name='Q1'>やや思う <input type='radio'name='Q1'checked>どちらでもない <input type='radio'name='Q1'>やや思わない <input type='radio'name='Q1'>思わない </p> <input type="submit" value="送信する"><input type="reset" value"書き直す"> </form> </body> </html>

    • ベストアンサー
    • Java
  • JavaScriptの入力制御がうまく働きません。

    JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたのですが、下の例の「フード」で「その他」以外を選択するとまったく何も表示されません。ちなみにPHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、またJavaScriptをOFFにすると正常に表示されることから、PHPのコードではなく、JavaScriptのtxt.value=""; の部分に問題があると思われます。ですが、いろいろ調べましたが手詰まりになりました。 PHPとJavaScriptの双方にお詳しい方、どうかご教授くださいますようお願いいたします。 以下、問題のコードです。長くて申し訳ありませんm(_ _)m <script type="text/javascript"> function zzz(list,txt){ if (list.value == "その他"){ txt.disabled=false; }else{ txt.value=""; txt.disabled=true; } } </script> <?php if(!isset($_POST['pet'])){ ?> <body onload="zzz(document.getElementById('pet'),document.getElementById('petOther')),zzz(document.getElementById('food'),document.getElementById('foodOther'))"> <form method="post" action="test.php"> ペット: <select name="pet" id="pet" onchange="zzz(this,document.getElementById('petOther'))"> <option value="" selected="selected">↓</option> <option value="犬">犬</option> <option value="猫">猫</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="petOther" value="" size="20" id="petOther" />) <br /> フード: <select name="food" id="food" onchange="zzz(this,document.getElementById('foodOther'))"> <option value="" selected="selected">↓</option> <option value="缶詰">缶詰</option> <option value="ドライフード">ドライフード</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="foodOther" value="" size="20" id="foodOther" />) <button class="submit" type="submit"><span class="submitBTN">送信内容確認画面へ進む</span></button> </form> <?php }else{ print "<body>\n"; foreach($_POST as $key => $val){ if($key == "pet"){ if($val != "その他"){ $pet = $val; } } if($key == "petOther"){ if(!empty($val)){ $pet = $val; } } if($key == "food"){ if($val != "その他"){ $food = $val; } } if($key == "foodOther"){ if(!empty($val)){ $food = $val; } print $pet."に".$food."を与える"; } } } ?> </body> </html>

  • ラジオボタンの入力制御について(表示した時のみ制御を行う)

    yesの場合はid=ABを表示し、noの場合はid=ABを非表示にする制御を行っています。 両方yesの場合は表示。両方noの場合は非表示。 片方がnullの場合は、yesで表示しnoで非表示としています。 ここまでの動作は、問題ないのですが id=ABを表示した場合、hoge3が入力必須となり id=ABを表示しない場合、hoge3は入力必須ではないように制御を行いたいと思っています。 他書き込みを参考にしたのと、自身で書いたものが混じって非常に汚くなっていますが ご教授願えませんでしょうか。 <script type="text/JavaScript"> <!-- function test1(){ if(document.getElementById("id01").checked) { document.getElementById('AB').style.display = ""; }else if(document.getElementById("id02").checked) { document.getElementById('AB').style.display = ""; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } }else{ document.getElementById('AB').style.display = "none"; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } } } //以下はhttp://oshiete1.goo.ne.jp/qa2119460.htmlを参考にしました function test2(f){ for (var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="hoge3" && f[i].checked==true) return true; } alert("AかBを選んでください"); return false; } //--> </script> <form name="form1" onload="test1()"onsubmit="return test2(this)"> <br> <input type="radio" name="hoge1" value="1" id="id01" onClick="test1();">yes<br> <input type="radio" name="hoge1" value="0" onClick="test1();">no<br> <br> <input type="radio" name="hoge2" value="1" id="id02" onClick="test1();">yes<br> <input type="radio" name="hoge2" value="0" onClick="test1();">no<br> <br> <p id="AB" style="display:none;"> <input type="radio" name="hoge3" value="1">Aへ進む<br> <input type="radio" name="hoge3" value="2">Bへ進む<br> </p> <br> <input type="submit" value="次へ"> </form>

  • javascriptでのテキストボックス制御

    javascriptを使用して 特定のテキストボックスを動的に enable←→disableを切り替えたく、様々なホームページを見ながら試行錯誤して、下記ソースまで辿りつきましたが、うまく動かなくて困っています。 どうかご教示ください。よろしくお願いします。 現状:チェックをいれると enable→disableになるが、外すと戻らない。 目標:同上+チェック外すと最初disableも含めて、enableになる。 <html> <head> <script language="javascript" type="text/javascript"> function autochk(f){ for(var i=0;i<f.form.length;i++){ if (f.form.elements[i].className=="ko"){ if (f.form.elements[i].checked){ //checked チェックが入っていたら f.form.elements[i].disabled = false; // 入力不可, 無効化 }else{ f.form.elements[i].disabled = true; // 入力可能,有効化 } } } } </script> <style type="text/css"> <!-- ul li { list-style: none; } label { margin-right: 10px; width:200px; float: left; } --> </style> </head> <body> <form> <ul> <li><input type="checkbox" name="oya" value="1" onclick="autochk(this);">チェック</li> <li><label>無効→チェック→無効→有効</label><input type="text" name="ko1" class="ko" value="1" disabled></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko2" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other1" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko3" class="ko" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko4" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other2" value="1"></li> </form> </ul> </body> </html>

専門家に質問してみよう