Как сделать форму обратной связи на сайте

Дата публикации: 2016-09-07

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

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

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

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

$(function(){
	$('#recall').submit(function(e){
		e.preventDefault(); // отменяем поведение по умолчанию
		var data = $(this).serialize(); // получаем все данные формы
		console.log(data); // распечатываем их в консоль
	});
});

$(function(){

$('#recall').submit(function(e){

e.preventDefault(); // отменяем поведение по умолчанию

var data = $(this).serialize(); // получаем все данные формы

console.log(data); // распечатываем их в консоль

});

Что мы сделали? Первое, это присвоили тегу form идентификатор recall:

<form class="form-horizontal" id="recall">

1	<form class="form-horizontal" id="recall">

Ну а далее все должно быть понятно, поскольку я прокомментировал каждую строку кода.

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

Далее, следующей строкой мы получили все данные в переменную data, которую и распечатали в консоль. Если все сделано верно, то теперь при клике по кнопке Отправить мы должны увидеть в консоли браузера заполненные в форме данные.

Осталось отправить эти данные на сервер. Давайте создадим на сервере, рядом с текущим файлом, обработчик формы. Назовем его, к примеру, mail.php с простейшим содержимым:

<?php
echo 'Ответ от сервера:';
print_r($_POST);

<?php

echo 'Ответ от сервера:';

print_r($_POST);

Теперь добавим простейший ajax-запрос к обработчику:

$(function(){
	$('#recall').submit(function(e){
		e.preventDefault();
		var data = $(this).serialize();
		$.ajax({
			url: 'mail.php',
			type: 'POST',
			data: data,
			beforeSend: function(){
				$('#submit').next().text('Отправляю...');
			},
			success: function(res){
				$('#submit').next().text(res);
			},
			error: function(){
				alert('Ошибка!');
			}
		});
	});
});

$(function(){

$('#recall').submit(function(e){

e.preventDefault();

var data = $(this).serialize();

$.ajax({

url: 'mail.php',

type: 'POST',

data: data,

beforeSend: function(){

$('#submit').next().text('Отправляю...');

success: function(res){

$('#submit').next().text(res);

error: function(){

alert('Ошибка!');

}

});

Самой кнопке отправки формы я дополнительно присвоил идентификатор submit, а после кнопки добавил пустой span, в который мы и выведем пока ответ. Если мы нигде не ошиблись, тогда при отправке формы мы должны получить следующую картину:

Как видим, данные успешно отправляются на сервер, а оттуда, в свою очередь, приходит ответ. На этом мы будем завершать текущую статью. Кстати, вот исходники к ней. В следующей статье мы реализуем обработку формы на сервере. Дополнительно по данной теме вы можете посмотреть этот урок. На этом все. Удачи!

Метки: формы