ドロップダウンリストボックスが選択されていない場合にアラートウインドウを出したいのですがうまくいきません。
どこが間違っているのでしょうか?
初歩的な質問で申し訳ありませんがご指摘よろしくお願いいたします。
<SCRIPT LANGUAGE="JavaScript">
function check(fm) {
if (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択' & fm.color.options[fm.color.selectedIndex].text == 'カラーを選択') {
alert("サイズとカラーを選択してください!");
return false;
}
else {
if (fm.color.options[fm.color.selectedIndex].text == 'カラーを選択') {
alert("カラーを選択してください!");
return false;
}
else (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択') {
alert("サイズを選択してください!");
return false;
}
}
}
</script>
</head>
<body>
<FORM name="fm" onsubmit="return check(this)" action="" method="POST">
<SELECT name="color"><OPTION>カラーを選択</OPTION><OPTION>赤</OPTION><OPTION>青</OPTION></SELECT>
<SELECT name="size"><OPTION>サイズを選択</OPTION><OPTION>S</OPTION><OPTION>M</OPTION></SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>
</body>
</html>
No.3
- 回答日時:
#2でさらっと書きましたがtextではなく
valueでチェックするようにします。
なぜならformで送られるデータ通常はvalueですから。
そのデータをチェックするのが効率的なのです。
確かにoptionにvalueを指定しないとtextが送られる
ようですが、プルダウンリストに表示するために整形
したりすることもあり、formで送るのに効率的だとは
いえません。できればvalueで送ることをお勧めします。
ですのでソース的にはこんなかんじ。
<SCRIPT LANGUAGE="JavaScript">
function check(fm) {
if(fm.size.options[fm.size.options.selectedIndex].value=="" ){
alert("サイズを選択してください!");
return false;
}else if(fm.color.options[fm.color.options.selectedIndex].value==""){
alert("カラーを選択してください!");
return false;
}
return true;
}
</script>
</head>
<body>
<FORM name="fm" onsubmit="return check(this)" action="" method="POST">
<SELECT name="color">
<OPTION>カラーを選択</OPTION>
<OPTION value="red">赤</OPTION>
<OPTION value="blue">青</OPTION>
</SELECT>
<SELECT name="size">
<OPTION value="onsize">ワンサイズ</OPTION>
</SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>
yambejpさん、丁寧に教えていただきありがとうございます。
早速試してみました。
しかしながらよくよく考えてみると、このフォーム部分はHTMLなどまったくわからない素人のクライアントが頻繁に変更したり、追加したりすることを思い出しました。
このフォームだと<option>を<option value="red">や<option value="onsize">のように<option>ひとつずつに値を指定しなければなりません。
これは素人にはちょっと酷なような気がします。
美しくないJava Scriptですが、実用面を重視して最初のソースを使うことにします。
いろいろお騒がせして申し訳ありませんでした。
まだJava Scriptはわからないことだらけですのでまた近日中にお世話になるかもしれません。
そのときはまたぜひよろしくお願いいたします。
No.2
- 回答日時:
selectedIndexはoptionsのプロパティです。
fm.xxx.options.selectedIndexが0かどうか
(つまりは選択されていない)をみるか、
valueを与えてvalue==""を見るのが普通でしょう。
テキストでチェックするのはあまり美しくないと
思いますが・・・。
<SCRIPT LANGUAGE="JavaScript">
function check(fm) {
if(fm.size.options.selectedIndex==0 ){
alert("サイズを選択してください!");
return false;
}else if(fm.color.options.selectedIndex==0){
alert("カラーを選択してください!");
return false;
}
return true;
}
</script>
</head>
<body>
<FORM name="fm" onsubmit="return check(this)" action="drop.htm" method="POST">
<SELECT name="color">
<OPTION>カラーを選択</OPTION>
<OPTION value="red">赤</OPTION>
<OPTION value="blue">青</OPTION>
</SELECT>
<SELECT name="size">
<OPTION>サイズを選択</OPTION>
<OPTION value="s">S</OPTION>
<OPTION value="m">M</OPTION>
</SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>
</body>
</html>
この回答への補足
yambejpさん、早速のご回答ありがとうございます。
Java scriptは他所からコピペして動作させるのがやっとで、とてもとても美しいコードなんて書けません。
難しいコードを短時間で華麗に書く諸先輩の姿を遠巻きに眺めるのが関の山です。
さて早速教えていただいたコードを試してみました。
最初に提示したコードは問題なく動作しました。
ただ、ものによっては▼こういう場合もあります。
ドロップダウンリストボックスを使っているもののサイズがワンサイズだけのような場合です。
こういう場合はどのように対処したらよいのでしょうか?
もし何かよい方法がありましたら教えてください。
よろしくお願いいたします。
<FORM name="fm" onsubmit="return check(this)" action="" method="POST">
<SELECT name="color"><OPTION>カラーを選択</OPTION><OPTION>赤</OPTION><OPTION>青</OPTION></SELECT>
<SELECT name="size"><OPTION>ワンサイズ</OPTION></SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- 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 セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
return trueとreturn falseの用...
-
JavaScriptde途中で、「exit」...
-
Visual Studioのデザインでの非...
-
ラジオボタンとセレクトボック...
-
フォームの入力チェックをする...
-
ドロップダウンリストボックス...
-
COBOLの数字チェック
-
未選択のチェック方法を教えて...
-
チェックボックスの有無判定
-
JavaScriptで日付の正規表現の方法
-
メールアドレスの入力チェック...
-
<JavaScript>tableタグを入力不...
-
プルダウン 項目が多いので先頭...
-
submitした値を返したい
-
【jQuery】input nameの文字列...
-
テキストボックスの値同士を比...
-
ボタン2回押しを無効にしたい
-
javascriptでセレクトボックス...
-
JavaScriptにて動的に配列を作...
-
Selectボックスの一覧表示方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
COBOLの数字チェック
-
ラジオボタンのNullチェック
-
未入力のラジオボタンに、alert...
-
JavaScriptde途中で、「exit」...
-
正規表現で複数マッチ条件で悩...
-
コピペを禁止するtextarea
-
ツリービューのチェックボック...
-
フォームの入力チェックをする...
-
度胸試しのJavaScript
-
Visual Studioのデザインでの非...
-
一度しか押せないボタンについて
-
form の onSubmit がコールされ...
-
onSubmit=の後ろは複数可能でし...
-
チェックボックスの有無判定
-
テキストボックスに数字しか入...
-
変数の値によってsubmit後の動...
-
JavaScript ログアウト処理
-
IE7のJavascriptで return fals...
おすすめ情報