PHP+jQueryで画面遷移しないでメール送信する方法

画面遷移をせずに、PHPでメール送信送信をしたい

とご質問を頂きました。

一応補足で、たぶんお問合せフォームのような画面で送信したときに画面遷移をせずに入力内容をメールで送信したいのだと思います。

この場合はAjaxの非同期通信を使います。

Ajaxで非同期通信をする基礎は以下の記事を参考にしてください。

≫ Ajaxとは？jQueryで非同期通信を行う方法

それとメール送信に関しても以前記事を作成しました。

≫ PHPで入力されたメールアドレスにメールを送信するサンプルでForm処理をイメージする

上記2つの記事をベースにサンプルを作成します。

PHP+jQueryで画面遷移なしでメール送信するサンプルコード

入力内容をAjaxで送信し、結果のメッセージを画面上に表示しています。

フォーム入力画面（HTML）

<html>
  <head>
    <meta charset="UTF-8">
    <title>PHPテスト</title>
    <meta name="description" content="このページの概要を書く">
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
    <script type="text/javascript">
	$(function(){
	    $('#sendmail').submit(function(event) {
	    	var form = $(this);
	    	var url = form.attr('action');
	    	var method = form.attr('method');
	    	var serialize = form.serialize();

	    	$.ajax({
				type: method,
				url: url,
				data: serialize,
				dataType: false, //通信結果を受け取らない場合はfalse
				beforeSend: function(xhr, settings) {
					// ajax送信前の処理
				},
				complete: function(xhr, status) {
					// ajax応答後の処理
				},
				success: function(data) {
					// ajax通信成功時の処理
					$('#msg').html(data);
				},
				error: function(xhr, status, error) {
					// ajax通信成失敗の処理
					$('#msg').html("通信エラーが発生しました。");
				}
			});
			
			return false;
		});
	});
    </script>
  </head>
  <body>
    <p id="msg"></p>
    <form action="mail.php" method="POST" id="sendmail">
      <p>名前</p>
      <input type="text" name="yourname">
      <p>メールアドレス</p>
      <input type="text" name="youremail"><br />
      <input type="submit" value="送信">
    </form>
  </body>
</html>

<html>

<head>

<title>PHPテスト</title>

$(function(){

$('#sendmail').submit(function(event) {

var form = $(this);

var url = form.attr('action');

var method = form.attr('method');

var serialize = form.serialize();

$.ajax({

type: method,

url: url,

data: serialize,

dataType: false, //通信結果を受け取らない場合はfalse

beforeSend: function(xhr, settings) {

// ajax送信前の処理

complete: function(xhr, status) {

// ajax応答後の処理

success: function(data) {

// ajax通信成功時の処理

$('#msg').html(data);

error: function(xhr, status, error) {

// ajax通信成失敗の処理

$('#msg').html("通信エラーが発生しました。");

}

});

return false;

});

</script>

</head>

<body>

<p>メールアドレス</p>

</form>

</body>

</html>

formタグに関しては通常のものと同じです。

この中にお問合せなどに必要な項目を追加します。

ただ、formタグに sendmail をIDとして持たせており、sendmailのformが送信されたら送信内容を取得しAjaxで送信するようにしています。

Ajax通信の後には return false; を入れることで元々のsubmitが拒否されます。

Ajaxで非同期通信をする基礎は以下の記事を参考にしてください。

≫ Ajaxとは？jQueryで非同期通信を行う方法

メール送信（PHP）

<?php

if (!empty($_POST["youremail"]) && !empty($_POST["yourname"])) {
  $name = $_POST["yourname"];
  $mail = $_POST["youremail"];
  if (preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $mail)) {
    $from = "test@example.com";
    $subject = "サンプルフォームからのメール送信";
    $message = "{$name}さんへ。\r\n\r\n{$mail}にメールを送信しました。\r\n届きましたか？";
    $header = "From: {$from}\r\nReply-To: {$from}\r\n";
    $result = mb_send_mail($mail, $subject, $message, $header);
    if ($result) {
      $msg = "正常にメールを送信しました。";
    } else {
      $msg = "メールの送信に失敗しました。";
    }
  } else {
    $msg = "メールアドレスが不正です。";
  }
} else {
  $msg = "入力していない項目があります。";
}

echo $msg;
exit;