Q&A
○やりたいこと
HTMLでアンケートフォームを作りました。
動きとしては、各欄に入力後送信ボタンを押すとメーラーが起動して、入力した情報をメールで送ることが出来るものです。
このアンケートフォームに未入力欄などがあった状態で送信ボタンを押すと、ダイアログが表示されてメーラーは起動されないようにしたいと思います。
（例：生年月日を選ぶSELECTが「選択してください」のまま送信ボタンをおすと、「生年月日を選択して下さい」というダイアログが表示される。というものです。）
作る際の制限としては、HTMLとJavaScriptのみを使い、JavaScriptは別ファイルで読み込む。ということです。
○困っていること
「空欄があるときにメーラーを起動させずダイアログ表示」にはif文を使うだろうということはわかるのですが、if文のなかの条件をどう描くべきなのかわかりません。
別ファイルのJavaScriptファイルに、
if( ){
alert("選択して下さい");
}
と書く場合、（ ）の中にどう書けばアンケートに入力した情報をとれるのでしょうか。
PHPを使えば、＄＿SERVER['REQUEST_METHOD']でとれるかと思うのですが、今回はPHPを使わない方向です。
また自分で調べた結果、
if(タグのname . タグのname.value）{
}
という形で、入力された値をとる。というやり方を見つけたのですがうまく動きません。
（見つけたのは以下のサイトです。）
https://www.sejuku.net/blog/91384
助言をお願いします。
HTML
1<!DOCTYPE html> 2<HTML lang="ja"> 3 <HEAD> 4 <META charset = "utf-8"> 5 <TITLE>アンケート</TITLE> 6 <STYLE> 7 //省略 8 </STYLE> 9 </HEAD> 10 11 <BODY> 12 <H1>アンケートフォーム</H1> 13 <P>以下のアンケートフォームを入力して送信ボタンを押下してください</P> 14 <SCRIPT type="text/javascript" src="JavaScript_Task.js"> // 15 </SCRIPT> 16 <FORM method="POST" name="question_form" action="mailto:merumeru.com"> 17 <TABLE name="table_i"> 18 <TR> 19 <TH name="left-table" class="th1">質問</TH> 20 <TH name="right-table">回答</TH> 21 </TR> 22 23 <TR> 24 <TD class="left-table">住所</TD> 25 <TD class="right-table"> 26 <INPUT type="text" name="post_num1">-<INPUT type="text" name="post_num2"><br> 27 <INPUT type="text" name="address"> 28 </TD> 29 </TR> 30 <TR> 31 <TD name="left-table">氏名</TD> 32 <TD name="right-table"> 33 <INPUT type="text" name="name"> 34 </TD> 35 </TR> 36 <TR name="birth"> 37 <TD name="left-table">生年月日</TD> 38 <TD name="right-table"> 39 <SELECT name="birth_year"> 40 <OPTION name="year" value="">選択して下さい</OPTION> 41 <OPTION name="year" value="2015">2015</OPTION> 42 <OPTION name="year" value="2016">2016</OPTION> 43 <OPTION name="year" value="2017">2017</OPTION> 44 <OPTION name="year" value="2018">2018</OPTION> 45 <OPTION name="year" value="2019">2019</OPTION> 46 <OPTION name="year" value="2020">2020</OPTION> 47 </SELECT>年 48 <INPUT type="text">月 49 <INPUT type="text">日 50 </TD> 51 </TR> 52 53 </TABLE> 54 <DIV class="send_div"> 55 <INPUT type="submit" name="send" value="送信" class="send_button" onClick="Check()"> 56 </DIV> 57 </FORM> 58 <FORM method="POST" action="http://codecamp30768.lesson10.codecamp.jp//html/HTML_task_post.html"> 59 <DIV> 60 <INPUT type="submit" name="reset" value="リセット"> 61 </DIV> 62 </FORM> 63 </BODY> 64</HTML>
別ファイルのJavaScriptファイル
JavaScript
1function Check(){ 2 if(question_form.birth_year.year.value == 2015){ 3 alert("生年月日（年）を選択して下さい"); 4 } 5}
回答1件
0
ベストアンサー
html
1<INPUT type="submit" name="send" value="送信" class="send_button" onClick="Check()">
こちらですが、submitを指定しているとonClickでいくらイベントを指定しても、
先にsubmitが実行されてしまうので質問者さんの意図する挙動になりません。
先にonClickを動かしたい場合は、 type="button" とし、
onClickで呼び出すJavascript側の関数から問題なければsubmitさせるようにするといいかもしれません。
また、onClickの中身ですが… onClick="Javascript:Check();" とするとどうでしょうか。
Javascript側ですが、selectタグにIDを設定するともう少し簡単に取得できます。
例えば
HTML
1<SELECT name="birth_year" id="birth_select"> 2 <OPTION name="year" value="">選択して下さい</OPTION> 3 <OPTION name="year" value="2015">2015</OPTION> 4 <OPTION name="year" value="2016">2016</OPTION> 5 <OPTION name="year" value="2017">2017</OPTION> 6 <OPTION name="year" value="2018">2018</OPTION> 7 <OPTION name="year" value="2019">2019</OPTION> 8 <OPTION name="year" value="2020">2020</OPTION> 9</SELECT>年 10<INPUT type="text">月 11<INPUT type="text">日
このようにすれば
Javascript
1function Check(){ 2 let select = document.getElementById('birth_select'); //指定されたIDののDOMを拾う 3 let index = select.selectedIndex; //選択ボックスで選択されているインデックス番号を取得 4 5 if(index == 0){ //index番号が0 → 選択してください が選択されている場合 6 alert("生年月日（年）を選択して下さい"); 7 } else { 8 //～ 問題ない場合の処理 ～ 9 } 10}
このようなパターンはいかがでしょうか？
投稿2020/08/19 05:29
総合スコア230
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/19 05:51