株式会社アルバステラ » php http://albastella.co.jp WEBサイト製作・販売・サポート Wed, 03 Oct 2018 07:11:11 +0000 ja hourly 1 https://wordpress.org/?v=3.8.41 javascriptからphpへフォームデータを渡す http://albastella.co.jp/2015/12/14/javascript%e3%81%8b%e3%82%89php%e3%81%b8%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b8%a1%e3%81%99/ http://albastella.co.jp/2015/12/14/javascript%e3%81%8b%e3%82%89php%e3%81%b8%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b8%a1%e3%81%99/#comments Mon, 14 Dec 2015 07:06:37 +0000 http://albastella.co.jp/?p=203 ページ遷移なしのメールフォームを設置する案件で、
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に値を送信。→送信完了後フォームをリセットというのが最終予定でした。

]]> http://albastella.co.jp/2015/12/14/javascript%e3%81%8b%e3%82%89php%e3%81%b8%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b8%a1%e3%81%99/feed/ 0