Отправка формы без перезагрузки страницы
Сегодня я вам расскажу, как создать форму, которая будет отправляться без перезагрузки страницы. Это нам пригодится в комментариях, формах обратной связи, отзывах и других формах.
Форма работает по технологии 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>