Як зробити форму зворотного звязку на сайті

411

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

Отже, завдання даної статті — відправлення даних на сервер без перезавантаження сторінки. Обробкою даних ми займемося вже в наступній статті. Почнемо, мабуть.

Оскільки ми будемо продовжувати роботу, розпочату в попередній статті, ми скористаємося вихідними кодами з неї. Також для роботи нам знадобиться локальний сервер. Як оного я рекомендую встановити, якщо ви цього ще не зробили, і використовувати Open Server. Вихідні файли поточної статті ви можете завантажити за посиланням.

Почнемо писати невеликий скрипт, який буде асинхронно, тобто без перезавантаження сторінки, відправляти форми на сервер. Для початку одержимо всі дані форми в змінну. Це допоможе зробити функція serialize в jQuery. Також скасуємо дефолтний поведінку кнопки форми, щоб вона не перевантажувала сторінку і не відправляла форму за промовчанням.

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

Що ми зробили? Перше, це присвоїли тега form ідентифікатор recall:

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

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

Далі, наступним рядком ми отримали всі дані в змінну data, яку і роздрукували в консоль. Якщо все зроблено вірно, то тепер при кліку по кнопці Відправити ми повинні побачити в консолі браузера заповнені у формі дані.

Як зробити форму зворотного звязку на сайті

Залишилося відправити ці дані на сервер. Давайте створимо на сервері, поряд з поточним файлом, обробник форми. Назвемо його, наприклад, mail.php з найпростішим вмістом:

Тепер додамо найпростіший 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(‘Помилка!’);
}
});
});
});

Самій кнопці відправки форми я додатково присвоїв ідентифікатор submit, а після кнопки додав порожній span, в який ми і виведемо поки відповідь. Якщо ми ніде не помилилися, тоді при відправці форми ми повинні отримати наступну картину:

Як зробити форму зворотного звязку на сайті

Як бачимо, дані успішно відправляються на сервер, а звідти, у свою чергу, приходить відповідь. На цьому ми будемо завершувати поточну статтю. До речі, ось код до неї. У наступній статті ми реалізуємо обробку форми на сервері. Додатково по даній темі ви можете подивитися цей урок. На цьому все. Удачі!