- ベストアンサー
ドロップダウンリストボックスが未選択時にアラートウインドウを出したい。
ドロップダウンリストボックスが選択されていない場合にアラートウインドウを出したいのですがうまくいきません。 どこが間違っているのでしょうか？ 初歩的な質問で申し訳ありませんがご指摘よろしくお願いいたします。 <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>
- toutetsu
- お礼率35% (25/71)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
else (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択') この部分が間違ってます。 正しくは else if( ・・・・ それだけ直せば動いてるようですが。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
＃２でさらっと書きましたが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はわからないことだらけですのでまた近日中にお世話になるかもしれません。 そのときはまたぜひよろしくお願いいたします。
- yambejp
- ベストアンサー率51% (3827/7415)
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
- function validateFormについて
ショッピングサイトを制作しているWebデザイナーです。Java Scriptのfunction validateFormについて質問です。 商品をショッピングカートに入れる際、FormのsubmitでサーバーのASPにデータを受け渡す仕組みで、ユーザーがsubmitボタンをクリックした際、商品の選択項目（select）が選択されていないとエラーメッセージが出るようにしています。 選択項目（select name）は「Color」と「Size」とありますが、現在、エラーメッセージ用のJava Scriptを、 「ColorとSize両方チェック」 function validateForm() { //--------------------------------------------------- if (document.form1.Size.options.value == 'Error') { alert('Please select Size !') document.form1.Size.focus() return false } if (document.form1.Color.options.value == 'Error') { alert('Please select Color !') document.form1.Color.focus() return false } } 「Colorのみチェック」 function validateForm() { //--------------------------------------------------- if (document.form1.Color.options.value == 'Error') { alert('Please select Color !') document.form1.Color.focus() return false } } と2つ使い分けています。 この2つをひとつのファイル（.js）にまとめることはできますか？また、今後また新たな選択項目が出てきた時、ファイル（.js）を増やすのではなく、scriptの中身を追加して対応させていきたいのですが、そうするにはjava scriptをどのように記述すればいいでしょうか？ 分かる方、教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- フォームで複数の関数を１つにまとめる方法
フォームに関して、必須項目が未入力・未選択の場合に警告する JavaScriptを記述したいのですが、 複数のJavaScriptを１つにまとめるにはどうしたら良いのでしょうか。 具体的には、 【1】テキストフィールド未入力の場合に警告する 【2】メールアドレスが間違いor未入力の場合に警告する 【3】セレクトボックスが未選択の場合に警告する という３つを同じページで同時に設定する方法が分かりません。 記述した内容は下記の通りです。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【1】 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（必須にする項目を設定してください） if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.form1.field2.value == ""){ // 「ご住所」の入力をチェック flag = 1; // 設定終了 if(flag){ window.alert('必須項目に未入力がありました'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【2】 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（チェックする項目を設定してください） if(!document.form1.email.value.match(/.+@.+\..+/)){ flag = 1; } // 設定終了 if(flag){ window.alert('メールアドレスが正しくありません'); // メールアドレス以外が入力された場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【3】 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（チェックする項目を設定してください） if(document.form1.select1.options[document.form1.select1.selectedIndex].value == ""){// 「地域」の入力をチェック flag = 1; } else if(document.form1.select2.options[document.form1.select2.selectedIndex].value == ""){ // 「生年月」の入力をチェック flag = 1; } else if(document.form1.select3.options[document.form1.select3.selectedIndex].value == ""){ // 「生年日」の入力をチェック flag = 1; } // 設定終了 if(flag){ window.alert('選択されていません'); // 選択されていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【本文】 <form name="form1" onSubmit="return check()"> ■お名前：<input type="text" name="field1" size="30" style="ime-mode:active;"> ■メールアドレス：<input type="text" name="email" size="30" style="ime-mode:inactive;"> ■地域： <select name="select1"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> ・ ・ </select> ■ご住所<input type="text" name="field3" size="60" style="ime-mode:active;"> ■生年月日 <select name="select2"> <option>1</option> <option>2</option> ・ ・ </select>月 <select name="select3"> <option>1</option> <option>2</option> ・ ・ </select>日 </form> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ JavaScriptの記述経験が殆ど無いため、 出来る限り詳しくご教示願いたく、 よろしくお願い致します！
- ベストアンサー
- JavaScript
- validateForm firefoxでalertが表示されません
java scriptについて質問です。 ホームページ内のプルダウンメニューで、項目が選択されていない状態で「submit」ボタンが押された場合、「～を選択してください」というメッセージを表示させたいと思います。 そこで以下のようなfunction validateFormを書いたのですが、alertがIEでは表示されるのにfirefoxでは表示されません。 function validateForm() { if (document.form1.Prop1.options.value == 'Error') { alert('Please select aaa.') document.form1.Prop1.focus() return false } if (document.form1.Prop2.options.value == 'Error') { alert('Please select bbb.') document.form1.Prop2.focus() return false } if (document.form1.Prop3.options.value == 'Error') { alert('Please select ccc.') document.form1.Prop3.focus() return false } if (document.form1.Prop4.options.value == 'Error') { alert('Please select ddd.') document.form1.Prop4.focus() return false } if (document.form1.Prop5.options.value == 'Error') { alert('Please select eee.') document.form1.Prop5.focus() return false } } firefoxでもalertを表示させるには、どのようにすればいいでしょうか？ 教えてくださいませ。よろしくお願いします。
- 締切済み
- JavaScript
- radioボタンでも、うまくアラート処理したいのですが・・・
<SCRIPT LANGUAGE="JavaScript"> <!-- // ヌル及び空欄のチェックを行う function isFilled(elm) { if (elm.value == "" || elm.value == null) return false; else return true; } function isReady(form) { // 名前の空欄のチェックを行う if (isFilled(form.name) == false) { alert("お名前を入力して下さい。"); form.name.focus(); return false; } return true; } //--> </SCRIPT> フォームによるアンケートページを作成しているのですが、 textボックスで回答が書かれていなく、空欄の部分があったら アラートを出し、そのtextボックス部分に戻す、というような 上記プログラムの流れにしています。 textボックスではうまくいくのですが、radioボタンのとき、 うまくいきません(アラートは出るが、フォームに戻らない)。 回避策を教えてください。
- ベストアンサー
- JavaScript
- フォームのドロップダウンで未選択のチェックをしたいのですが、下記のよう
フォームのドロップダウンで未選択のチェックをしたいのですが、下記のようにしたのですがうまくいきません。・・・原因は id[1] だと思うのですが、こういう場合JavaScriptには、どのように記述すればよいのでしょうか？ ※ドロップダウンの name="id[1]" は、変更できません。 よろしくお願いします。 <script language="JavaScript"> <!-- function check(){ if(document.cart_quantity.id[1].selectedIndex == 0){ alert('選択してください'); return false; } return true; } //--> </script> <form name="cart_quantity" method="post" action="" onSubmit="return check()"> <select gtbfieldid="272" name="id[1]" id="attrib-1"> <option value="1" selected="selected">選択してください</option> <option value="2">いちご</option> <option value="3">みかん</option> <option value="4">りんご</option> </select> <input type="submit" value="送信" name="submit"> </form>
- ベストアンサー
- JavaScript
- javascriptでのアラート表示
javascriptで大変困っております。 ラジオボタン・テキストエリアにまたがったチェックアラートをだしたいのですが、うまくいきません。 <script> function form_check(f) { if (f.Q1.value == "") { alert("・未記入です！"); return false; } ・ ・ ・ if (f.Q6.value == "") { alert("・名前が未記入です！"); return false; } else return true; } function reset_conf() { if (confirm("フォーム内容をリセットします！\n\nよろしいですか？")) return true; else return false; } </script> -------- <FORM ACTION="hogehoge.cgi" METHOD="POST" onSubmit="return form_check(this)"> 教育:<INPUT TYPE="radio" NAME="Q1" VALUE="OK"> テスト:<INPUT TYPE="radio" NAME="Q2" VALUE="OK"> アンケート:<INPUT TYPE="radio" NAME="Q3" VALUE="OK"> AAA:<input name="Q4" type="text" /> BBB:<input name="Q5" type="text" /> CCC:<input name="Q6" type="text" /> <INPUT TYPE="hidden" NAME="number" VALUE="6"> <INPUT TYPE="submit" NAME="answer" VALUE="送信する"> <INPUT TYPE="reset" NAME="reset" VALUE="リセット"> </FORM> </form> ------- テキストエリアのアラートチェックは出来ない状態です。 すべてにチェックまたは、テキスト入力がされていないと送信できないようにしたいのです。 どうしたらよいでしょうか？
- 締切済み
- JavaScript
- ラジオボタンとセレクトボックスの選択チェック
ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }
- ベストアンサー
- その他([技術者向] コンピューター)
- セレクトボックス の 選択規制
今、フォームで入力画面を作っています。 その中にセレクトボックスが４つアリ、現在「未選択」の場合エラーチェックをするようにしています。 そして、ここにもうひとつのチェックを追加したいのですが皆目見当が付きません・・・ 条件 kaikai、bunkai1、bunkai2、heikai 全てが不参加の場合 "参加する会を最低一つは選択してください。"と言うコメントをだすというものです。 皆様よろしくお願いいたします。 ******** 現在の JavaScript ********* <SCRIPT language="JavaScript"> <!-- //フォームチェック function fcheck() { if(document.form1.kaikai.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai1.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai2.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.heikai.value == "未選択") { window.alert("選択してください"); return false; } } //--> </SCRIPT> ******** HTML内のフォーム ********* <table> <tr><th>1 ( * )</th> <td> <SELECT NAME="kaikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>2 ( * )</th> <td> <SELECT NAME="bunkai1"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>3 ( * )</th> <td> <SELECT NAME="bunkai2"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>4 ( * )</th> <td> <SELECT NAME="heikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> </table>
- ベストアンサー
- JavaScript
- 「SELECT」で選んでなかったらメッセージを…
HEAD部分 if(document.NYUURYOKU.CATEGORY.selectedIndex == 0){ alert('カテゴリを選択してください。'); document.NYUURYOKU.CATEGORY.focus(); return false; } 本文は <SELECT SIZE=10 NAME=CATEGORY><OPTION>ああ <OPTION>いい <OPTION>うう <OPTION>ええ <OPTION>おお </SELECT> こんな感じになっています。 何がいけないのでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptで日付計算してアラート
はじめまして。 どうやってJavaScriptでフォームの内容を取得して計算させるかわからなくて相談させてください。 単に今日の日付を取得して+10日後とかの表示はなんとかできたのですがなにぶん初心者ですのでそれ以上のことはさっぱりです＾＾； やりたいことはフォームで年、月、日を選択して検索ボタンを押すと検索のPHPにフォームの内容を送るというものです。 そこで、指定の日数以降、以前の日付を選ぶとアラートが出るようにしたいのです。（今日より30日以前と30日以降を選ぶとアラートがでる） ご教授のほどよろしくお願いします。 以下今まで作ったソースです。 できればこれに組み込みたいので・・・ <script type="text/javascript"> <!-- function FormCheck(Form) { Error = new Array(); i = 0; // 年の選択チェック if ((Form["yyyy"]) && (Form["yyyy"][0].selected == true)) { Error[i] = "年は必須項目です。"; i++; } // 月の選択チェック if ((Form["mm"]) && (Form["mm"][0].selected == true)) { Error[i] = "月は必須項目です。"; i++; } // 日の選択チェック if ((Form["dd"]) && (Form["dd"][0].selected == true)) { Error[i] = "日は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("未入力の項目があるので検索できません。\n\n"+ErrorText); return false; } } // --> </script> <form name="trace" action="kensaku.php" method="GET" onsubmit="return FormCheck(this)"> <TABLE><TR><TD> <select name="yyyy" size="1"> <option value=""></option> <option value="2008">2008</option> <option value="2009">2009</option> </select>年 <select name="mm" size="1"> <option value=""></option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <!-- ～～～～略～～～～～ --> <option value="12">12</option> </select>月 <select name="dd" size="1"> <option value=""></option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <!-- ～～～～略～～～～～ --> <option value="31">31</option> </select>日 </TD></TR> <TR><TD><INPUT TYPE="submit" name="submit" VALUE="検索"></TD></TR> </TABLE>
- ベストアンサー
- JavaScript
お礼
asahina02さん、早速のお返事ありがとうございます。 たったそれだけだったんですね。 何時間も悩んだ原因がこれとは悲しいやらうれしいやら複雑な気持ちです。 本当にありがとうございました。