- ベストアンサー
別フレームへの必須入力チェック処理を行ないたい
ページ構成がフレーム仕様になっていて、ヘッダページ部分にある確認ボタンを押すことで、 メインページ（フレーム名：main）部分にある入力項目の複数項目に対する必須入力チェックを行ないたいのですが、うまく処理が実行されません。 if文の条件を、if (parent.main.document.forms[0].elements[0].value == "")のようにすると、 正しく処理されますが、入力項目の数だけ記述しなければならず、さらに入力項目の数は決まっていません。 どなたか解決策をご教授いただけませんでしょうか。 <SCRIPT language="javascript"> <!-- function formchk() { if (parent.main.document.f1.food.value == "") { alert("食べ物 の項目が未入力です"); parent.main.document.f1.food.focus(); return false; } if (parent.main.document.f1.drink.value == "") { alert("飲み物 の項目が未入力です"); parent.main.document.f1.drink.focus(); return false; } } // --> </SCRIPT>
- ski_boader1977
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2の方の言うとおりですね。 なので、以下のようにすれば出来ます。 チェック順は、food1,food2,food3,drink1,drink2,drink3 で行います。 <SCRIPT language="javascript"> <!-- function formchk() { with(parent.main.document.f1){ food_len = food.length; for(i = 0; i < food_len; i++){ if (food[i].value == "") { alert("食べ物 の項目が未入力です"); food[i].focus(); return false; } } drink_len = drink.length; for(j = 0; j < drink_len; j++){ if (drink[j].value == "") { alert("飲み物 の項目が未入力です"); drink[j].focus(); return false; } } } } // --> </SCRIPT>
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>一番最後の入力項目だけに処理が行なわれています。 >同じname属性のフィールドがあることが原因なのでしょうか。 同じname属性が複数ある時は、配列で処理しないといけません。 配列の大きさはlengthでわかります 例えば、 f1.elements["food"].length でfoodの項目数がわかります。
お礼
BLUEPIXYさん、回答ありがとうございました。 基本的なプログラム知識がなかったので、配列の使い方などについて調べて、 うまく処理ができるようになりました。 本当にありがとうございます!!
- kappa_neko
- ベストアンサー率50% (14/28)
with()で解決しませんか? <SCRIPT language="javascript"> <!-- function formchk() { with(parent.main.document.f1){ if (food.value == "") { alert("食べ物 の項目が未入力です"); food.focus(); return false; } if (drink.value == "") { alert("飲み物 の項目が未入力です"); drink.focus(); return false; } } } // --> </SCRIPT>
補足
kappa_nekoさん、回答ありがとうございます。 with()を入れて試してみましたが、一番最後の入力項目だけに処理が行なわれています。 チェック対象となるメインページ部のHTMLは以下のとおりです。 同じname属性のフィールドがあることが原因なのでしょうか。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM name="f1"><BR> <TABLE border="1"> <TBODY> <TR> <TD> </TD> <TD>食べ物</TD> <TD>飲み物</TD> </TR> <TR> <TD>1</TD> <TD><INPUT size="20" type="text" name="food"></TD> <TD><INPUT size="20" type="text" name="drink"></TD> </TR> <TR> <TD>2</TD> <TD><INPUT size="20" type="text" name="food"></TD> <TD><INPUT size="20" type="text" name="drink"></TD> </TR> <TR> <TD>3</TD> <TD><INPUT size="20" type="text" name="food"></TD> <TD><INPUT size="20" type="text" name="drink"></TD> </TR> </TBODY> </TABLE> <BR> </FORM> </BODY> </HTML>
お礼
kappa_nekoさん、回答ありがとうございました。 ご親切にサンプルコードまで記載していただき、本当に助かりました。 おかげさまで、仕様通りの処理ができるようになりました。 本当にありがとうございます!!