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

Сегодня я вам расскажу, как создать форму, которая будет отправляться без перезагрузки страницы. Это нам пригодится в комментариях, формах обратной связи, отзывах и других формах.
Форма работает по технологии AJAX с использованием библиотеки jQuery.
Для начала нам нужно подключить библиотеку jQuery, если она не подключена:

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

Теперь можем приступить к созданию самой формы:

<div id="results"></div> <!-- Здесь будет выводиться результат отправки -->
<form id="formsend" onsubmit="call()"> <!--- Вызов функции отправки --->
  <legend>Форма обратной связи</legend> 
  <label for="name">Имя:</label>
  <input id="name" name="name" value="" type="text">
  <label for="email">E-mail:</label>
  <input id="email" name="email" value="" type="text">
  <label for="phone">Телефон:</label>
  <input id="phone" name="phone" value="" type="text">
  <input value="Отправить" type="submit"> 
</form>

И напишем саму функцию отправки:

<script type="text/javascript">
    function call() {
       var msg = $('#formsend').serialize();
       $.ajax({
         type: 'POST', // Метод отправки GET/POST
         url: 'formx.php', // Наш php скрипт, который будет обрабатывать запрос
         data: msg,
       success: function(data) { // Если отправка успешна, выводим в div "results"
            $('#formsend').remove(); // Скрываем форму после отправки
            $('#results').html('Форма успешно отправлена'); // Можно использовать data, чтобы вывести ответ из php скрипта
         },
       error:  function(xhr, str){ // В случаи ошибки отправки
            $('#results').html('Форма не отправлена: ' + xhr.responseCode);
         }
       });
   }
</script>

Комменарии

Написать комментарий

Примечание: HTML разметка не поддерживается! Используйте обычный текст.
    Плохо           Хорошо
Защита от роботов