Отправить всю HTML форму целиком AJAX PHP
Очень часто на сайтах крупных и небольших компаний Вы можете встретить страницу контактов, где каждый желающий может связаться с администрацией или владельцами фирмы и задать интересующих их вопрос. Это просто и удобно. Постарайтесь вспомнить как обычно проиходит передача данных из HTML формы на сервер для обработки информации. Обычно это выглядит очень не привлекательно к пользователю, ведь нужно ждать, пока закончится передача прикреплённых файлов, произойдет отправка всех данных из формы и, что самое страшное, произойдёт обновление страницы. Поскольку скорость обработки напрямую зависит от скорости Интернета и мощности компьютеров (на что мы не можем напрямую повлиять), нам остаётся только сделать процесс передачи информации из HTML формы более привлекательной. В этом уроке мы расскажем Вам как отправить всю форму целиком при помощи JavaScript, PHP и AJAX.
HTML
<form method="POST" id="contact" action="javascript:void(null);" onsubmit="contact()"> <input type="text" name="name" placeholder="Фамилия и Имя" required> <input type="email" name="email" placeholder="Email адрес" required> <input type="text" name="subject" placeholder="Тема обращения" required> <textarea name="message" cols="30" rows="10" placeholder="Текст сообщения . . ." required></textarea> <button type="submit">Отправить сообщение</button> </form> <div id="result_contact"></div>
Java Script
<script type="text/javascript" language="javascript"> function contact() { var msg = $( '#contact' ).serialize(); $.ajax( { type: 'POST', url: 'contact.php', data: msg, beforeSend: function () { $( '#result_contact' ).html( '<img src="images/load.svg" />' ); }, success: function ( data ) { $( '#result_contact' ).html( data ); }, error: function ( xhr, str ) { alert( 'Возникла ошибка: ' + xhr.responseCode ); } } ); } </script>
Разберём подробнее HTML код. Первой и седьмой строкой мы объявляем форму c методом передачи данных POST, с идентификатором contact, без действия и при отправке использовать JS функцию contact().
Метод передачи информации может быть либо POST (как в нашем случае), либо GET. Основные отличия только два, а именно при методе GET передаваемая информация будет отображаться в адресной строке браузера, а при POST все передаваемые переменные будут незаметно передаваться напрямую веб серверу. Так же есть отличие в количестве и типах передаваемыех данных. В GET можно передавть с ограничением на количество символов, а в POST можно передавать так же файлы и без ограничений на количество символов, байт и т.п.
Далее с помощью тегов input и textarea мы создаем необходимые поля формы, которым даём имя и незабываем указывать тип поля. Атрибут placeholder отвечает за вывод подсказки, когда поле пустое, а атрибут required указывает на то, что данное поле обязательно должно быть заполнено пользователем, иначе форма просто не отправится. После создаём одну кнопку с помощью тега button с типом submit (отправить форму). Закрываем нашу форму и добавляем блок с ID, в котором мы будем выводить ответ AJAX запроса. В нашем случае это будет либо положительный ответ, что письмо успешно отправлено, либо отрицательный.