PHPでページ遷移しないでメールフォームを実行する方法は？

前提・実現したいこと

トップページのみのWEBサイトにお問い合わせフォームを付けたいと考えています。
送信ボタンを押すとページ遷移なしで、フォーム下部に「メッセージは正常に送信されました」と表示される仕様にするには以下ソースをどう変更すれば宜しいでしょうか？

index.html

<div class="tb-cell mail-form">
<form id="form" action="mail.php" method="post">
<div class="row">
<div class="cell">
<label>name</label>
<!--cell--></div>
<div class="cell">
<input type="text" name="name" required>
<!--cell--></div>
<!--row--></div>
<div class="row">
<div class="cell">
<label>email</label>
<!--cell--></div>
<div class="cell">
<input type="email" name="email" required>
<!--cell--></div>
<!--row--></div>
<div class="row">
<div class="cell">
<label>comment</label>
<!--cell--></div>
<div class="cell">
<textarea name="comment" required></textarea>
<!--cell--></div>
<!--row--></div>
<div class="row">
<div class="cell">
&nbsp;
<!--cell--></div>
<div class="cell">
<button type="submit" id="sbtn" name="action" value="post">送　信</button>
<button type="reset" id="rbtn">リセット</button>
<!--cell--></div>
<!--row--></div>
</form>
<!--tb-cell--></div>

mail.php

<?php
$action = $_POST['action'];
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$comment = htmlspecialchars($_POST['comment']);
$to = '受診するメールアドレスを入力';
$subject = 'お問い合わせ';
$message = '[お名前]'."\n".$name."\n";
$message .= '[email]'."\n".$email."\n";
$message .= '[コメント]'."\n".$comment."\n\n\n";
$header = 'From: '.$email."\r\n";
$header .= 'Reply-To: '.$email."\r\n";
if($action == "post"){
$status = mb_send_mail($to, $subject, $message, $header);
if ($status) {
echo '<p class="msg">メッセージは正常に送信されました</p>';
echo '<button type="button" onclick="history.go(-1)">入力フォームに戻る</button>';
} else {
echo '<p class="msg">メッセージの送信に失敗しました</p>';
echo '<button type="button" onclick="history.go(-1)">入力フォームに戻る</button>';
}
}
?>

m.ts10806

2018/09/30 11:43

html、PHPともに、インデントをつけてください。コードが非常に読みづらく、例えばタグやかっこの閉じ忘れ、閉じ位置のミスなどに気づきにくくなります。

行動規範の内容に同意します

回答3件

ページ遷移なし

javascript を使って、ajax でPHPにパラメータを渡し、レスポンスを受け取って表示します。

とりあえず、jQuery を使って Ajax を使うサンプルです。
基本的な Ajax のコードの動きをしっかり把握することから始め、メールフォームへと改変していってください。
index.html のフォームから、test.php に値を渡し、phpでの処理結果を index.html に返却しているコードです。

php
1<!-- index.html -->
2<!DOCTYPE HTML>
3<html lang="ja">
4	<head>
5		<meta charset="UTF-8">
6		<title></title>
7	</head>
8	<body>
9		<div>
10			<form action="" method="post">
11				<p>
12					<input type="number" name="num" />
13				</p>
14				<p>
15					<button type="button">計算</button>
16				</p>
17				<p>
18					結果: <span id="result"></span>
19				</p>
20			</form>
21		</div>
22		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
23		<script type="text/javascript">
24			$(function () {
25				$('button').on('click', function () {
26					$.ajax({
27						url: 'test.php'
28						, method: 'post'
29						, dataType: 'json'
30						, data: $('form').serialize()
31						, success: function (json) {
32							$('#result').text(json.res);
33						}
34					});
35				});
36			});
37		</script>
38	</body>
39</html>

php
1<?php
2
3/**
4 * test.php
5 * 
6 * @since 2018/09/30
7 */
8header('Content-type: application/json');
9$num = filter_input(INPUT_POST, 'num');
10echo json_encode(['res' => $num * 2]);
11

投稿2018/09/30 10:04

編集2018/09/30 10:40

退会済みユーザー

総合スコア0

pirori

2018/09/30 10:08

ご回答ありがとうござます。 PHP初心者でまったくわからないのですが、上記PHPをどう変更すれば宜しいでしょうか？具体的に記載頂けると大変有難いです。

退会済みユーザー

2018/09/30 10:11

「JavaScriptを使って」と回答したのに、「PHPをどう変更すれば」と聞かれている意味がわかりません。まずは、「ajax」について調べてから聞いてください。

pirori

2018/09/30 10:16

失礼いたしました。すでに過去の回答からajaxについては調べたのですが、まったく理解できない状態です。そのため恐縮ですが上記HTMLフォームに対してどのようなソースを書けば良いかご質問させて頂きました。

退会済みユーザー

2018/09/30 10:17

ajaxを使わない場合、「ページ遷移なし」は不可能です。

pirori

2018/09/30 10:21

たびたびのご回答ありがとうござます。 ajaxを使わないのではなく、ajaxが理解できないためご質問させて頂いております。

退会済みユーザー

2018/09/30 10:21

ajaxの何が理解できないのですか？質問の範囲が広すぎます。

pirori

2018/09/30 10:29

Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能という概要は理解しています。メールフォーム初心者のため上記フォームに対してどこにどのようなJavaScript、 Ajaxを記載すれば良いかわからなく困っています。 ※JavaScriptも初心者です。

行動規範の内容に同意します

手順のみ。
なるべく細分化してみたので、1つ1つ対応して、チェックリスト代わりに使ってください。
また、それぞれのやり方については1つ1つ調べてみてください。

送信ボタンを押したときのイベントをJavaScriptでキャッチ
1.のイベントでは冒頭でフォームのSubmitを無効にして画面遷移させない
入力された情報をすべてAjaxでPHPに送信する
3.で画面側から送信された情報をPHPで受け取り、ひとまずテキストファイルに書き出し、「成功」のみechoする
4.でPHP側から返された情報をそのままJavaScriptでconsole.log()で出力。4.で作られたテキストファイルに3.で送信された情報がきちんと書き込まれているか確認
4.にて「テキストファイルを書き出し」の処理をメール送信処理に変更する
4.で「成功」のみ返していたところを0を成功、9を失敗というように失敗も補足するようにして配列にし、json_encode()してechoする。
AjaxのdataTypeをjsonに指定し、Ajaxのコールバック（実行した結果）を受け取り、成功の場合は画面上に「メール送信成功」と出力

ちなみに、「Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能」という理解をされているというコメントがありましたが、少し正しくなくて
「Ajaxを利用することで画面遷移をせずに”サーバーサイドの処理を実行することが可能”」です。
とはいえ、サーバーに置いてあるjsonファイルを取得したりすることもあるので必ずしも「サーバーサイドのプログラミング言語」になるわけではありません。
で、実行結果でどうするかは要件・仕様次第で、htmlを書き換えるかどうかも要件・仕様次第です。

いずれにしても「画面遷移ありで」メール送信がきちんとできている前提でないと実現はできないと思いますが。PHPでやることはAjaxであろうとなかろうと変わらないので。

投稿2018/09/30 12:46

m.ts10806

総合スコア80888