• 締切済み

javascriptを使用したメール送信の処理方法

本を参考に独学で問合せフォームを作成しています。(初心者です) 未入力項目が0の時は送信ボタンを押すと(phpに)送信できるようにしたいのですが、javascriptにどのようなコードを入れればよいのでしょうか。 下記は本に記載されているコードなのですが、下記だけだと送信することが出来ません。 ご教示お願いします。 【js】の下記の部分にコードを入れればいいのかと思うのですが、どういうコードをどのように入れればいいのかわかりません。 //エラーカウントが0であれば、エラー無し if( errorCount == 0 ){ alert( '送信内容にエラーはありません。' ); }; また、下記のHTMLの最初の行の<form id="myForm" method="post" >にaction="info.php"を入れてみましたが、info.phpに飛ばないのですがどうしてなのでしょうか? 【HTML】 <form id="myForm" method="post" > <table> <tr> <th><label for="formName">名前 <span class="ind">必須</span></label></th> <td><input type="text" name="formName" id="formName"></td> </tr> <tr> <th><label for="formFurigana">ふりがな <span class="ind">必須</span></label></th> <td><input type="text" name="formFurigana" id="formFurigana"></td> </tr> <tr> <th><label for="formTell">電話番号 <span class="ind">必須</span></label></th> <td><input type="text" name="formTell" id="formTell"></td> </tr> <tr> <th><label for="formMail">メールアドレス <span class="ind">必須</span></label></th> <td><input type="text" name="formMail" id="formMail"></td> </tr> <tr> <th><label for="formInquiry">お問い合わせ内容 <span class="ind">必須</span></label></th> <td><textarea rows="9" name="formInquiry" id="formInquiry"></textarea></td> </tr> </table> <p><input type="submit" value="送信内容を確認する"></p> </form> </div> 【jsのコード】 $(function(){ function setMyForm(target){ var ERROR_MESSAGE_CLASSNAME = 'errorMsg'; //エラー時のメッセージ要素のclass名 var ERROR_INPUT_CLASSNAME = 'errorInput'; //エラー時のinput要素のclass名 var items = []; //チェック対象となるテキスト入力要素を格納した配列 //項目チェックする var checkAll = function(){ var errorCount = 0; //項目:名前のチェック checkEmptyText( items[0], '名前をご入力ください。' ); //項目:ふりがなのチェック checkEmptyText( items[1], 'ふりがなをご入力ください。' ); //項目:電話番号のチェック checkEmptyText( items[2], '電話番号をご入力ください。' ); //項目:メールアドレスのチェック checkEmptyText( items[3], 'メールアドレスをご入力ください。' ); //項目:お問い合わせ内容のチェック checkEmptyText( items[4], 'お問い合わせ内容をご入力ください。' ); //input,textareaのチェック for( var i=0; i<items.length; i++ ){ if( items[i].prop('isSuccess') == false ){ errorCount++; }; }; //エラーカウントが0であれば、エラー無し if( errorCount == 0 ){ alert( '送信内容にエラーはありません。' ); }; }; //エラーメッセージの追加 var addErrorMessage = function(selector, msg){ removeErrorMessage(selector); selector.before('<span class="'+ERROR_MESSAGE_CLASSNAME+'">'+msg+'</span>'); selector.addClass(ERROR_INPUT_CLASSNAME); }; //エラーメッセージの削除 var removeErrorMessage = function(selector){ var msgSelector = selector.parent().find('.'+ERROR_MESSAGE_CLASSNAME); if( msgSelector.length != 0 ){ msgSelector.remove(); selector.removeClass(ERROR_INPUT_CLASSNAME); }; }; //input,textareaの未入力チェック var checkEmptyText = function(selector, msg){ if( selector.val() == '' ){ addErrorMessage(selector, msg); selector.prop('isSuccess', false); }else{ removeErrorMessage(selector); selector.prop('isSuccess', true); }; }; //初期設定 var init = function(){ //submitイベントの設定 target.on({ 'submit': function(){ checkAll(); return false; } }); //input要素を配列に格納 items = [ target.find('input[name=formName]'), target.find('input[name=formFurigana]'), target.find('input[name=formTell]'), target.find('input[name=formMail]'), target.find('textarea[name=formInquiry]') ]; //input要素のプロパティを設定 $.each(items, function(index){ items[index].prop('isSuccess', false); }); //enterキーでsubmitしてしまうのを防止する target.find('input[type=text]').on({ 'keypress': function(e){ if( (e.keyCode == 13) ) return false; } }); }; init(); }; setMyForm($('#myForm')); });

noname#233083
noname#233083

みんなの回答

  • hogusyaki
  • ベストアンサー率34% (26/76)
回答No.1

下記2点の修正が必要かなと思うのですがいかがでしょうか?? ==================== //エラーカウントが0であれば、エラー無し if( errorCount == 0 ){ return true; } else { return false; }; ==================== ==================== //submitイベントの設定 target.on({ 'submit': function(){ return checkAll(); } }); ==================== checkAll(); return false; だと、常時submitのアクションがfalseになってデータが送信されないことになってしまいますので、checkAll()が返す値でtrue,falseが切り替わる必要があるのではないかな?と思います。

関連するQ&A

  • JavaScriptの記述を教えて下さい。

    はじめまして、charliehamaといいます。 素人なもので、JavaScriptに詳しい方、教えて下さい。 次のコード(全体の中の一部)があります。 <!-- // ------------------------------------------------- // HTML生成関数 // ------------------------------------------------- function disp(){ //各要素を変数に格納 var $day = $(this).find('day').text(); var $label = $(this).find('label').text(); var $category = $(this).find('category').text(); var $content = $(this).find('content').text(); var $url = $(this).find('url').text(); var $target = $(this).find('target').text(); //HTMLを生成 $('<tr>'+ '<th>'+$day+'</th>'+ '<td class="label"><span class="'+$label+'">'+$category+'</span></td>'+ '<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>'+ '</tr>').appendTo('table.tbl tbody'); } --> 変数$urlについて、if構文で分岐させるにはどのように記述すればよいですか? (1) $urlがxxxの時、<td><span class="abc">'+$content+'</span></td> とする。 (2) $urlがそれ以外の時、<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>とする。 (3) (1)と(2)以外の処理は変更しない。 質問の仕方が悪ければご指摘下さい。 困っています。 どうかよろしくお願い申し上げます。

  • 【緊急】リアルタイムでエラーチェック

    下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。 このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>exValidationサンプル 2</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.js"></script> <script type="text/javascript" src="js/exvalidation.js"></script> <script type="text/javascript" src="js/exchecker-ja.js"></script> <script type="text/javascript"> $(function(){ $("form") .exValidation({ rules: { name: "required", kana: "required katakana", email: "required email hankaku group", pass: "required min6 max12", repass: "required retype-pass", radio: "radio", checkbox: "checkbox" }, errInsertPos: 'after', errPosition: 'fixed' }); }); </script> </head> <body> <div class="pagebody"> <h1>exValidation</h1> <form> <fieldset> <p class="attention">*は必須項目です</p> <table> <tbody> <tr> <th>Name<span>*</span></th> <td><input type="text" id="name" name="name" value="" /></td> </tr> <tr> <th>Kana<span>*</span></th> <td><input type="text" id="kana" name="kana" value="" /></td> </tr> <tr> <th>Mail<span>*</span></th> <td><span id="email"><input type="text" id="email" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td> </tr> <tr> <th>Password<span>*</span></th> <td><input type="password" id="pass" name="pass" value="" /></td> </tr> <tr> <th>Retype-Password<span>*</span></th> <td><input type="password" id="repass" name="repass" value="" /></td> </tr> <tr> <th>Sex<span>*</span></th> <td> <span id="radio"> <label for="male"><input type="radio" id="male" name="sex" value="male" />male</label> <label for="female"><input type="radio" id="female" name="sex" value="female" />female</label> </span> </td> </tr> <tr> <th>Prefecture<span>*</span><br /> this is selectable</th> <td> <select id="pref" name="pref" class="selectable"> <optgroup label="---"> <option value="">---</option> </optgroup> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> <optgroup label="東北"> </optgroup> </select> </td> </tr> <tr> <th>City</th> <td><input type="text" name="city" value="" /></td> </tr> <tr> <th>Street</th> <td><input type="text" name="street" value="" /></td> </tr> <tr> <th>Favorite<span>*</span></th> <td> <span id="checkbox"> <label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label> <label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label> <label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label> <label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label> <label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label> </span> </td> </tr> </tbody> </table> </fieldset> <p class="submit"><input type="submit" value="Submit" class="button" /></p> </form> </div> </body> </html>

  • ラジオボタンとテキストボックスで、ボタン選択時のテキストボックスの入力チェックするにはどうしたらよいでしょうか?

    ラジオボタンとテキストボックスの組合わせで使用し、ラジオボタン選択時のテキストボックスの入力チェックをするにはどうしたらよいのでしょうか? 以下はそのhtmlソースになります。 <table border="0" cellspacing="2" cellpadding="0"> <tr> <td><input type="radio" name="addsearch" value="検索エンジン" id="p1"></td> <td colspan="2"><label for="p1"><span class="stress2">検索エンジン</span></label></td> </tr> <tr> <td></td> <td>検索エンジン名</td> <td><INPUT TYPE=text NAME="addsearch1" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="ご紹介で" id="p2"></td> <td colspan="2"><label for="p2"><span class="stress2">ご紹介で</span></label></td> </tr> <tr> <td></td> <td>ご紹介者のお名前をおしえてください。</td> <td><INPUT TYPE=text NAME="addsearch2" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="広告を見て" id="p3"></td> <td colspan="2"><label for="p3"><span class="stress2">広告を見て</span></label></td> </tr> <tr> <td></td> <td>どこの広告ですか?</td> <td><INPUT TYPE=text NAME="addsearch3" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="その他" id="p4"></td> <td colspan="2"><label for="p4"><span class="stress2">その他</span></label></td> </tr> <tr> <td></td> <td>具体的にお願いします。</td> <td><INPUT TYPE=text NAME="addsearch4" VALUE="" SIZE=40></td> </tr> </table> よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • VBA IE ラジオボタンにチェックをつけたい

    エクセルvbaでIE操作をしているのですが、 -------------------------------------------------------- <tr> <th><span class="asterisk">*</span>&nbsp; <label for="sex">性別:</label></th> <td> <input type="radio" name="gender" value="m" id="male" tabindex="1000"> <label for="male">男性</label> <input type="radio" name="gender" value="f" id="female"> <label for="female">女性</label> </td> </tr> -------------------------------------------------------- のソースで、男性にチェックを入れたいのですが、 どのようなVBAコードを書けばいいのでしょうか? objIE.document.all.gender.Value = "m" だとエラーになってしまいます。 ご教授よろしくお願いします。

  • メールフォームで必須項目の仕方

    メールフォームで必須項目を入力しないと送信できないようにするにはどうすればいいでしょうか? 現在は以下のとおりに書いてありますが、必須項目に書いてなくても送信できてしまいます。 <form method="post" action="CGI"> <h3>お問い合わせフォーム</h3> <p>*は必須項目です。</p> <table> <tbody> <tr> <th>お問い合わせ内容*</th> <td><textarea name="お問い合わせ内容" class="l" cols="40" rows="12"></textarea></td> </tr> <tr> <th>お名前(漢字)*</th> <td><input type="text" name="お名前(漢字)" class="m"></td> </tr> <tr> <th>お名前(フリガナ)*</th> <td><input type="text" name="お名前(フリガナ)" class="m"></td> </tr> <tr> <th>E-Mail*</th> <td><input type="text" name="E-mail" class="l"></td> </tr> <tr> <th>電話番号(半角)*</th> <td><input type="text" name="電話番号" class="l"></td> </tr> </tbody> </table> <input type="submit" value="  送信  " class="button"></form> また必須項目が未入力のときにエラーメッセージ(「お名前が未入力です。」など)を出したいのですがどのようにすればいいですか?

    • ベストアンサー
    • CGI
  • クリックしたラジオボタンの行番号を取得したい

    Jqueryを用いてクリックしたラジオボタンの行番号を取得したいのですが、 うまくいきません。 次のようなHTMLで <table border="1" style="font-size:12px;"> <tr> <td>2014年06月01日</td> <td> <label><input type="radio" name="rd1" class="rd" value="0" />A</label> <label><input type="radio" name="rd1" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd1" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月02日</td> <td> <label><input type="radio" name="rd2" class="rd" value="0" />A</label> <label><input type="radio" name="rd2" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd2" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月03日</td> <td> <label><input type="radio" name="rd3" class="rd" value="0" />A</label> <label><input type="radio" name="rd3" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd3" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月04日<td> <td> <label><input type="radio" name="rd4" class="rd" value="0" />A</label> <label><input type="radio" name="rd4" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd4" class="rd" value="7" />C</label> </td> </tr> </table> 下記で選択したラジオボタンの値を取得できるのですが、 行の番号が取れません。 //ラジオボタンを変更 $('.rd').change(function(){ val = $(this).val(); alert("hoge " + val); }); どのようにしたら良いでしょうか? 宜しくお願いいたします。

  • PHP POSTでデータ登録について

    PHP初心者です。PHP簡単な管理システムを作っていますが、データベースにデータ登録がうまくできないので、教えてください。 データ登録が出来ますが、登録ページの中に <a href ="xxx.php">に追加して、リンクをクリックしたら、空データがそのまま登録されてしまった。 フォーム中のボタンを押さないとデータ登録ができない設定するのを作りたいですが、ソースコードのどこで修正したら、ページリンクしても自動的に空データ登録できないのか? <form id="frmIpunt" name="frmIput" method="post" action=""> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <th colspan="2">新規店舗登録</th> </tr> <tr> <td>店舗名</td> <td> <span id="sprytextfield1"> <label for="shops_name"></label> <input name="shops_name" type="text" id="shops_name" size="10"> <span class="textfieldRequiredMsg">未入力</span></span> </td> </tr> <tr> <td>住所</td> <td><input name="shops_address" type="text" id="shops_address"></td> </tr> <tr> <td>電話番号</td> <td><input name="shops_tel" type="text" id="shops_tel"></td> </tr> </table> <input type="submit" class="order-button" value="登録する"> </form>

    • ベストアンサー
    • PHP
  • JavaScriptの質問です。

    JavaScriptの質問です。 下記フォームで、 1番が入力されると、 2、3番目のエリアがグレーになって入力不可になる方法を教えてください。 <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid" id="shopid" /></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area" /></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business" /></td> </tr> <tr> よろしくお願いします。

  • php メールフォーム エラー表示方法

    現在メールフォームの作成にて困っていることがあります。 form.php <?php //エラー表示設定 if(isset($_SESSION['error'])) { foreach ($_SESSION['error'] as $value) { print ' <span style="color:#FF0000; font-size:13px;">' . h($value) . '</span><br />' . "\n"; } } ?> <!--FORMタグここから--> <form method="post" action="confirm.php"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><label for="name">名前</label><span class="indispensable_color">*</span></td> <td><input type="text" size="50" name="name" id="name" value="<?php print h(@$_SESSION['name']); ?>" /></td> <td>例:goo 太郎</td> </tr> <tr> <td><label for="kana">フリガナ</label><span class="indispensable_color">*</span></td> <td><input type="text" size="50" name="kana" id="kana" value="<?php print h(@$_SESSION['kana']); ?>" /></td> <td>例:グー タロウ</td> </tr> </table> </form> confirm.php // 名前欄をチェックします。 if (trim($name) == '') { $error[] = 'お名前は必須項目です。'; } else if (mb_strlen($name) > 100) { $error[] = 'お名前は100文字以内でお願い致します。'; } // フリガナ欄をチェック if (trim($kana) == '') { $error[] = 'フリガナは必須項目です。'; } // エラー数を確認します。 if(count($error) > 0) { // エラーがある場合は、入力フォームに戻る $dirname = dirname($_SERVER['SCRIPT_NAME']); $dirname = $dirname == DIRECTORY_SEPARATOR ? '' : $dirname; $uri = 'http://' . $_SERVER['SERVER_NAME'] . $dirname . '/form.php'; header('HTTP/1.1 303 See Other'); header('Location: ' . $uri); // 確認画面を表示します。 } else { と記載しています。 これですと、エラーがあった場合の表示はtableの上にまとめて表示されます。 まとめて表示されるのではなく個別に表示されるにはどうしたらよろしいでしょうか? 例→名前の項目のテキストボックスの下に「お名前は必須項目です。」   カナの項目のテキストボックスの下に「カナは必須項目です。」 と表示されるようにしたい。 ご教授お願いします。

    • ベストアンサー
    • PHP
  • JavaScriptでの時間割り作成について

    <form> <br> <table border="3" bordercolor="#994C00" align="center" bgcolor="#FFDFAA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script> <!-- // Set virtual screen width size to 320 pixels // 下の一行は使う時に外す。エラーが出たら消す。 monaca.viewport({width: 320}); function setCookie(c_name,value,expiredays){ // pathの指定 変数名 var path = location.pathname; // pathをフォルダ毎に指定する場合のIE対策 var paths = new Array(); paths = path.split("/"); if(paths[paths.length-1] != ""){ paths[paths.length-1] = ""; path = paths.join("/"); } // 有効期限の日付 これがないと編集できない var extime = new Date().getTime(); var cltime = new Date(extime + (60*60*24*1000*expiredays)); var exdate = cltime.toUTCString(); // クッキーに保存する文字列を生成 これがないと保存できない var s=""; s += c_name +"="+ escape(value);// 値はエンコードしておく s += "; path="+ path; if(expiredays){ s += "; expires=" +exdate+"; "; }else{ s += "; "; } // クッキーに保存 document.cookie=s; } function getCookie(c_name){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(c_name + "="); if(st!=-1){ st=st+c_name.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; // 値をデコードして返す return unescape(document.cookie.substring(st,ed)); } } return ""; } //変数設定 if(getCookie('sects1')){var sect1 = getCookie('sects1');}else{var sect1 = "科目1,教室,備考";} if(getCookie('sects2')){var sect2 = getCookie('sects2');}else{var sect2 = "科目2,教室,備考";} if(getCookie('sects3')){var sect3 = getCookie('sects3');}else{var sect3 = "科目3,教室,備考";} if(getCookie('sects4')){var sect4 = getCookie('sects4');}else{var sect4 = "科目4,教室,備考";} if(getCookie('sects5')){var sect5 = getCookie('sects5');}else{var sect5 = "科目5,教室,備考";} var sects = new Array(sect1,sect2,sect3,sect4,sect5); //時間割編集ここから function editj(a){ var secname = new Array('sects1','sects2','sects3','sects4','sects5'); editsec = window.prompt("「科目,教室,備考」の順に入力してください", sects[a]); if(editsec){ secookie = secname[a]; setCookie(secookie,editsec,365); window.alert("完了しました!"); location.reload(); } } //時間割編集ここまで //時間割表示 for (i = 0; i < 5; i = i + 1){ j = i + 1; wari = sects[i].split( "," ); var subj = "sbj" + j; var clrm = "crm" + j; var comt = "com" + j; if(wari[0]){ document.getElementById(subj).innerHTML = wari[0]; } if(wari[1]){ document.getElementById(clrm).innerHTML = wari[1]; } document.getElementById(comt).innerHTML = wari[2] + "<br><input type=button value='編集' onClick='editj(" + i + ")'>"; } //時間割表示ここまで --> </script> というコードです これは月曜日のシートで火曜日、水曜日・・・と土曜日まであります このコードで月曜日の時間割を変更すると火曜日、水曜日などすべてのシートが変更されてしまいます シートごとに保存する方法ってありますか? JavaScriptを始めたばかりなのでわかりやすく教えてほしいです><

専門家に質問してみよう