重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

複数条件の入力チェックについて

解決済

  • 質問者：73nori
  • 質問日時：
  • 回答数：2件

入力チェックで悩んでいます。

やりたいことは現在の内容に加えて
・購入数量が1の時に2個目の商品内容が選択された時にアラート。
・購入数量が2の時に2個目の商品内容が選択されていない時にアラート。

書き方は色々あると思うのですが、これ以外にも入力チェックを入れたいので、出来れば現状と同じような書き方でチェック出来ればありがたいです。

<html>
<head>
<title>注文フォーム</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--
function Check(){
p="";

ch1=document.F1.order[0].selected;
ch2=document.F1.order1[0].selected;

if(ch1==true){
alert("購入数量が未選択です。");
return false;
}
else if(ch2==true){
alert("1個目の商品が未選択です。");
return false;
}
else{
return true;
}
}
//-->
</script>
</head>
<body text="#000000">
<FORM name=F1 onsubmit="return Check()" action="./cgi-bin/order.cgi" method="post">
<table>
<tr>
<td> 購入数
<select name="order">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<select name="order1">
<option>1個目選択</option>
<option>茶色　S</option>
<option>茶色　M</option>
<option>茶色　L</option>
</select>
<select name="order2">
<option>2個目選択</option>
<option>茶色　S</option>
<option>茶色　M</option>
<option>茶色　L</option>
</select>
<br>
<input type="submit" name="submit" value="内容確認">
<input type="reset" name="submit2" value="リセット">
</td>
</tr>
</table>
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

商品アイテム数が増えればもっと効率的な書き方を


した方がいいかもしれませんね。
気をつけたほうがいい点としては
「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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速回答いただきましてありがとうございます。
やりたいことが実現できたどころか、思いもしなかった完璧なものが出来ました。

アドバイスまでいただき、本当に感謝しています。
また何か機会がございましたらよろしくお願いいたします。

通報する
お礼日時：2006/03/10 16:00

No.1

  • 回答者： yambejp
  • 回答日時：

ご希望のものとは若干ことなりますが、


こんな感じの方が実用的ではないですか？

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

すばらしい！すばらし過ぎます！
とってもユーザーに優しい入力チェックですね。
是非使わせていただきます。

もう一点できましたら教えていただきたいのですが、購入数2を選択したにもかかわらず、2個目の商品選択しないでsubmitした時にアラートを出したいのです。

お時間があればで結構です。
ありがとうございました。

通報する
お礼日時：2006/03/10 10:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報