Отправка формы без перезагрузки страницы на PHP и Ajax

Отправка формы без перезагрузки страницы на PHP и Ajax

15 сентября 2019 PHP

Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара.

Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.

Используя только одно включение кода из этого примера, можно создать неограниченное количество различных форм на странице. Это будет актуально, например для сайтов лендингов, где на одной странице используется множество различных форм.

HTML-код формы

Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение.
Один важный момент: у тега <form> обязательно должен быть id. Если на странице будут использоваться несколько форм, то id соответственно должны быть различные.

Зачем это нужно? Именно по этому идентификатору скрипт и будет отличать отправленную форму от других. И при этом не возникнет необходимости делать несколько включений одного и того же JavaScript кода. Но тут опять же все индивидуально и вы можете переделать код как вам удобно.

<form id="feedback-form" action="">
	<input type="text" name="name" required placeholder="Ваше имя">
	<input type="tel" name="phone" required placeholder="Ваш телефон">
	<textarea name="text" placeholder="Ваш текст"></textarea>
	<input type="submit" name="submit" value="Отправить">
</form>

В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:

  • text — простое текстовое поле
  • tel — телефон
  • email — e-mail
  • hidden — скрытое текстовое поле

Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.

Отправка формы без перезагрузки страницы

Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом </body>

И не забудьте перед кодом подключить библиотеку jQuery!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

$(document).ready(function () {
    $("form").submit(function () {
		// Получение ID формы
		var formID = $(this).attr('id');
		// Добавление решётки к имени ID
		var formNm = $('#' + formID);
		$.ajax({
			type: "POST",
			url: '/send.php',
			data: formNm.serialize(),
			beforeSend: function () {
				// Вывод текста в процессе отправки
				$(formNm).html('<p style="text-align:center">Отправка...</p>');
			},
			success: function (data) {
				// Вывод текста результата отправки
				$(formNm).html('<p style="text-align:center">'+data+'</p>');
			},
			error: function (jqXHR, text, error) {
				// Вывод текста ошибки отправки
				$(formNm).html(error);
			}
		});
		return false;
	});
});

Скрипт отслеживает событие submit и получает id той формы, которая была отправлена. Далее по имеющемуся id он обращается к данным этой формы. В данном примере скрипт отслеживает все элементы с тегом <form>.

Хотите купить новый телефон? Здесь вы можете купить айфон краснодар с высоким качеством и по низкой цене.

После получения данных, скрипт передает их PHP обработчику send.php, который находится в корне сайта. Во время отправки данных в теге <form> выводятся сообщения из функций beforeSend — перед отправкой, success — в случае успеха и error в случае ошибки. Сами поля формы и кнопка отправки при этом стираются.

PHP обработчик

<?
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && !empty($_POST['name'])) {
    $message = 'Имя: ' . $_POST['name'] . ' ';
    $message .= 'Телефон: ' . $_POST['phone'] . ' ';
	if(!empty($_POST['text'])) {
		$message .= 'Текст: ' . $_POST['text'] . ' ';
	}

    $mailTo = "mail@mail.ru"; // Ваш e-mail
    $subject = "Письмо с сайта"; // Тема сообщения

    $headers= "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: info@site.ru <info@site.ru>\r\n";

    if(mail($mailTo, $subject, $message, $headers)) {
        echo "Спасибо, ".$_POST['name'].", мы свяжемся с вами в самое ближайшее время!"; 
    } else {
        echo "Сообщение не отправлено!"; 
    }
}
?>

В самом начале проверяем, что запрос пришел из Ajax и что поле имя не пусто. Далее получаем данные переданные Ajax имя, телефон и сообщение если есть. Устанавливаем заголовки и отправляем с помощью PHP-функции mail().

$mailTo — ваш e-mail, куда будут приходить сообщения с сайта
$subject — тема сообщения
$headers .= "From: info@site.ru info@site.ru\r\n"; — здесь указываем почту с доменом вашего сайта. Почта не обязательно должна существовать (хотя некоторые почтовые сервисы требуют и этого), но обязательно должна быть на домене сайта, с которого отправляется письмо, иначе оно будет попадать в СПАМ.

Заключение

Как вы могли убедиться использовать технологию AJAX с библиотекой jQuery и отправлять письма без перезагрузки страницы вообще проще простого. Надеюсь этот пример формы на PHP и AJAX или отдельные его части пригодятся вам для разработки различных решений для сайта.

Климатическая техника подробнее здесь

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
WordPress подгрузка постов кнопкой показать еще или бесконечным скроллом

Кнопка "Показать ещё" и бесконечный скроллинг - это по сути постраничная навигация, которая подгружает следующую страницу с постами без перезагрузки страницы. Подобные примеры часто можно встретить в лентах соц. сетей. В этом примере показана реализация кнопки "Показать ещё" и бесконечного Читать далее

Календарь на PHP и Ajax

Пример календаря на PHP и Ajax с переключением месяцев. Можно использовать как заготовку для решения любых задач. Я использовал его для создания плагина календаря мероприятий на WordPress. Скрипт использует процедурный подход, но имеет разделенную структуру с шаблоном , что довольно Читать далее

WordPress Ajax

По большей части публикации про применение Ajax в WordPress сложные для понимания, особенно если вы мало знакомы с этой технологией. В этой статье я покажу, как на самом деле просто использовать Ajax в публичной части сайта. Ajax запросы в WordPress Читать далее

PHP классы, объекты, методы

Абсолютно любой предмет из нашей жизни мы можем описать по его характеристикам и состоянию, а так же воздействовать на это состояние. Например, ваш автомобиль имеет определенный цвет, марку, двигатель и т.д. Кроме того он может ехать, стоять, набирать или сбавлять Читать далее

Удалить значение из массива на PHP

Удалить значение из массива по ключу на PHP довольно простая задача, но вот когда необходимо удалить элемент массива именно по значению, то тут возникают небольшие сложности. Вроде бы банальная задача, но придется воспользоваться небольшой хитростью. В этой статье рассмотрим как Читать далее

Создание чат-бота для Viber

В этой статье рассмотрим как создать простого чат-бота для Viber, который будет принимать и отправлять сообщения в чат. Шаг 1 Итак, для начала необходимо зарегистрироваться в сервисе Viber Admin Panel по этой ссылке. Шаг 2 Создаём бота. Для этого заполняем Читать далее

15 комментариев на «Отправка формы без перезагрузки страницы на PHP и Ajax»

  1. Александр:

    Спасибо за понятный для начинающего пример! Странно, что нет комментариев… Поэтому и написал )

  2. Антон:

    Всё работает — и работает быстро! Спасибо большое!!!

  3. Денис:

    Учу php 1 месяц, буду пробовать использовать этот код

  4. иван:

    А как эту форму в popup окне вывести?

  5. Антон:

    Вывести вышеприведенный код во всплывающем окне. Само окно можно реализовать, например на Bootstrap.

  6. Bigaff:

    Единственный нормально рабочий код из всего интернета. Спасибо братец!

  7. Окунь:

    Не работает, скопировал все в точности. Выводит «Сообщение не отправлено»
    Заменил только имя своей почты, куда должно отправиться письмо

  8. Савва:

    Как вернуть форму назад после отправки?

  9. Антон:

    Функция mail() не срабатывает. Скорее всего проблема в хостинге.

  10. Антон:

    Чтобы форма не скрывалась после отправки, нужно переделать методы success и error в js, а результат их работы можно выводить, например, на странице рядом с формой или в alert(). Но тогда еще нужно будет позаботиться о том, чтобы не было массовой отправки сообщений при нескольких нажатиях на кнопку «Отправить».

  11. Константин:

    А можно ли тоже самое провернуть с методом GET?

  12. Роман:

    Блин! За 1 минуту поставил! То что нужно, с другой формой полчаса мозги долбил с другого сайта так и не заработала. Спасибо! Все просто и круто! Однозначно куча лайков если бы была!!!!!!!!!!!!

  13. Артур:

    Все четко! без проблем внедрил в asp.net core проект!

  14. Ярослав:

    Спасибо, долго искал именно такое простое решение!

  15. Валерий:

    Здравствуйте. Вы забыли про CSS формы. Форму поставил но все поля идут в одну строку с разной высотой. Если можно дайте CSS на почту zai@bk.ru

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

*

code