Відправка форми без перезавантаження сторінки

12

У цьому уроці Вам буде показано, як зробити контактну форму, через яку Ви будете надсилати електронне повідомлення без оновлення сторінки за допомогою jQuery. Давайте почнемо.

Обов’язково раджу Вам завантажити вихідний код всього уроку. Там будуть і php скрипт, який реалізує процес доставки повідомлення.

Одним словом, урок дуже корисний!

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

Крок 1 – створюємо безпосередньо саму форму HTML

Давайте поглянемо на наш html код. Ми починаємо з нашої основний html форми:

Name
This field is required.
Return Email
This field is required.
Return Phone
This field is required.

Ви могли помітити, що я включив div id contact_ form, який охоплює весь код форми. Ви також могли помітити, що я залишив параметри action і method порожніми. Це я зробив спеціально, т. к. про це пізніше подбати jQuery.

Ще одна важлива річ. Не забудьте включити значення id кожне поле вводу (рядок починається з тега input). Ці id значення jQuery сценарій буде шукати для обробки форми.

Я додав деякий css стилі і фонове зображення у Photoshop для одержання даної форми:

Відправка форми без перезавантаження сторінки

Крок 2 – починаємо додавати jQuery

Наступним кроком ми почнемо додавати частинами jQuery код. Я буду вважати, що вже завантажили jQuery.

Далі відкриваємо новий файл JavaScript, посилаємося на нього в xtml документі також, як і на будь-який інший файл JavaScript. Додаємо наступний код:

$(function() {
$(«.button»).click(function() {
// validate and process form here
});
});

Перша функція (function()) він починає завантажувати події, як тільки html документ готовий. Якщо Ви вже робили які-небудь роботи з jQuery, то функція така ж, як і document.ready функція. За кодом можна зрозуміти, що ми маємо функцію кліка по кнопці, з ім’ям класу «button». Таким чином ми тут досягли такого ж самого ефекту, як і якщо б ми в полі input нашої форми додали функцію onClick кнопки «відправити».

Крок 3 – написання форми перевірки введених даних

$(function() {
$(‘.error’).hide();
$(«.button»).click(function() {
// validate and process form here
$(‘.error’).hide();
var name = $(«input#name»).val();
if («name»== «») {
$(«label#name_error»).show();
$(«input#name»).focus();
return false;
}
var email = $(«input#email»).val();
if (email == «») {
$(«label#email_error»).show();
$(«input#email»).focus();
return false;
}
var phone = $(«input#phone»).val();
if (phone == «») {
$(«label#phone_error»).show();
$(«input#phone»).focus();
return false;
}
});
});

Всередині нашої функції, яка завантажується, коли сторінка готова, ми додаємо певну перевірку введених даних. І перше, що Ви бачите, що додано $(‘.error’).hide(). І це потрібно для того, щоб приховати наші 3 тега label з класом «error». Ми ж хочемо, щоб вони були приховані не тільки при першій завантаження сторінок, але і коли ви тиснете «надіслати», в разі, коли одне з повідомлень було показано користувачеві раніше. Кожне повідомлення про помилку, що має показуватися тільки тоді, коли введено неправильні дані.

Перевірка першого поля: якщо поле для імені було залишено користувачем порожнім, ми показуємо повідомлення, записане в тезі label з ідентифікатором name_error. Потім ми поміщаємо фокус на полі введення імені, на випадок якщо користувач заплутався з тим, що йому робити далі. (Я думаю, не варто сильно напружуватися, коли мова йде про форму користувачів)

Пояснюю, як ця річ працює. У змінну «name» ми записуємо значення, яке було введено у полі з ідентифікатором «name» – це всього одна строчка на jQuary.

var name = $(«input#name»).val();

Потім перевіряється, порожнє поле, і якщо це так, то ми використовуємо jQuery’s show() метод, щоб показати лейбл з id «name_error».

if («name»== «») {
$(«label#name_error»).show();
}

Потім ми повертаємо фокус на поле з ідентифікатором «name», і повертаємо false у функції.

if («name»== «») {
$(«label#name_error»).show();
$(«input#name»).focus();
return false;
}

Переконайтеся, що у вас є в кінці даного коду return false, інакше значення всіх полів будуть відправлені (що повністю порушує задум даного уроку). return false не дозволяє користувачеві надіслати дані форми, поки всі поля будуть заповнені.

Крок 4 – процес надсилання даних форми з використанням jQuery’s Ajax функцій

Тепер переходимо, так сказати, до серця нашого навчального матеріалу – створення меню без оновлення сторінки, яка відправляє значення форми за допомогою php скриптів у фоновому режимі. Давайте спочатку поглянемо на весь код, а потім я буду розповідати про окремо зроблених кроків. Додайте цей код у той же документ tutorial.js тільки нижче коду, записаного пунктом вище.

var dataString = ‘name=’+ name + ‘&email=’ + email + ‘&phone=’ + phone;
//alert (dataString);return false;
$.ajax({
type: «POST»,
url: «bin/process.php»,
data: dataString,
success: function() {
$(‘#contact_form’).html(«

«);
$(‘#message’).html(«

Contact Form Submitted!

«)
.append(«

We will be in touch soon.

«)
.hide()
.fadeIn(1500, function() {
$(‘#message’).append(«Відправка форми без перезавантаження сторінки«);
});
}
});
return false;

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

Нагадаю, раніше ми оголосили змінну «name» і встановили їй значення те, що було введене в поле з ідентифікатором «name».

var name = $(«input#name»).val();

Ми можемо використовувати значення ‘name’ знову, а також значення ’email’ і ‘phone’, для того, щоб створити рядок значень dataString:

var dataString = ‘name=’+ name + ‘&email=’ + email + ‘&phone=’ + phone;

Я закомментировал попередження, щоб бути впевненим в тому, я вводжу правильні значення, що, безсумнівно, допоможе в процесі. Якщо коментувати alert (другий рядок) і протестувати нашу форму, щоб бути впевненими, що все йде правильно. Ви отримаєте повідомлення як на картинці:

Відправка форми без перезавантаження сторінки

Тепер переходимо до нашої основної функції – ajax. Тут відбуваються всі дії, тому приділяємо пильну увагу.

$.ajax({
type: «POST»,
url: «bin/process.php»,
data: dataString,
success: function() {
//display message back to user here
}
});
return false;

Основне, що відбувається в коді це: .ajax() функція обробляє значення з нашої рядка dataString (data:dataString), з викликом php скрипта імені process.php (url:»bin/process.php»), використовуючи метод POST (type:»POST»). Якщо наш скрипт працює успішно, то ми зможемо показати повідомлення користувачу про успіх, і, нарешті, return falls, якщо сторінка не оновлюється. От і все. Весь процес відбувається всього в кілька рядків!

Є більш просунуті речі, які Ви можете зробити тут, ніж відправити email і отримання повідомлення про успіхи дій. Наприклад, Ви можете надіслати Ваші значення в базу даних, опрацювати їх, а потім відобразити результати назад користувачеві. Так що, якщо у Вас є голосування на сайті, Ви можете обробити їх голосування і відобразити користувачеві результати без оновлення всієї сторінки.

Давайте підведемо підсумок у тому, що сталося в нашому прикладі, щоб переконатися, що ми всі охопили. Ми взяли наші значенні з jQuery і потім їх додали в рядок, як тут:

var name = $(«input#name»).val();
var email = $(«input#email»).val();
var phone = $(«input#phone»).val();
var dataString = ‘name=’+ name + ‘&email=’ + email + ‘&phone=’ + phone;

Потім ми використовували функцію jQuery – ajax для обробки значень у рядку dataString. Потім процес закінчується успішно, і ми показуємо повідомлення користувачеві і return false, якщо не відбувається оновлення на нашій сторінці:

$.ajax({
type: «POST»,
url: «bin/process.php»,
data: dataString,
success: function() {
$(‘#contact_form’).html(«

«);
$(‘#message’).html(«

Contact Form Submitted!

«)
.append(«

We will be in touch soon.

«)
.hide()
.fadeIn(1500, function() {
$(‘#message’).append(«Відправка форми без перезавантаження сторінки«);
});
}
});
return false;

Крок 5 – реалізовуємо показ повідомлення користувачу після введення даних у форму

Давайте коротенько подивимося на частину коду, яка реалізує показ повідомлення користувачеві.

По-перше, ми поміняємо всі вміст contact_form Div (згадайте, я говорив, що ми будемо мати потребу в даному div) з наступним рядком:

$(‘#contact_form’).html(«

«);

Що зроблено? Ми замінили весь div з id=» contact_form «, використовуючи jQuery (html) функції. Отже, замість форми ми отримали новий div c id=’message’. Далі ставимо в цей div повідомлення – воно буде на тезі h2 з підписом «Contact Form Submitted»

$(‘#message’).html(«

Contact Form Submitted!

«)

Далі ми додамо ще більше вмісту в наш div використовуючи jQuery’s append() функцію, потім ми приховаємо весь div з нашим повідомленням використовуючи jQuery hide() функцію, і застосуємо класний ефект появи з використанням fadeIn() фуекциии.

.append(«

We will be in touch soon.

«)
.hide()
.fadeIn(1500, function() {
$(‘#message’).append(«Відправка форми без перезавантаження сторінки«);
});

В результаті ось що побачить користувач, після правильного введення даних у форму:

Відправка форми без перезавантаження сторінки

Тепер Ви бачите наскільки просто створити форму без оновлення всі сторінки за допомогою jQuery — ajax. Просто отримати значення JavaScript, обробити їх функції ajax і, якщо вони помилкові, то повернути, якщо дійсні, то рухатися далі. Ви можете обробити значення в php скрипт також, як і в будь-якому іншому файлі php, з тією лише різницею, що користувачеві не доведеться чекати оновлення сторінки – все це відбувається в фоновому режимі.

На цьому урок присвячений відправці форми без перезавантаження сторінки, засобами AJAX та jQuery, завершено. Всього Вам доброго!

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.