Отправка формы обратной связи средствами AJAX

Для отправки формы обратной связи без перезагрузки страницы, сделаем следующее:

Создадим 2 файла: index.php, mail.php.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<style>
	.top_form_ok,.top_form_error {
		display: none;
	}
</style>
</head>
<body>
<?
echo time();
?>
<hr>
<div class="top_form">
	<form method="POST">
		Введите имя: <input name="name"><br/>
		Введите телефон: <input name="tel"><br/>
		Ваше сообщение: <textarea name="text"></textarea><br/>
		<input type="submit">
	</form>
</div>
<div class="top_form_ok">Успешно отправлено</div>
<div class="top_form_error">Что-то пошло не так</div>

<script>
	$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

		var name = $('.top_form input[name="name"]').val(); 
		var tel = $('.top_form input[name="tel"]').val();
		var text = $('.top_form textarea[name="text"]').val();
																// создаем переменные из полей формы

		var str = {

			'name' : name,
			'tel': tel,
			'text': text
		}														// собираем их в масив	


		$.ajax({
			type: "POST",											// тип отправки данных
			url: "mail.php",  // путь до пхп файла отправки письма
			data: str,												// какие данные отправляем
			success: function(msg) {                              // получаем ответ сервера

				if(msg) {                //если ответ равен  ... то
					$('.top_form_error').css('display','block');
				} else {
					$('.top_form_ok').css('display','block');
					$('.top_form').css('display','none');
				}
			}
		});

		return false;
	});

</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.top_form_ok,.top_form_error {

display: none;

}

</style>

</head>

<body>

echo time();

<hr>

Введите имя: <input name="name"><br/>

Введите телефон: <input name="tel"><br/>

Ваше сообщение: <textarea name="text"></textarea><br/>

</form>

</div>

<div class="top_form_ok">Успешно отправлено</div>

<div class="top_form_error">Что-то пошло не так</div>

$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

var name = $('.top_form input[name="name"]').val();

var tel = $('.top_form input[name="tel"]').val();

var text = $('.top_form textarea[name="text"]').val();

// создаем переменные из полей формы

var str = {

'name' : name,

'tel': tel,

'text': text

} // собираем их в масив

$.ajax({

type: "POST", // тип отправки данных

url: "mail.php", // путь до пхп файла отправки письма

data: str, // какие данные отправляем

success: function(msg) { // получаем ответ сервера

if(msg) { //если ответ равен ... то

$('.top_form_error').css('display','block');

} else {

$('.top_form_ok').css('display','block');

$('.top_form').css('display','none');

}

});

return false;

});

</script>

</body>

</html>

mail.php

<?php
function mailSend () {
	$name 		 = $_POST['name'];
	$tel 		 = $_POST['tel'];
	$text 		 = $_POST['text'];

	$site 		 = $_SERVER['HTTP_HOST'];

	$to 		 = "prog@site.ru";// от кого
	$from 		 = "admin@site.ru";// кому

	$subject	 = "Новое письмо с сайта {$site}";

	$message 	 = "<h1>Вам сообщение с сайта {$site}</h1>";
	$message 	.= "Имя: {$name}<br/>";
	$message 	.= "Телефон: {$tel}<br/>";
	$message 	.= "<hr>";
	$message 	.= $text;

	$header  	 = 'MIME-Version: 1.0' . "\r\n";
	$header 	.= "From: {$from}\r\n";
	$header 	.= "Content-type: text/html; charset=utf-8\r\n"; 
	$header 	.= "X-Mailer: PHP mail script";

	mail($to, $subject, $message, $header);
}

mailSend();
?>

<?php

function mailSend () {

$name = $_POST['name'];

$tel = $_POST['tel'];

$text = $_POST['text'];

$site = $_SERVER['HTTP_HOST'];

$to = "prog@site.ru";// от кого

$from = "admin@site.ru";// кому

$subject = "Новое письмо с сайта {$site}";

$message = "<h1>Вам сообщение с сайта {$site}</h1>";

$message .= "Имя: {$name}<br/>";

$message .= "Телефон: {$tel}<br/>";

$message .= "<hr>";

$message .= $text;

$header = 'MIME-Version: 1.0' . "\r\n";

$header .= "From: {$from}\r\n";

$header .= "Content-type: text/html; charset=utf-8\r\n";

$header .= "X-Mailer: PHP mail script";

mail($to, $subject, $message, $header);

}

mailSend();

2 thoughts on “Отправка формы обратной связи средствами AJAX”

Дмитрий 09.05.2017

Не работает. На почту приходят данные лишь первых двух полей:
$name = $_POST[‘name’];
$tel = $_POST[‘tel’];

Третье поле, и другие (если их создать), не приходят:
$text = $_POST[‘text’];
…

Войдите, чтобы ответить ↓
1. admin Post author12.05.2017
  
  Ручки кривые может?
  
  Войдите, чтобы ответить ↓

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.