JavaScriptを用いた必須項目の回答チェック

このQ&Aのポイント
  • JavaScriptを用いて、必須項目(プルダウンメニュー)の回答が全てされていない場合に、次のページへ進まず、アラートが表示されるように設定したいと考えています。
  • 設定する項目が13項目あり、8項目目から13項目目が未回答でも次のページに進めてしまいます。これだけ量が多くなると、このプログラムだと実現出来ないのでしょうか?
  • どこをどう直せば、改善されるのかを教えていただければ幸いです。
回答を見る
  • ベストアンサー

必須項目の回答がない場合、次のページに進まない

お世話になります。 プログラミング初心者のものです。 JavaScriptを用いて、必須項目(プルダウンメニュー)の回答が全てされていない場合に、次のページへ進まず、アラートが表示されるように設定したいと考えています。 そこで、以下のコードを書いたのですが、 設定する項目が13項目あり、8項目目から13項目目が未回答でも次のページに進めてしまいます。 これだけ量が多くなると、このプログラムだと実現出来ないのでしょうか? どこをどう直せば、改善されるのかを教えていただければ幸いです。 不躾な質問だとは重々承知しておりますが、時間がないため、何卒よろしくお願いいたします。 ●JavaScript <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始(チェックする項目を設定してください) if(document.aboutfande.fande1.options[document.aboutfande.fande1.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande2.options[document.aboutfande.fande2.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande3.options[document.aboutfande.fande3.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande4.options[document.aboutfande.fande4.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande5.options[document.aboutfande.fande5.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande6.options[document.aboutfande.fande6.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande7.options[document.aboutfande.fande7.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande8.options[document.aboutfande.fande8.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande.options[document.aboutfande.fande9.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande10.options[document.aboutfande.fande10.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande11.options[document.aboutfande.fande11.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande12.options[document.aboutfande.fande12.selectedIndex].value == ""){ flag = 1; } else if(document.aboutfande.fande13.options[document.aboutfande.fande13.selectedIndex].value == ""){ flag = 1; } // 設定終了 if(flag){ window.alert('選択されていません'); // 選択されていない場合は警告ダイアログを表示 return false; // 送信を中止 } else { return true; // 送信を実行 } } // --> </script> ●HTML(長くなるため最初の2つだけ書いておきます) <h1><span class="daimei"><b>ウォーターベースファンデーション</b></span><span class="honbun">について</span></h1> <form action="tiku.php" method="post" name="aboutfande" onSubmit="return check()"> <p><span class="honbun"> Q1.この商品を買いたいと思いますか?</span>  <select name="fande1"> <option value="1">はい</option> <option value="2">いいえ</option> <option value="" selected>選択してください</option> </select> </p> <span class="honbun"> Q2.この商品にどのような印象を持ちましたか?<br>   もっとも当てはまるものを選択してください</span><br> <p><span class="honbun">   1.この商品を魅力的と感じた</span>  <select name="fande2"> <option value="1">全く当てはまらない</option> <option value="2">ほとんど当てはまらない</option> <option value="3">あまり当てはまらない</option> <option value="4">どちらともいえない</option> <option value="5">やや当てはまる</option> <option value="6">かなり当てはまる</option> <option value="7">非常に当てはまる</option> <option value="" selected>選択してください</option> </select></p>

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

  • ベストアンサー
  • hok212
  • ベストアンサー率66% (100/150)
回答No.2

せっかくですから、どの質問が選択されてないのかをalert表示するようにしましょうか。 function check(){ var flag = 0; var ErrNo; for (var n = 0; n < 13; n++) { if (document.aboutfande.elements[n].value == "") { if (flag == 0) { ErrNo = n + 1; } else { ErrNo = ErrNo + "," + (n + 1); } flag = 1; } } if (flag) { window.alert("Q" + ErrNo + "が選択されていません"); return false; } else { return true; // 送信を実行 } }

maikosmos
質問者

お礼

ふおおおおお!ありがとうございます! 一番やりたかった形で実現することができました。

その他の回答 (1)

  • hok212
  • ベストアンサー率66% (100/150)
回答No.1

elements配列を使ってはいかがでしょう。 function check(){ var flag = 0; for (n = 0; n < 13; n++) { if (document.aboutfande.elements[n].value == "") { flag = 1; } } // flag値の判別は提示された通りでOK } n は質問の個数です。

関連するQ&A

  • フォームで複数の関数を1つにまとめる方法

    フォームに関して、必須項目が未入力・未選択の場合に警告する JavaScriptを記述したいのですが、 複数のJavaScriptを1つにまとめるにはどうしたら良いのでしょうか。 具体的には、 【1】テキストフィールド未入力の場合に警告する 【2】メールアドレスが間違いor未入力の場合に警告する 【3】セレクトボックスが未選択の場合に警告する という3つを同じページで同時に設定する方法が分かりません。 記述した内容は下記の通りです。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【1】 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始(必須にする項目を設定してください) if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.form1.field2.value == ""){ // 「ご住所」の入力をチェック flag = 1; // 設定終了 if(flag){ window.alert('必須項目に未入力がありました'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【2】 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始(チェックする項目を設定してください) if(!document.form1.email.value.match(/.+@.+\..+/)){ flag = 1; } // 設定終了 if(flag){ window.alert('メールアドレスが正しくありません'); // メールアドレス以外が入力された場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【3】 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始(チェックする項目を設定してください) if(document.form1.select1.options[document.form1.select1.selectedIndex].value == ""){// 「地域」の入力をチェック flag = 1; } else if(document.form1.select2.options[document.form1.select2.selectedIndex].value == ""){ // 「生年月」の入力をチェック flag = 1; } else if(document.form1.select3.options[document.form1.select3.selectedIndex].value == ""){ // 「生年日」の入力をチェック flag = 1; } // 設定終了 if(flag){ window.alert('選択されていません'); // 選択されていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【本文】 <form name="form1" onSubmit="return check()"> ■お名前:<input type="text" name="field1" size="30" style="ime-mode:active;"> ■メールアドレス:<input type="text" name="email" size="30" style="ime-mode:inactive;"> ■地域: <select name="select1"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> ・ ・ </select> ■ご住所<input type="text" name="field3" size="60" style="ime-mode:active;"> ■生年月日 <select name="select2"> <option>1</option> <option>2</option> ・ ・ </select>月 <select name="select3"> <option>1</option> <option>2</option> ・ ・ </select>日 </form> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ JavaScriptの記述経験が殆ど無いため、 出来る限り詳しくご教示願いたく、 よろしくお願い致します!

  • ラジオボタンとセレクトボックスの選択チェック

    ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }

  • 入力チェックをしたいです。

    結構初心者です。 フォームに入力された内容をチェックしたいので、まず下記のように書きました。 <script Language="JavaScript"> <!-- function submitCheck(){ var flag = 0; // 設定開始(必須にする項目を設定します) if(document.insert.MatterID.value == ""){ flag = 1; } else if(document.insert.name.value == ""){ flag = 1; } else if(document.insert.Correspondencedate.value == ""){ flag = 1; } if(flag){ window.alert('必須項目に未入力があります。'); // チェックされていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } --> </script> で、これにチェックボックスの入力チェックも含めたいのですが、ただ else if(document.insert.bld_ReceiptNo.checked){ flag = 1; } こうするだけではダメなのですね;; どうすればいいかお知恵を拝借できませんでしょうか。

  • JavaScriptでの必須項目設定

    現在、下記ジャバスクリプトにてアンケートフォームの必須項目確認をしていますが、SAFARIでは問題なく動くのですが、IE7では名前の打ち込みの必須確認(※1)は作動しますが、セレクトの場合(※2)セレクトしているにも関わらず「確認して下さい」という表示が出ます。どこか間違いがあるのでしょうか?よろしくお願いいたします。 (※1)IE7でも作動します。 function FormCheck() { var f0 = document.forms[0]; if (f0.代表者様お名前.value == "") { alert("代表者様お名前を入力してください。"); f0.代表者様お名前.focus(); return false; } (※2)IE7では「確認して下さい」と出ます。 listn = f0.ご来店月.selectedIndex; if (f0.ご来店月.options[listn].value == "") { alert("ご来店月を選択してください。"); f0.ご来店月.focus(); return false; }

  • 回答内容によって表示内容を変更する

    お世話になります。 プログラミング初心者の者です。 肌質を、プルダウンメニューで選んでもらい、そのあとのページで選んだ肌質と選んでいない肌質の両方を表示したいと考えています。 PHPの部分の、$hada1~$hada3の定義をどう書けばうまく表示できるのかがいまいち分かりません。 どう定義すれば上手くいくでしょうか。具体例を教えて頂ければ幸いです。 不躾な質問だとは重々承知しておりますが、時間がないため、何卒よろしくお願いいたします。 ●HTML <p> <span class="honbun"> Q2.あなたの肌質でもっとも当てはまると思うものを<b><u>ひとつ</u></b>選んでください  </span> </p> <p> <select name="hada"> <option value="1">敏感肌</option> <option value="2">乾燥肌</option> <option value="3">脂性肌</option> <option value="no" selected="">選択してください</option> </select> </p> ●PHP $hada = 0; $hada = $_POST["hada"]; $type = $_POST["type"]; if($type == 1){ $hada1 = "敏感肌"; $hada2 = "脂性肌"; $hada3 = "乾燥肌"; }else if($type == 2){ $hada1 = "乾燥肌"; $hada2 = "敏感肌"; $hada3 = "脂性肌"; } else { $hada1 = "脂性肌"; $hada2 = "敏感肌"; $hada3 = "乾燥肌"; }

    • ベストアンサー
    • PHP
  • 1ページで2つのフォームをチェックしたいのですが…

    1つのページに同じ項目のフォームを2つ作りました。 そしてそれにチェックを設けたいと思いフォームチェックのスクリプトを入れてみました。 が、しかし、、 上のフォームはチェックが動くのですが、 下のフォームは何を入れてもチェックがエラー検出をして 次のページに進めなくなってしまいます。。 こちらはどのようにしたら両方のチェックが働きつつ 次のページに値を渡せるのでしょうか? 正しい書き方を教えてください。 よろしくお願いします。 <html> <head> <script language="JavaScript"> <!-- // 入力チェック function chkInputForm() { Error = new Array(); i = 0; // お客様の業種入力チェック if (document.forms[0].elements["part"].selectedIndex == 0) { Error[i] = "[ 1・2の選択 ] は必須項目です。"; i++; } // 会社(事務所)のご住所入力チェック if (document.forms[0].elements["pref"].selectedIndex == 0) { Error[i] = "[住まい] は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("以下の項目は必須です。\n\n"+ErrorText); return false; } return true; } //--> </script> </head> <body> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> </body> </html>

  • for in と 接続演算子について

    <!-- function check(){ var flag = 0; if(document.registform.user.value==""){ flag = 1; var error1 = document.getElementById("error1"); if(error1 == null){ var element1=document.createElement("div"); element1.innerHTML='<span class="error0" id="error1">ユーザー名を入力してください。</span>'; var ojbody1=document.getElementById("td_error1"); ojbody1.appendChild(element1); } } if(document.registform.pass.value==""){ flag = 1; var error2 = document.getElementById("error2"); if(error2 == null){ var element2=document.createElement("div"); element2.innerHTML='<span class="error0" id="error2">パスワードを入力してください。</span>'; var ojbody2=document.getElementById("td_error2"); ojbody2.appendChild(element2); } } if(document.registform.pass2.value==""){ flag = 1; var error3 = document.getElementById("error3"); if(error3 == null){ var element3=document.createElement("div"); element3.innerHTML='<span class="error0" id="error3">パスワード(確認)を入力してください。</span>'; var ojbody3=document.getElementById("td_error3"); ojbody3.appendChild(element3); } } if(flag == 0){ return true; }else{ return false; } } //--> javascript初心者です。 この処理をfor(key in array)を使って簡単にできるかも... と思ったんですが接続演算子の使い方がよくわかりません。 プログラム自体初心者独学で手探りでやっているため考え方が間違っている場合などありましたらアドバイス等もいただけたらうれしいです。 if(document.registform.user(☆).value==""){ flag = 1; var error1(☆) = document.getElementById("error1(☆)"); if(error1(☆) == null){ var element1(☆)=document.createElement("div"); element1(☆).innerHTML='<span class="error0" id="error1(☆)">ユーザー名(☆)を入力してください。</span>'; var ojbody1(☆)=document.getElementById("td_error1(☆)"); ojbody1.appendChild(element1(☆)); }} (☆)のところが接続演算子が使えればと思いました。 例えばvar element + key でelement1の変数というのは無理なのでしょうか? もし可能ならgetElementById("error + key ")はどういった書き方をすればよいでしょうか? よろしくお願いします。

  • プルダウン2つで別項目に値を代入したい.その2

    同じような質問ですみません。プルダウン2つで別項目に値を代入する方法のアドバイスを参考にこんなの作ったんですがうまくいかないです。どこがおかしいですか? <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でアラートを出したい

    こんにちは・・・。 前回はphpで同じ質問をしたのですが、今回はjavascriptを使わなくてはなりません・・・OTL 重複質問のようで申し訳ないのですが、 連絡先方法【必須】をラジオボタンで選択した際、選択した項目(テキストエリア)を必須にしたいのです。 連絡先方法を必須にするやり方はわかりますが、それ以降がわかりません。。 どなたかご教授願います!! <input type="radio" name="renraku" value="TEL">TEL   <input type="radio" name="renraku" value="FAX">FAX   <input type="radio" name="renraku" value="E-Mail">E-Mail function CheckInput(){ /*----- check -----*/ flag = 0; for ( i = 0 ; i < document.form_1.renraku.length ; i++){ if (document.form_1.renraku[i].checked){ flag = 1; } } if (!flag){ alert('御希望連絡方法を選択して下さい'); return false; } } この続きを教えて下さい・・・お願い致します!

  • チェックボックスの選択チェック

    ラジオボタンの選択チェック、セレクトボタンの選択チェックのあとにチェックボックスの選択チェックをしたいのですが、どのように入れればよいのでしょうか。教えてください。 ↓参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++) if(document.form1.seibetu[i].checked)flag=false; } if(flag){ alert('性別が選択されていません'); return false; } if(document.form1.nenrei.value=="")flag=true; if(flag){ alert('年齢が選択されていません'); return false; } if( document.form1.Q1.length){ flag=1; var i; for(var i=0; i<document.form1.Q1.length; i++) if(document.form1.Q1[i].checked)flag=false; if(flag){ alert('Q1が選択されていません'); return false; } else {★★★ここに入れたい★★★   ;} } }

専門家に質問してみよう