JavaScriptでフォームの入力制御がうまく働かない
- JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたが、一部の入力項目で正常に表示されない問題が発生
- PHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、JavaScriptをOFFにすると正常に表示されることから、JavaScriptのtxt.value="";の部分に問題があると思われる
- JavaScriptとPHPの双方に詳しい方に問題の原因と解決策を教えてほしい
- ベストアンサー
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>
- mmiinnoorruu
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
print $pet."に".$food."を与える"; の場所が悪いです。 一番最後の}の手前に移動しましょう。
関連するQ&A
- javascriptで2箇所のphpの関数を取得したいのです。
javascriptで2箇所のphpの関数を取得したいのです。 見よう見まねでやっている初心者です。よろしくお願いします。 javascriptにてphpの関数をよびだしてhtmlのinput type="text"に値を出力しようとしています。 ２か所のphp を下記のようにhtmlに書いて取得しようとしたのですがどちらか一方しか取得できません。 なんとか両方を読み込めるようにできないでしょうか？分かりにくい質問かと思いますので例を書いて見ましたのでどうかよろしくお願いいたします。 (例） <script type="text/javascript" src="../data/zzz.php?aaa=abc" ></script> <script type="text/javascript" src="../../../data/xxx.php?bbb=abc" ></script> 上記のように書いても片方しか取得しないようです。 以下../dataのzzz.phpのphｐです。 <?php $aaa = $_GET['aaa']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($aaa== 'abb') {echo "document.getElementById(\"xxx\").value=100;","document.getElementById(\"yyy\").value=1;";} elseif ($aaa == 'abc') {echo "document.getElementById(\"tanka\").value=120;","document.getElementById(\"yyy\").value=2;";} echo "}"; ?> 以下../../../dataのxxx.phpのphｐです。（例） <?php $bbb = $_GET['bbb']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($bbb== 'abb') {echo "document.getElementById(\"zzz\").value=50;","document.getElementById(\"vvv\").value=10;";} elseif ($bbb == 'abc') {echo "document.getElementById(\"tanka\").value=51;","document.getElementById(\"vvv\").value=20;";} echo "}"; ?> 以上２か所のディレクトリのphpを取得したいのですが、これはできない事なのでしょうか？ちがうディレクトリから取得しなければ更新作業が大変になってしまうのです。どうかよろしくお願いいたします。
- ベストアンサー
- PHP
- JavaScriptの計算のNaNの判定について…
いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか？いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>
- ベストアンサー
- JavaScript
- javaScriptのif文について…
以下のようなプログラムを作成しました。作ったのはサンプルで、本当に作りたいのはもっと条件が多いのを作りたいのですが、かなりifの羅列となってしまいます。他に何か良い方法はありませんか？教えてくださいm(__)M <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1) { rslt=36; } else { if (v1==1 && v2==2) { rslt=29; } else { if (v1==1 && v2==3) { rslt=22; } else { if (v1==1 && v2==4) { rslt=14; } else { if (v1==1 && v2==5) { rslt=7; } else { if (v1==1 && v2==6) { rslt=0; } else { rslt='?'; }} document.getElementById('txt').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 </select> <select id="s2" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 </select><p> <input type="text" id="txt" value=""> </body> </html>
- ベストアンサー
- JavaScript
- Operaでselect要素のoption設定が変です。
こんにちは，よろしくお願いします。 IEやFirefoxでは意図したとおりに表示されるのに，Operaで表示したときだけ，よけいな空白のoptionが表示されて困っています。 （ソースの表示をしても，空の<option></option>が入っているというわけではありません。何も無いようなのですが，下向き▼をクリックすると空白の選択肢が挿入されています。） 下のようにselect要素に時刻のoptionを設定しました。 document.getElementById("ji")がselect要素です。 var start = new Date(2000,1,1,8,0); var end = new Date(2000,1,1,16,0); var zzz = new Date(); zzz.setTime(start.getTime() + (15 * 60 *1000)); for(i=0; i< 24-zzz.getHours(); i++){ if(i + zzz.getHours() < 10){ document.getElementById("ji").options[i] = new Option("午前 " + (i + zzz.getHours()) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() < 12){ document.getElementById("ji").options[i] = new Option("午前" + (i + zzz.getHours()) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() >= 12 && i + zzz.getHours() < 22){ document.getElementById("ji").options[i] = new Option("午後 " + (i + zzz.getHours() - 12) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() >= 22){ document.getElementById("ji").options[i] = new Option("午後" + (i + zzz.getHours() - 12) , (i + zzz.getHours()) + ""); } } ここまでは，問題なく表示されます。ここで問題なのは，次のように，selectedの設定をしようとするとよけいな空白optionが挿入されます。 for(i=0; i<24; i++){ if(end.getHours() == parseInt(document.getElementById("ji").options[i].value)){ document.getElementById("end_ji").options[i].selected = true; break; } } そこで， document.getElementById("end_ji").options[i].selected = true;の行の前に，次のようなalert文を挿入すると， alert("i = " + i + " optval = " + parseInt(document.getElementById("ji").options[i].value) + " end = " + end.getHours()); なぜか，無駄な空白の選択肢が消えて，きちんと表示されました。 Operaが，「 options[i].selected 」の仕様で，IEやFirefoxと違う点があるのでしょうか？ いったい何が原因なのでしょうか？よろしく御指導ください。お願いします。
- ベストアンサー
- JavaScript
- JavaScriptで、SELECTの値で、TEXTを入力可と入力不可
JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptでの表の行の表示・非表示の切り替え
現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>
- ベストアンサー
- JavaScript
- ページが切り替わるスクリプトで最初から指定のページを表示させる
<html> <head> <script type="text/javascript" language="JavaScript"> <!-- JavaScript小技集 2005. 6.17 function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">記事を選ぶ</option> <option value="item1">記事１</option> <option value="item2">記事２</option> <option value="item3">記事３</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですが どうすればよいのでしょう？
- 締切済み
- Java
- 同じようなのばかりだ申し訳ないのですが…javaに関してです。
以下のようなプログラムを作成しました。３つのスクリプトを動作させたいのですがどうすればよいですか？また，画像のように(1)～(3)の和を算出するにはどうすればいいですか？助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>
- ベストアンサー
- Java
- DOCTYPE宣言とjavascript
United Statesを選んだ場合、州を選択。 それ以外の国の場合はtextフィールドで県なりを直接書き込む と言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。 但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。 ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、 良い書き方が解りません。どなたかご教授願えますでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- プルダウンをもう一つ増やしたい＆フレームページで使用のため、別ウインドウで表示させたい
↓他サイトさんにてサンプルで置いてあったものを拝借して自分なりにやってみました。 １、これをさらにもうひとつプルダウンを選択させて他サイトへジャンプさせる場合はどのようにしたらよいですか。 ２、フレームページで使うので、他サイトの表示を別ウインドウで表示させたいのですが、どのようにしたらよいですか。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http:///www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "inline"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
素早いご返答ありがとうございます。 おっしゃる通り、printを最後に持ってくるとちゃんと表示されました！ JavaScriptをoffにすることで正常に表示されていたので、てっきりJavaScriptに問題があるのかとばかり思っていました。お恥ずかしい限りです。 実際のコードではforeachで回している配列の要素が全部で数十個あるのですが、全部を一度にループさせるのではなく、その中の「まとめたいグループ」ごとにforeachをかければ良いということですね？ 今から早速作業に取りかかってみます。本当にありがとうございました！