JavaScriptの記述を添削してください

このQ&Aのポイント
  • アンケートフォームの送信確認メッセージを追加しました。
  • 入力項目の未入力をチェックするJavaScriptの記述に誤りがあります。
  • JavaScriptの記述を詳細に添削しています。
回答を見る
  • ベストアンサー

JavaScriptの記述を添削してください。

アンケートフォームを作成して送信ボタンを押してから 送信確認メッセージを出るようにいたしました。 今までは送信確認メッセージは出さずに 必須項目の未入力部分のみの確認で行っていましたが 送信ボタンを押した後に送信確認メッセージを出してから OKなら送信、キャンセルなら元に戻るというようにしてみました。 自分で動作確認したところでは問題ないようですが、 JavaScriptは超初心者の為まったく自信がありません。 お手すきの方がいましたら 間違っている箇所などをご指摘くださいますでしょうか。 //入力確認 // function kakunin() { if (document.F2.名前.value == "") { alert("名前が入力されていません。"); document.F2.名前.focus(); return(false); } if (document.F2.ふりがな.value == "") { alert("ふりがなが入力されていません。"); document.F2.ふりがな.focus(); return(false); }  if (document.F2.メール.value == "") { alert("メールアドレスが入力されていません。"); document.F2.メール.focus(); return(false); } // //↓以下を付け足しました。 //送信確認 // myRet = confirm("送信します。よろしいですか?"); if ( myRet == false ) return(false); return(true); } <FORM name="F2" method="POST" action="***/mail.cgi" onsubmit="return kakunin()"><INPUT type="hidden" name="_to_" value="***@***.ne.jp"><INPUT type="hidden" name="_subject_" value="***"><INPUT type="hidden" name="_location_" value="***.htm"><BR> <INPUT type="submit" value="送信ボタン"> 上部、入力確認は今まで問題無く動作していました。 よろしくお願いします。

noname#10927
noname#10927

質問者が選んだベストアンサー

  • ベストアンサー
  • s_doc
  • ベストアンサー率24% (93/377)
回答No.1

文法的にはこれでいいと思います。 が、オブジェクト名(タグの名前)には全角文字は使うべきではありません。 今動いていたとしても将来まで保証されないからです。 何しろ海外生まれのブラウザがほとんどですからね。 半角英文字または「_」で始まり、 半角英数字または「_」が続く名前を付ける習慣を付けましょう。 ローマ字で全く構いません。 Namae、Furigana、とかね。 それから最後の myRet = confirm("送信します。よろしいですか?"); if ( myRet == false ) return(false); return(true); は、 confirm("送信します。よろしいですか?"); これだけにしたほうがすっきりします。 完璧な検証作業をしたわけではないので自信は「なし」にしておきます。 ご免。

noname#10927
質問者

お礼

ありがとうございます。 >オブジェクト名(タグの名前)には全角文字は使うべきではありません。 薄々感じてはいたんですが やっぱりそうかと認識いたしました。 >confirm("送信します。よろしいですか?"); >これだけにしたほうがすっきりします。 confirm("送信します。よろしいですか?"); 上だけにするとキャンセルした場合でも送信してしまいましたので トホホで「confirm」を検索し調べたところ if(confirm("送信します。よろしいですか?")) {  return true; } else {  return false; }} こんな感じにすればよいことが分かりました。 confirmの意味さえよく分からなかった自分ですから 勉強になりました。

その他の回答 (1)

  • s_doc
  • ベストアンサー率24% (93/377)
回答No.2

ポカミスしてしまいました。 > confirm("送信します。よろしいですか?"); > 上だけにするとキャンセルした場合でも送信してしまいましたので 仰る通りです。 正しいのはこっちです。 return(confirm("送信します。よろしいですか?")); confirm()はキャンセルボタンをクリックするとfalseを返しますので、 return(false)が実行されます。

関連するQ&A

  • フォームのチェックについて

    今、フォームの送信ボタンを押すとチェックする 関数を作成しております。 function restChar() { if(10000 < document.F1.ご質問内容.value.length) window.alert("ご質問内容は全角5,000字以内でお願いします"); } function check(){ var flag = 0; if(document.F1.name.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.F1.kana.value == ""){ // 「パスワード」の入力をチェック flag = 2; } else if(document.F1.mail.value == ""){ // 「コメント」の入力をチェック flag = 3; }      else if(document.F1.ご質問内容.value == ""){ // 「コメント」の入力をチェック flag = 4; } if(flag == 1){ window.alert('お名前を入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 2){ window.alert('フリガナを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 3){ window.alert('メールアドレスを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }      if(flag == 4){ window.alert('ご質問内容を入力して下さい'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } fOBJ = document.F1.mail.value; check = /.+@.+\..+/; if (!fOBJ.match(check)){ window.alert("メールアドレスが正しくありません"); return false; // 送信を中止 } fOBJ = document.F1.ご質問内容.value.length; if(10000 < fOBJ){ window.alert("ご質問内容は全角5,000字以内でお願いします"); return false; // 送信を中止 } return true; // 送信を実行 } こんな感じです。 1-4のチェックは問題ないのですが、 アドレスと文字数のチェックは、一度は ダイアログがでますが、連続で押すと通ってしまいます。 何がわるいのでしょうか?

    • ベストアンサー
    • Java
  • javascriptの動作で困ってます。

    動作不良が三箇所あります。 プログラムに詳しい方がいらっしゃいましたら原因を教えて下さい。 ・未入力の質問をアラートで一括表示させたいのですが、 (3)のテキストエリアの箇所が未入力なのにアラートに表示できません。 判定のtrueとfalseを逆にして試すと、(3)のアラートは表示されるものの、記入しても アラートが出続けます。 ・1度しか指定していないにも関わらず同じ内容の警告アラートが2回出てしまう原因が分かりません。 ・入力した項目や選択した項目に関しては未入力項目のアラートとは別のアラートを用意してvalueの値をアラートで一括表示させたいのですが、関数を定義しているにも関わらず、関数が定義されていないとエラーメッセージが帰ってきて、表示されません。 ソースコードは以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check(){ var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); } if (str.length>5) { alert("客番号は4~5桁"); } if(str.length<4){ alert("客番号は4~5桁"); } if(str==""){ msg += "客番号が未入力です。\n"; }else{ msg2 += document.form.id.value; } if(str2==""){ msg += "パスワードが未入力です。\n"; }else{ msg2 += document.form.pass.value; } if(radioCheck()==false){ msg += "(1)が未入力です。\n"; } if(checkboxCheck()==false){ msg += "(2)が未入力です。\n"; } if(textareaCheck()==false){ msg += "(3)が未入力です。\n"; } if(selectCheck()==false){ msg += "(4)が未入力です。\n"; } if(msg != ""){ //メッセージを出力 alert(msg); } if(radioCheck()==true){ msg2 += document.form.eng.value ; } if(checkboxCheck()==true){ msg2 += document.form.lang.value ; } if(txtareaCheck()==true){ msg2 += document.form.opinion.value ; } if(selectCheck()==true){ msg2 += document.form.age.value ; } if(msg2 != ""){ //メッセージを出力 alert(msg2); } } function radioCheck(){ var count = 0; var eng=document.getElementsByName("eng"); for(var i=0;i<eng.length;i++){ if(eng[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function checkboxCheck(){ var count = 0; var checklist=document.getElementsByName("lang[]"); for(var i= 0;i<checklist.length;i++){ if(checklist[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function textareaCheck(){ var textarea=document.getElementById("demand").value; if(textarea!=""){ return true; } else{ return false; } } function selectCheck(){ var selectValue=document.getElementById("age").value; if(selectValue!="選択されていません"){ return true; } else{ return false; } } </script> </head> <body> <form action="http://www" method="post" name="form"onSubmit="return check()"> <h1>アンケート</h1> <p><label>客番号:<input type="text" name="id"></label></p> <p><label>パスワード:<input type="password" name="pass"></label></p> <h2>(1)</h2> <p>食べたいですか?<br> <br> <input type="radio" name="eng" value="yes"> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>(2)</h2> <p>食べたい物<br> <br> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>(3)</h2> <p>意見(自由記述)<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20"> </textarea> </p> <h2>(4)</h2> <p> 年齢を選択 <select id="age" name="age"> <option selected value="選択されていません">以下から選択</option> <option value="10~19才">10~19才</option> <option value="20~29才">20~29才</option> <option value="30~39才">30~39才</option> <option value="40~49才">40~49才</option> <option value="50~59才">50~59才</option> <option value="60~69才">60~69才</option> <option value="70才~">70才~</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick="check();"> <input type="reset" value="クリア"> </p> </body> </form> </html>

  • 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での必須項目設定

    現在、下記ジャバスクリプトにてアンケートフォームの必須項目確認をしていますが、SAFARIでは問題なく動くのですが、IE7では名前の打ち込みの必須確認(※1)は作動しますが、セレクトの場合(※2)セレクトしているにも関わらず「確認して下さい」という表示が出ます。どこか間違いがあるのでしょうか?よろしくお願いいたします。 (※1)IE7でも作動します。 function FormCheck() { var f0 = document.forms[0]; if (f0.代表者様お名前.value == "") { alert("代表者様お名前を入力してください。"); f0.代表者様お名前.focus(); return false; } (※2)IE7では「確認して下さい」と出ます。 listn = f0.ご来店月.selectedIndex; if (f0.ご来店月.options[listn].value == "") { alert("ご来店月を選択してください。"); f0.ご来店月.focus(); return false; }

  • JavaScript 初心者です。

    急遽ホームページ作成をやることになり大変困っています。 何もかも初心者で全くわからない状態ですのでよろしくお願い致します。 お客様情報入力で送信ボタンで押すとメールで情報が届く様にしています。 送信ボタンを押したときに、入力チェックをかけているのですが、複数のテキストボックス(郵便番号を入力するテキストボックス)のチェック方法が分かりません。 郵便番号は、3桁-4桁で入力して頂く様にしています。 HTML(郵便番号のみです)・・・ <INPUT maxlength="3" size="3" type="text" name="iyubin" value="" style="ime-mode:disabled;" id="01">-<INPUT type="hidden" name="iyubin" value="-"><INPUT maxlength="4" size="4" type="text" name="zyubin" value="" style="ime-mode:disabled;" id="02"> JavaScriptでの入力チェック(省略をしていますが、正常に動作しているヵ所です)・・・ //お客様情報 function check(){ var flag = 0; // お名前 if ((flag==0) && (document.form.gName1.value == "")){ flag = 1; } if(flag){ window.alert('【お名前】を入力して下さい。'); // 入力されていない場合は警告ダイアログを表示 return false; // 送信を中止 } // ふりがな if ((flag==0) && (document.form.hName2.value == "")){ flag = 1; } if(flag){ window.alert('【ふりかな】を入力して下さい。'); // 入力されていない場合は警告ダイアログを表示 return false; // 送信を中止 } // 性別 if((flag==0) && (document.form.iSeibetsu.length)) { // 選択肢が複数ある場合 flag = 1; var i; for(i = 0; i < document.form.iSeibetsu.length; i ++){ if(document.form.iSeibetsu[i].checked){ flag = 0; break; } } } else{ // 選択肢が1つだけの場合 if((flag==0) && (!document.form.iSeibetsu.checked)){ flag = 1; } } if(flag){ window.alert('【性別】を選択して下さい。'); // 選択されていない場合は警告ダイアログを表示 return false; // 送信を中止 } //このヵ所に郵便番号の入力チェックを入れたいです。 すみませんが、よろしくお願い致します。

  • javascriptに詳しい方、教えてください。

    表示すると表示した瞬間に、文字サイズが大ぐらいから中ぐらいに勝手に変わったり、ボタンの所にカーソルを持っていくと文字サイズが変化したり、バーに文字を入力すると、バーの位置が変わったりするのですが、どうなっているのでしょうか? javascriptは全くわからないので、 どこをどう変えればいいのか、わかりやすい回答をお願いします。 (質問投稿の際に​が勝手に挿入されたりしますので​が入ってた場合は注意をお願いします。) <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <INPUT type="checkbox" id="chk_blank" checked> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo" onClick="search('yahoo');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- ****Yahoo! --> <form name="f_yahoo" method="GET" action="" Accept-charset="euc-jp"> <input type="hidden" name="p" value=""> <input type="hidden" name="ei" value="euc-jp"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { formx.target = getTarget(); formx.submit(); } function sitetop(ur) { swin=window.open(ur,getTarget(),""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") { if(q=="") sitetop("http://www.yahoo.co.jp/"); else { fw=document.f_yahoo; fw.p.value=q; fw.action="http://search.yahoo.co.jp/search"; seteuc(fw); }} } function getTarget(){ blankFlg = document.fm.chk_blank.checked; target = ""; if( blankFlg == true ){ // 別窓で開く target = "_blank"; } else{ // 同じ窓で開く target = "_top"; } return target; } //--> </script>

  • javascriptを教えてください。

    チェックボックスを付けて、チェックを入れると全て新窓で開く(二枚窓目以降も全て新窓で開く)、チェックを入れない場合は全て同じ窓に上書き表示させるようにしたいです。(デフォルトはチェックが入っている状態にしたい) ※私はjavascriptの書き方は全くわかりません。後で記述パターンを見て機能を追加したりする予定です。 よろしくお願いします。 <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <input Type="submit" value="Google" onClick="search('google');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { swin=window.open("","category_root",""); formx.target="category_root"; formx.submit(); swin.focus(); } function sitetop(ur) { swin=window.open(ur,"category_root",""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} } //--> </script>

  • メールアドレスの入力チェックをして、正しくなければ戻る方法

    今、フォームを作っているところなのですが、 各必須事項は入力されていないと戻るように設定していますが、同じ形でメールアドレスもチェックしたいのですが、その際にxxx@***.xxxという正規の形でないと引っ掛かるようにしたいのですが、どうすればよいでしょうか?お分かりの方、是非教えてください。 よろしくお願いします。 -------------------------------------------- 現在のスクリプトは以下のような感じです。 これでは、大文字などでメールアドレスを入れられてもチェックを通してしまいますので。。 function check(){ if(document.FF.お名前_漢字.value == ""){ alert("お名前_漢字を入力してください"); document.FF.お名前_漢字.focus(); return(false); } if(document.FF.住所.value == ""){ alert("住所を入力してください"); document.FF.住所.focus(); return(false); } if(document.FF.email.value == ""){ alert("メールアドレスを入力してください"); document.FF.email.focus(); return(false); } return(true); } -------------------------------------------- そして送信ボタンを押すと、このスクリプトが働くように、 onSubmit="return check()" を設定しています。

  • checkFormの記述について

    いつもお世話になっています。 JavaScript初心者なのですが、教えて下さい。 下記フォーム入力する際、 /[][&;`'\\\"|*?~<>^(){}$]/ の記号を入力すると、alertが出るように設定したいです。 どこが違うのかわかりません。 function checkForm(){ if(document.entry.aaa.value == ("/[][&;`'\\\"|*?~<>^(){}$]/"){ alert('記号の入力はできません'); document.carrerentry.name01.focus(); return false; } } よろしくお願いします。

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // (後で使う: 二重送信防止) var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>