javascriptからphpへフォームデータを渡す
ページ遷移なしのメールフォームを設置する案件で、
javascriptからphpへフォームデータを渡す必要があり、そのときの覚書。
結局これは使わなかったのやけど。。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#send').click(function() { //postメソッドで送るデータを定義 var data = {パラメータ名 : 値}; var data = { namae : $('#namae').val(), email : $('#email').val(), ask : $('#ask').val() }; $.ajax({ type: "post", url: "send.php", data: data, //Ajax通信が成功した場合 success: function(data, dataType) { //PHPから返ってきたデータの表示 alert(data); //送信完了後フォームの内容をリセット document.forms[0].elements[0].value=""; document.forms[0].elements[1].value=""; document.forms[0].elements[2].value=""; }, //Ajax通信が失敗した場合のメッセージ error: function() { alert('メールの送信が失敗しました。'); } }); return false; }); }); </script> </head> <body> <form id="contactForm" name="contactForm" method="post" > <ul> <li><input type="text" id="namae" name="namae" placeholder="名前"></li> <li><input type="email" id="email" name="email" placeholder="E-mail" ></li> <li><textarea name="ask" id="ask" placeholder="お問い合わせ内容" ></textarea></li> </ul> <p class="more"><input id="send" type="submit" value="送る"></p> </form> </body> </html>
php
<?php header("Content-type: text/plain; charset=UTF-8"); $sender_name = $_POST['namae']; $sender_mail_address = $_POST['email']; $contact_body = $_POST['ask']; //空白チェック $errorflag = 0; if ($sender_name == null) { $error_name = "お名前が未入力です"; $errorflag = 1; }else{$error_name = "";} if ($sender_mail_address == null) { $error_mail = "メールアドレスが未入力です"; $errorflag = 1; }else{$error_mail = "";} if ($contact_body == null) { $error_ask = "お問い合わせ内容が未入力です"; $errorflag = 1; }else{$error_ask = "";} if ($errorflag == 1) { if($error_name != ""){ echo $error_name."\n";} if($error_mail != ""){ echo $error_mail."\n";} if($error_ask != ""){ echo $error_ask."\n";} } else { //ここにメール送信の設定 echo "送信が完了しました"; } ?>
ざっくり言うと、javascriptからpost値をphpに渡して、エラーがなければ送信して、結果をjavascriptに返すってことをしています。
phpのエラーチェックとかは適当に書いてますが、send.phpに直接アクセスされて空メールが送信されるのを防止する意味合いぐらいで設定してます。
今回は未完成のままになってしまいますが。
javascriptでフォームの未入力などをチェック。→入力に誤りがない状態でphpに値を送信。→送信完了後フォームをリセットというのが最終予定でした。