質問 |
||
| QNo.4192588 | セレクトボックス の 選択規制 | |
|---|---|---|
| 質問者:hime_love |
今、フォームで入力画面を作っています。 その中にセレクトボックスが4つアリ、現在「未選択」の場合エラーチェックをするようにしています。 そして、ここにもうひとつのチェックを追加したいのですが皆目見当が付きません・・・ 条件 kaikai、bunkai1、bunkai2、heikai 全てが不参加の場合 "参加する会を最低一つは選択してください。"と言うコメントをだすというものです。 皆様よろしくお願いいたします。 ******** 現在の JavaScript ********* <SCRIPT language="JavaScript"> <!-- //フォームチェック function fcheck() { if(document.form1.kaikai.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai1.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai2.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.heikai.value == "未選択") { window.alert("選択してください"); return false; } } //--> </SCRIPT> ******** HTML内のフォーム ********* <table> <tr><th>1 ( * )</th> <td> <SELECT NAME="kaikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>2 ( * )</th> <td> <SELECT NAME="bunkai1"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>3 ( * )</th> <td> <SELECT NAME="bunkai2"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>4 ( * )</th> <td> <SELECT NAME="heikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> </table> |
|
困り度:
|
||
| 質問投稿日時: 08/07/21 10:09 |
||
回答良回答20pt |
|
| ANo.1 | たとえばこんな感じでフラグで管理するとよいでしょう。 スクリプトとスタイルシートは外部化しときました。 //hoge.htm <link rel="stylesheet" type="text/css" href="hoge.css"> <script type="text/javascript" src="hoge.js"></script> ******** HTML内のフォーム ********* <form onSubmit="return fcheck(this)"> <div> <div class="midasi">1 ( * )</div> <div> <SELECT NAME="kaikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT> </div> </div> <div> <div class="midasi">2 ( * )</div> <div> <SELECT NAME="bunkai1"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT> </div> </div> <div> <div class="midasi">3 ( * )</div> <div> <SELECT NAME="bunkai2"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT> </div> </div> <div> <div class="midasi">4 ( * )</div> <div> <SELECT NAME="heikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT> </div> </div> <input type="submit" value="check"> </form> //hoge.js function fcheck(f) { var list={kaikai:"開会",bunkai1:"分会1",bunkai2:"分会2",heikai:"閉会"}; var flg=false; for(var i in list){ if(f[i].value=="未選択"){ window.alert(list[i]+"を選択してください"); return false; } if(f[i].value=="参加") flg=true; } if(!flg) alert("参加する会を最低一つは選択してください。"); return flg; } //hoge.css .midasi{ font-weight:bold; float:left; } |
|---|---|
| 回答者:yambejp | |
| 種類:アドバイス どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/21 13:37 |
|
| |
| この回答へのお礼 | yambejpさん ご回答ありがとうございます。 >スクリプトとスタイルシートは外部化 こちらは諸所の事情により現実的ではないんです 折角教えていただいていながらすみませんm(_ _)m また、上記のスクリプトまとめて頂いたものを直接書いてもうまく動作しません。 他のチェック事項が全てスルーになってしまいます。 質問しておきながらまことに申し訳ございません。 このレスは下げさせていただきます。 まことに申し訳ございません。 |