- 締切済み
背景色を変えて未入力チェックをしたいのですが。。。
アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- // 入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック＆ハイライト<BR> <FORM name="myFORM" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所：<INPUT class="white" name="Address"><BR> 氏名：<INPUT class="white" name="yourName"><BR> 年齢：<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話 <INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器 <INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>
- isseynose
- お礼率52% (9/17)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
私の回答は全て指定必須という単純な場合に利用できるもので、 条件が複雑になる場合、（多少の無駄があったとしても）ループさせるより項目ごとにチェックを重ねていったほうがいいかと思います。
- steel_gray
- ベストアンサー率66% (1052/1578)
#3です。 テキストフィールドの色が戻らないのはミスでした。 サンプルはselectがあった場合の処理を追加したcheckFormです。 なお、補足で投稿されているselect周りはlabelの付け方が変でした。 <label>で フォーム部品と関連テキストを囲うようにしてください。 例<label for="XXX"><select id="XXX">～</select>年</label> <script type="text/javascript"> <!-- // 入力チェック function checkForm(cForm){ var total = cForm.elements.length; var flag = true; var radioCheckboxFlag = new Array; var radioCheckboxObj = new Array; for (var i=0; i<total; i++) { if(cForm.elements[i].type == 'text') { cForm.elements[i].className = ''; if (cForm.elements[i].value == "") { cForm.elements[i].className = 'error_field'; flag = false; } } else if(cForm.elements[i].type == 'radio' || cForm.elements[i].type == 'checkbox') { radioCheckboxFlag[cForm.elements[i].name] |= cForm.elements[i].checked; if(! radioCheckboxObj[cForm.elements[i].name]) radioCheckboxObj[cForm.elements[i].name] = new Array(); radioCheckboxObj[cForm.elements[i].name].push(cForm.elements[i]); } else if(cForm.elements[i].type.match(/select/i)) { cForm.elements[i].parentNode.className = ''; if (cForm.elements[i].value == "") { cForm.elements[i].parentNode.className = 'error_field'; flag = false; } } } for(var x in radioCheckboxFlag) { for(var i=0;radioCheckboxObj[x][i];i++) radioCheckboxObj[x][i].parentNode.className = ''; if(! radioCheckboxFlag[x]) { for(var i=0;radioCheckboxObj[x][i];i++) { radioCheckboxObj[x][i].parentNode.className = 'error_field'; } flag = false; } } if (! flag) alert("入力漏れがあるみたいよ"); else alert("登録します、お疲れ様でした。"); return flag; } // --> </script>
補足
回答ありがとうございました。未入力項目についてはイメージどおりのチェックが出来てすっごく感動しました！！しかし自分の考えが至らずまだまだ問題点が山済みです。 下記のイメージように質問項目の中で分岐がある場合です。 片方をチェックした場合にもう一方はチェックしなくて良いようにしたいのですがどうしたらいいでしょうか？今のチェック方法で行くと全て入力しないと登録が完了しないので少し困っています。 助けて頂いた入力チェックのscriptを使用して入力チェックをかけるようにしたいのですがうまくいきません。 何度も申し訳ないのですがよろしくお願いします。 <BODY><TABLE width="820" height="124"><TBODY><TR onmouseover="this.style.backgroundColor='#ffffcc'" onmouseout="this.style.backgroundColor='#ffffff'"><TD valign="middle" bgcolor="#ffffcc" height="49" width="175"><FONT color="#0000ff">*<B>発生日時</B>はいつ？</FONT></TD><TD height="49" valign="bottom" width="629"> <LABEL for="hakchk"><INPUT type="checkbox" name="hakchk" id="hakchk" value="doujitu">発見と同日 <BR> <BR> </LABEL><LABEL for="hakmaechk"><INPUT type="checkbox" id="hakmaechk" name="hakmaechk" value="tigauhi"> 発見日は <INPUT name="hasmae" type="text" size="28" id="hasmae"> <INPUT type="button" value="カレンダー" onclick="wrtCalendar(event,this.form.hasmae,'gg年mm月dd日(aa)')" id="Calendar"> <SELECT name="hasji" id="hasji"> <OPTION value="0">0</OPTION> <OPTION value="1">1</OPTION> <OPTION selected> </OPTION> </SELECT>時 <SELECT name="hashun" id="hashun"> <OPTION value="00">00</OPTION> <OPTION value="01">01</OPTION> <OPTION value="02">02</OPTION> <OPTION selected></OPTION> </SELECT>分<BR> <FONT size="-1">※どちらかにチェックをつけてください。</FONT></LABEL></TD></TR><TR onmouseover="this.style.backgroundColor='#ffffcc'" onmouseout="this.style.backgroundColor='#ffffff'"><TD valign="middle" bgcolor="#ffffcc" height="8" width="175"><FONT color="#0000ff">*<B>発生場所</B>はどこ？</FONT></TD><TD height="8" width="629"><SELECT name="basyo"> <OPTION value="浴室">浴室</OPTION> <OPTION value="トイレ">トイレ</OPTION> <OPTION selected>選択してね</OPTION> </SELECT> <INPUT id="checkCmt" type="checkbox" name="haseibasyo">その他 <FONT size="-1"> <INPUT id="uComment" name="tabasyo" value="発生場所がその他の場合入力してください" size="61"> </FONT></TD></TR></TBODY></TABLE></BODY> </HTML>
- steel_gray
- ベストアンサー率66% (1052/1578)
<input type="radio/checkbox"> への背景色の指定は、 効かないブラウザも多い(Netscape7,Firefox2,Safari3では効かないのを確認)ので、少し工夫がいるかと思います。 （余談ですが、Operaはradioボタンの○、checkboxの□の内側に色が付く） 以下はサンプルですので参考に。 ※背景色の問題の解決も兼ねてlabel要素をinputに付けています。 ※全ての項目が省略時エラーになるように組んでいます。 ※送信ボタンをtype="submit"に変更し、checkForm関数をformのonsubmitで呼び出すようにしています。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>フォーム内容の入力チェック</title> <style type="text/css"> <!-- .error_field{ background-color:#FF8080; } --> </style> <script type="text/javascript"> <!-- // 入力チェック function checkForm(cForm){ var total = cForm.elements.length; var flag = true; var radioCheckboxFlag = new Array; var radioCheckboxObj = new Array; for (var i=0; i<total; i++) { if(cForm.elements[i].type == 'text') { cForm.elements[i].style.backgroundColor = ''; if (cForm.elements[i].value == "") { cForm.elements[i].className = 'error_field'; flag = false; } } else if(cForm.elements[i].type == 'radio' || cForm.elements[i].type == 'checkbox') { radioCheckboxFlag[cForm.elements[i].name] |= cForm.elements[i].checked; if(! radioCheckboxObj[cForm.elements[i].name]) radioCheckboxObj[cForm.elements[i].name] = new Array(); radioCheckboxObj[cForm.elements[i].name].push(cForm.elements[i]); } } for(var x in radioCheckboxFlag) { for(var i=0;radioCheckboxObj[x][i];i++) radioCheckboxObj[x][i].parentNode.className = ''; if(! radioCheckboxFlag[x]) { for(var i=0;radioCheckboxObj[x][i];i++) { radioCheckboxObj[x][i].parentNode.className = 'error_field'; } flag = false; } } if (! flag) alert("入力漏れがあるみたいよ"); else alert("登録します、お疲れ様でした。"); return flag; } // --> </script> </head> <body> フォーム内容の入力チェック＆ハイライト <form name="myFORM" method="post" onsubmit="return checkForm(this)"> <table border="1" cellpadding="5"> <tbody> <tr> <td> <label for="Address">住所：<input class="white" name="Address" id="Address"></label><br> <label for="yourName">氏名：<input class="white" name="yourName" id="yourName"></label><br> <label for="yourAge">年齢：<input class="white" name="yourAge" id="yourAge"></label> </td> </tr> <tr> <td id="aaa">電話 <label for="Keitai"><input type="radio" name="電話" value="1" id="Keitai">携帯</label> <label for="Kousyu"><input type="radio" name="電話" value="2" id="Kousyu">公衆電話</lable> </td> </tr> <tr> <td>容器 <label for="Bin"><input type="radio" name="容器" value="1" id="Bin">ビン</label> <label for="Pet"><input type="radio" name="容器" value="2" id="Pet">ペットボトル</label> </td> </tr> <tr> <td> <label for="Kasai"><input type="checkbox" name="chk" value="3" id="Kasai">火災保険</label><br> <label for="Seimei"><input type="checkbox" name="chk" value="4" id="Seimei">生命保険</label><br> <label for="Zisin"><input type="checkbox" name="chk" value="5" id="Zisin">地震保険</label> </td> </tr> <tr> <td align="center"><input type="submit" value="登録"></td> </tr> </tbody> </table> </form> </body> </html>
補足
回答ありがとうございます。本番フォームに載せ変えて動作確認をしていたのですが、オプションメニューもチェック項目に付け加えて行いたいのです。 それからテキストボックスの入力が済んでいる項目は色を白にしたいのですが可能でしょうか？ 下記のようなイメージでしたいのですが。。何度もすみませんがお願いします。 <tr> <td>経験年数 <label for="keinen"><SELECT name="keinen"> <OPTION value="0">0</OPTION> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> <OPTION value="6">6</OPTION> <OPTION value="7">7</OPTION> <OPTION value="8">8</OPTION> <OPTION value="9">9</OPTION> <OPTION value="10">10</OPTION> <OPTION selected></OPTION> </SELECT></label>年 <label for="keituki"><SELECT name="keituki"> <OPTION value="0">0</OPTION> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> <OPTION value="6">6</OPTION> <OPTION value="7">7</OPTION> <OPTION value="8">8</OPTION> <OPTION value="9">9</OPTION> <OPTION value="10">10</OPTION> <OPTION value="11">11</OPTION> <OPTION value="12">12</OPTION> <OPTION selected> </OPTION> </SELECT></label>月</td> </tr>
- VCAT
- ベストアンサー率20% (16/79)
No.2さんのスクリプトですが、それはでチェック判別が混乱を起こす危険なコードですね。 それにしても専門家さんがホームページビルダーですか？ この質問者はあちこちにマルチポストをしまくっていて問題ありの ようです。
お礼
すみませんでした。マルチするつもりはなかったのですがjavascript初心者な者で動作が上手くいかずに焦っていました。 投稿も上手くいかなくて同じ内容で質問をしてしまいマルチのような誤解をまねいていしまいましたがエチケットに違反するつもりはなかったのです。以後気をつけます。
- o84
- ベストアンサー率31% (128/407)
<HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- // 入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++){ cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == ""){ cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag2 = BgChange(); if (flag == true || flag2 == true ){ alert("入力漏れがあるみたいよ"); } else{ alert("登録します、お疲れ様でした。"); } return false; } //チェックボックス var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ var chkflg = false; //保険 var telflg = false; //電話 var youkiflg = false; //容器 //保険をチェック for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ chkflg = true; break; } } //チェック結果で色を変える for(i=0; i<document.myFORM.chk.length; i++){ if( chkflg == true ){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } //電話をチェック for(i=0; i<document.myFORM.tel.length; i++){ if(document.myFORM.tel[i].checked){ telflg = true; break; } } //チェック結果で色を変える for(i=0; i<document.myFORM.tel.length; i++){ if( telflg == true ){ document.myFORM.tel[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.tel[i].style.backgroundColor = ChangedColorCheckbox; } } //容器をチェック for(i=0; i<document.myFORM.youki.length; i++){ if(document.myFORM.youki[i].checked){ youkiflg = true; break; } } //チェック結果で色を変える for(i=0; i<document.myFORM.youki.length; i++){ if( youkiflg == true ){ document.myFORM.youki[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.youki[i].style.backgroundColor = ChangedColorCheckbox; } } if( chkflg == true && telflg == true && youkiflg == true ){ return false; } else{ return true; } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック＆ハイライト<BR> <FORM name="myFORM" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所：<INPUT class="white" name="Address"><BR> 氏名：<INPUT class="white" name="yourName"><BR> 年齢：<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話 <INPUT type="radio" name="tel" value="1">携帯<INPUT type="radio" name="tel" value="2">公衆電話</TD> </TR> <TR> <TD>容器 <INPUT type="radio" name="youki" value="1">ビン <INPUT type="radio" name="youki" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>
- o84
- ベストアンサー率31% (128/407)
そりゃそうでしょうね。 ラジオボタンの背景色を変えているロジックがありませんから。
お礼
回答ありがとうございます。イメージどおりのチェックが出来て凄く嬉しいです。 早速本番のフォーマットに載せ換えて動作確認をしてみようと思います。チェック項目が多くて未入力項目のアラートが何度も出てくるのが面倒で今回の背景色変更を考えたのですがなかなか出来なくて苦労していました。ありがとうございます。
お礼
今回は相談に乗っていただいてありがとうございました。 アドバイスのとおり質問項目をもう少し考え直しみようと思います。 イメージどおりのチェックが出来て大変満足できています。 ありがとうございました。