締切済み

javascriptの動作で困ってます。

2014/06/06 23:09

動作不良が三箇所あります。プログラムに詳しい方がいらっしゃいましたら原因を教えて下さい。・未入力の質問をアラートで一括表示させたいのですが、（３）のテキストエリアの箇所が未入力なのにアラートに表示できません。判定のtrueとfalseを逆にして試すと、（３）のアラートは表示されるものの、記入してもアラートが出続けます。・１度しか指定していないにも関わらず同じ内容の警告アラートが２回出てしまう原因が分かりません。・入力した項目や選択した項目に関しては未入力項目のアラートとは別のアラートを用意してvalueの値をアラートで一括表示させたいのですが、関数を定義しているにも関わらず、関数が定義されていないとエラーメッセージが帰ってきて、表示されません。ソースコードは以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check(){ var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); } if (str.length>5) { alert("客番号は4～5桁"); } if(str.length<4){ alert("客番号は4～5桁"); } if(str==""){ msg += "客番号が未入力です。\n"; }else{ msg2 += document.form.id.value; } if(str2==""){ msg += "パスワードが未入力です。\n"; }else{ msg2 += document.form.pass.value; } if(radioCheck()==false){ msg += "(1)が未入力です。\n"; } if(checkboxCheck()==false){ msg += "(2)が未入力です。\n"; } if(textareaCheck()==false){ msg += "(3)が未入力です。\n"; } if(selectCheck()==false){ msg += "(4)が未入力です。\n"; } if(msg != ""){ //メッセージを出力 alert(msg); } if(radioCheck()==true){ msg2 += document.form.eng.value ; } if(checkboxCheck()==true){ msg2 += document.form.lang.value ; } if(txtareaCheck()==true){ msg2 += document.form.opinion.value ; } if(selectCheck()==true){ msg2 += document.form.age.value ; } if(msg2 != ""){ //メッセージを出力 alert(msg2); } } function radioCheck(){ var count = 0; var eng=document.getElementsByName("eng"); for(var i=0;i<eng.length;i++){ if(eng[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function checkboxCheck(){ var count = 0; var checklist=document.getElementsByName("lang[]"); for(var i= 0;i<checklist.length;i++){ if(checklist[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function textareaCheck(){ var textarea=document.getElementById("demand").value; if(textarea!=""){ return true; } else{ return false; } } function selectCheck(){ var selectValue=document.getElementById("age").value; if(selectValue!="選択されていません"){ return true; } else{ return false; } } </script> </head> <body> <form action="http://www" method="post" name="form"onSubmit="return check()"> <h1>アンケート</h1> <p><label>客番号：<input type="text" name="id"></label></p> <p><label>パスワード：<input type="password" name="pass"></label></p> <h2>（１）</h2> <p>食べたいですか？<br> <br> <input type="radio" name="eng" value="yes"> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>（２）</h2> <p>食べたい物<br> <br> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>（３）</h2> <p>意見（自由記述）<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20"> </textarea> </p> <h2>（４）</h2> <p> 年齢を選択 <select id="age" name="age"> <option selected value="選択されていません">以下から選択</option> <option value="10～19才">10～19才</option> <option value="20～29才">20～29才</option> <option value="30～39才">30～39才</option> <option value="40～49才">40～49才</option> <option value="50～59才">50～59才</option> <option value="60～69才">60～69才</option> <option value="70才～">70才～</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick="check();"> <input type="reset" value="クリア"> </p> </body> </form> </html>

choppppp
お礼率0% (0/2)

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

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

みんなの回答

yelser
ベストアンサー率72% (8/11)

2014/06/07 05:16 回答No.2

Javascriptが途中で落ちてますね。流し読みして気になったところを直すと、IE、Firefox、Chromeで動作確認が取れました。そもそもValueを呼びに行かずに数字じゃダメなのかとか、JSONにまとめたりしなくていいのかとか思いますが。以下、改変後ソースです。 /////////////////////////////////////////////////// <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check() { var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); return false; } else if (str.length > 5 || str.length < 4) { alert("客番号は4～5桁"); return false; } if (str === "") { msg += "客番号が未入力です。\n"; } else { msg2 += document.form.id.value; } if (str2 === "") { msg += "パスワードが未入力です。\n"; } else { msg2 += document.form.pass.value; } var val;//ここに値を格納しています if ((val = radioCheck()) === false) { msg += "(1)が未入力です。\n"; } else { //どこにアクセスしてるの？ msg2 += document.form.eng.value; msg2 += "ちなみに内容は" + val + "でした。"; } if ((val = checkboxCheck()) === false) { msg += "(2)が未入力です。\n"; } else { //そもそもlang[]の間違い msg2 += document.form.lang.value; msg2 += "ちなみに内容は" + val + "でした。"; } if (textareaCheck() === false) { msg += "(3)が未入力です。\n"; } else { msg2 += document.form.opinion.value; } if (selectCheck() === false) { msg += "(4)が未入力です。\n"; } else { msg2 += document.form.age.value; } if (msg !== "") { //メッセージを出力 alert(msg); return false; } if (msg2 !== "") { //メッセージを出力 alert(msg2); } return true; } function radioCheck() { var count = 0; //アクセスの仕方が変わった？ var eng = document.getElementsByName("eng"); for (var i = 0; i < eng.length; i++) { if (eng[i].checked) { //Checkboxは一つだけしかチェックされない return eng[i].value; count++; } } if (count !== 0) { return true; } else { return false; } } function checkboxCheck() { var count = 0; var checkbox_value = ""; var checklist = document.getElementsByName("lang[]"); for (var i = 0; i < checklist.length; i++) { if (checklist[i].checked) { checkbox_value += checklist[i].value; count++; } } if (count !== 0) { return checkbox_value; return true; } else { return false; } } function textareaCheck() { var textarea = document.getElementById("demand").value; if (textarea !== "") { return true; } else { return false; } } function selectCheck() { var selectValue = document.getElementById("age").value; if (selectValue !== "選択されていません") { return true; } else { return false; } } </script> </head> <body> <form action="http://localhost" method="post" name="form" onsubmit="return check();"> <h1>アンケート</h1> <p><label>客番号：<input type="text" name="id" required></label></p> <p><label>パスワード：<input type="password" name="pass" required></label></p> <h2>（１）</h2> <p> 食べたいですか？<br> <br> <input type="radio" name="eng" value="yes" required> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>（２）</h2> <p> 食べたい物<br> <br> <input type="hidden" name="lang" value="langというnameは存在しない。"> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>（３）</h2> <p> 意見（自由記述）<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20" required></textarea> </p> <h2>（４）</h2> <p> 年齢を選択 <select id="age" name="age" required> <option selected value="選択されていません">以下から選択</option> <option value="10～19才">10～19才</option> <option value="20～29才">20～29才</option> <option value="30～39才">30～39才</option> <option value="40～49才">40～49才</option> <option value="50～59才">50～59才</option> <option value="60～69才">60～69才</option> <option value="70才～">70才～</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick=""> <input type="reset" value="クリア"> </p>  </form> </body> </html>