- ベストアンサー
入力チェックで悩んでいます
- 入力チェックで悩んでいます。現在の内容に加えて、購入数量が1の時に2個目の商品内容が選択された時にアラートを表示し、購入数量が2の時に2個目の商品内容が選択されていない時にアラートを表示する方法について教えてください。
- 現在の入力チェックに加えて、購入数量が1の場合に2個目の商品内容が選択された場合はアラートを表示し、購入数量が2の場合に2個目の商品内容が選択されていない場合もアラートを表示する方法について教えてください。
- 現在の入力チェックに加えて、購入数量が1の場合に2個目の商品内容が選択された場合はアラートを表示し、購入数量が2の場合に2個目の商品内容が未選択の場合もアラートを表示する方法について教えてください。
- 73nori
- お礼率96% (29/30)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
商品アイテム数が増えればもっと効率的な書き方を した方がいいかもしれませんね。 気をつけたほうがいい点としては 「optionにはかならずvalueを指定してあげる」 ということ。これでだいぶデータへのアクセスが 楽になると思います。 <html> <head> <title>注文フォーム</title> <script language="JavaScript"> <!-- function checkForm(f){ var val_order=f.order.options[f.order.selectedIndex].value; var errText=""; if(val_order==0) errText="購入数量が未選択です。"; if(val_order>=1 && f.order1.options[f.order1.selectedIndex].value=="") errText="1個目の商品が未選択です。"; if(val_order>=2 && f.order2.options[f.order2.selectedIndex].value=="") errText="2個目の商品が未選択です。"; if(errText=="") return true; alert(errText); return false; } function changeDisable(obj){ if(obj.options[obj.selectedIndex].value>=1) obj.form.order1.disabled=false if(obj.options[obj.selectedIndex].value>=2) obj.form.order2.disabled=false } function resetFunc(f){ f.order1.disabled=true f.order2.disabled=true } //--> </script> </head> <body text="#000000"> <FORM name=F1 onReset="resetFunc(this)" onSubmit="return checkForm(this)" action="./cgi-bin/order.cgi" method="post"> <table> <tr> <td> 購入数 <select name="order" onChange="changeDisable(this)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> <select name="order1" disabled> <option value="">1個目選択</option> <option value="brown_s">茶色 S</option> <option value="brown_m">茶色 M</option> <option value="brown_l">茶色 L</option> </select> <select name="order2" disabled> <option value="">2個目選択</option> <option value="brown_s">茶色 S</option> <option value="brown_m">茶色 M</option> <option value="brown_l">茶色 L</option> </select> <br> <input type="submit" value="内容確認"> <input type="reset" value="リセット"> </td> </tr> </table> </form> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
ご希望のものとは若干ことなりますが、 こんな感じの方が実用的ではないですか？ <html> <head> <title>注文フォーム</title> <script language="JavaScript"> <!-- function Check(){ //略 } function changeDisable(obj){ if(obj.options[obj.selectedIndex].value>=1) obj.form.order1.disabled=false if(obj.options[obj.selectedIndex].value>=2) obj.form.order2.disabled=false } function resetFunc(f){ f.order1.disabled=true f.order2.disabled=true } //--> </script> </head> <body text="#000000"> <FORM name=F1 onReset="resetFunc(this)" onsubmit="return Check()" action="./cgi-bin/order.cgi" method="post"> <table> <tr> <td> 購入数 <select name="order" onChange="changeDisable(this)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> <select name="order1" disabled> <option>1個目選択</option> <option>茶色 S</option> <option>茶色 M</option> <option>茶色 L</option> </select> <select name="order2" disabled> <option>2個目選択</option> <option>茶色 S</option> <option>茶色 M</option> <option>茶色 L</option> </select> <br> <input type="submit" value="内容確認"> <input type="reset" value="リセット"> </td> </tr> </table> </form> </body> </html>
お礼
すばらしい！すばらし過ぎます！ とってもユーザーに優しい入力チェックですね。 是非使わせていただきます。 もう一点できましたら教えていただきたいのですが、購入数2を選択したにもかかわらず、2個目の商品選択しないでsubmitした時にアラートを出したいのです。 お時間があればで結構です。 ありがとうございました。
お礼
早速回答いただきましてありがとうございます。 やりたいことが実現できたどころか、思いもしなかった完璧なものが出来ました。 アドバイスまでいただき、本当に感謝しています。 また何か機会がございましたらよろしくお願いいたします。