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

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

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"; — здесь указываем почту с доменом вашего сайта. Почта не обязательно должна существовать (хотя некоторые почтовые сервисы требуют и этого), но обязательно должна быть на домене сайта, с которого отправляется письмо, иначе оно будет попадать в СПАМ.

На этой странице