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に値を送信。→送信完了後フォームをリセットというのが最終予定でした。