Добрый день.
Есть форма с отправкой данных на email с помощью ajax.
Форма отправляется, но при этом страница перезагружается.
Как сделать чтобы отправка была без перезагрузки страницы?
Код:
HTML:
<form id="form">
<input type="text" name="name" required="required" />
<input type="text" name="phone" required="required" />
<input type="email" name="email" required="required" />
<div class="field">
<label class="label">Регион:</label>
<div class="control">
<div class="select">
<select name="region">
<option>Выберите регион</option>
<option>Ростовская область</option>
<option>Воронежская область</option>
<option>Московская область</option>
</select>
</div>
</div>
</div>
<input type="submit" value="Заказать звонок" />
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#form").submit(function () { // Устанавливаем событие отправки для формы с id=form
var form_data = $(this).serialize(); // Собираем все данные из формы
$.ajax({
type: "POST", // Метод отправки
url: "public/script/send.php", // Путь до php файла отправителя
data: form_data,
success: function () {
// Код в этом блоке выполняется при успешной отправке сообщения
alert("Ваше сообщение отправлено!");
}
});
});
});
</script>
Send.php:
<?
$to = "Адрес почты";
}
$subject = 'Обратный звонок'; //Заголовок сообщения
$message = '
<html>
<head>
<title>'.$subject.'</title>
</head>
<body>
<p>Имя: '.$_POST['name'].'</p>
<p>Телефон: '.$_POST['phone'].'</p>
<p>Email: '.$_POST['email'].'</p>
<p>Регион: '.$_POST['region'].'</p>
<p>Сообщение: '.$_POST['text'].'</p>
</body>
</html>'; //Текст сообщения
$headers = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
$headers .= "From: Отправитель <from@example.com>\r\n"; //Наименование и почта отправителя
mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
?>
