入力チェックで悩んでいます。
やりたいことは現在の内容に加えて
・購入数量が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>
No.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>
早速回答いただきましてありがとうございます。
やりたいことが実現できたどころか、思いもしなかった完璧なものが出来ました。
アドバイスまでいただき、本当に感謝しています。
また何か機会がございましたらよろしくお願いいたします。
No.1
- 回答日時:
ご希望のものとは若干ことなりますが、
こんな感じの方が実用的ではないですか?
<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した時にアラートを出したいのです。
お時間があればで結構です。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでセレクトボックス...
-
検索窓とプルダウンメニュー機...
-
option 選択による表示&非表示
-
New OPTIONで作った<Select>の<...
-
select要素のvalueを配列で取得...
-
入力フォームでdisabledによる...
-
selectを変更不可にしたい
-
【javascript】連想配列からセ...
-
プルダウンで選択した項目にあ...
-
javascriptでoptionタグを削除...
-
連想配列からセレクトボックス...
-
全てのselect要素をデフォルト...
-
動的なセレクトボックスの生成...
-
セレクトメニューの選択項目変...
-
フォーム内で記入したクエリ送...
-
正規表現で複数マッチ条件で悩...
-
【javascript・PHP】プルダウン...
-
Jvasvriptのlengthで個数が取得...
-
return trueとreturn falseの用...
-
VBScriptでpingを実行(ブラウザ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報