У цьому уроці Вам буде показано, як зробити контактну форму, через яку Ви будите посилати повідомлення електронної пошти без оновлення сторінки за допомогою jQuery. Давайте почнемо.
Обов'язково раджу Вам завантажити вихідний код всього уроку. Там будуть і php скрипт, який реалізує процес доставки повідомлення.
Одним словом, урок дуже корисний!
Крок 1 - створюємо безпосередньо саму HTML форму
Давайте поглянемо на наш html код. Ми починаємо з нашою основною html форми:
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Ви могли помітити, що я включив div id contact_ form, який охоплює весь код форми. Ви також могли помітити, що я залишив параметри action і method порожніми. Це я зробив спеціально, тому що про це пізніше подбати jQuery.
Ще одна важлива річ. Не забудьте включити значення id в кожне поле введення (рядок починається з тега input). Ці id значення jQuery сценарій буде шукати для обробки форми.
Я додав деякий css стилі і фонове зображення в Photoshop для отримання даної форми:
Крок 2 - починаємо додавати jQuery
Наступним кроком ми почнемо додавати по частинах jQuery код. Я буду вважати, що В уже завантажили jQuery.
Перша функція (function ()) він починає завантажувати події, як тільки html документ готовий. Якщо Ви вже робили будь-які роботи з jQuery, то функція така ж, як і document.ready функція. За кодом можна зрозуміти, що ми маємо функцію кліка по кнопці, з ім'ям класу «button». Таким чином ми тут досягли такого ж самого ефекту, як і якби ми в поле input нашої форми додали функцію onClick кнопки «відправити».
Крок 3 - написання форми перевірки введених даних
Усередині нашої функції, яка завантажується, коли сторінка готова, ми додаємо деяку перевірку введених даних. І перше, що Ви бачите, так це що додано $ ( '. Error'). Hide (). І це потрібно для того, щоб приховати наші 3 тега label з класом «error». Адже ми хочемо, щоб вони були приховані не тільки при першій завантаження сторінки, а й коли ви тиснете "відправити", в разі, коли одне з повідомлень було показано користувачеві раніше. Кожне повідомлення про помилку, потрібно показувати тільки тоді, коли введені невірні дані.
Перевірка першого поля: якщо поле для імені було залишено користувачем порожнім, ми показуємо повідомлення, записане в тезі label з ідентифікатором name_error. Потім ми поміщаємо фокус на поле введення імені, на випадок якщо користувач заплутався з тим, що йому робити далі. (Я думаю, не варто сильно напружуватися, коли мова йде про форму користувачів)
Пояснюю, як дана річ працює. У змінну "name" ми записуємо значення, яке було введено в поле з ідентифікатором "name" - це всього одна строчка на jQuary.
Потім перевіряється, марне поле, і якщо це так, то ми використовуємо jQuery's show () метод, щоб показати лейбл з id «name_error».
Потім ми повертаємо фокус на поле з ідентифікатором "name", і повертаємо false у функції.
Переконайтеся, що у вас є в кінці даного коду return false, інакше значення всіх полів будуть відправлені (що повністю порушує задумку даного уроку). return false не дозволяє користувачеві відправити дані форми, поки все поля не будуть заповнені.
Крок 4 - процес відправки даних форми з використанням jQuery's Ajax функцій
Тепер переходимо, так би мовити, до серця нашого навчального матеріалу - створення меню без оновлення сторінки, яка відправляє значення форми за допомогою php скриптів у фоновому режимі. Давайте поглянемо спочатку на весь код повністю, а потім я буду розповідати про окремо зроблені кроки. Додайте цей код в той же документ tutorial.js, тільки нижче коду, записаного пунктом вище.
У нас багато чого тут відбувається! Давайте спочатку розіб'ємо весь цей код на частини. По частинах в ньому простіше розібратися. Спершу ми створюємо рядок значень. Вона містить значення всіх полів нашої форми, які ми хочемо передати скрипту, який відправляє повідомлення.
Нагадаю, раніше ми оголосили змінну "name" і встановили їй в якості значення те, що було введено в поле з ідентифікатором "name".
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Ми можемо використовувати значення 'name' знову, а також значення 'email' і 'phone', для того, щоб створити рядок значень dataString:
Тепер переходимо до нашої основної функції - ajax. Тут відбуваються всі дії, тому приділяємо пильну увагу.
Основне, що відбувається в коді це. ajax () функція обробляє значення з нашої рядки dataString (data: dataString), з викликом php скрипта на ім'я process.php (url: "bin / process.php»), використовуючи метод POST (type: "POST»). Якщо наш скрипт працює успішно, то ми зможемо відобразити повідомлення користувачу про успіх, і, нарешті, return falls, якщо сторінка не оновлюється. От і все. Весь процес відбувається всього-то в пару рядків!
Є більш просунуті речі, які Ви можете зробити тут, ніж відправити email і отримання повідомлення про успіхи дій. Наприклад, Ви можете відправити Ваші значення в базу даних, обробити їх, а потім відобразити результати назад користувачеві. Так що, якщо у Вас є голосування на сайті, Ви можете обробити їх голосування і відобразити користувачеві результати без оновлення всієї сторінки.
Давайте підіб'ємо підсумок в тому, що сталося в нашому прикладі, щоб переконатися, що ми все охопили. Ми взяли наші значенні з jQuery і потім їх додали в рядок, як тут:
Потім ми використовували функцію jQuery - ajax для обробки значень в рядку dataString. Потім процес закінчується успішно, і ми показуємо повідомлення користувачу і return false, якщо не відбувається поновлення на нашій сторінці:
Крок 5 - реалізовуємо показ повідомлення користувачу після введення даних в форму
Давайте коротенько подивимося на частину коду, яка реалізує показ повідомлення користувачу.
По-перше, ми поміняємо весь вміст contact_form Div (згадайте, я говорив, що ми будемо мати потребу в даному div) з наступною рядком:
Що зроблено? Ми замінили весь div з id = "contact_form", використовуючи jQuery html () функції. Отже, замість форми ми отримали новий div c id = 'message'. Далі ставимо в цей div повідомлення - воно буде в тезі h2 з підписом "Contact Form Submitted"
Далі ми додамо ще більше вмісту в наш div використовуючи jQuery's append () функцію, потім ми приховуємо весь div з нашим повідомленням використовуючи jQuery hide () функцію, і застосуємо класний ефект появи з використанням fadeIn () фуекціі.
У підсумку ось що побачить користувач, після правильного введення даних в форму:
На цьому урок присвячений відправці форми без перезавантаження сторінки, засобами AJAX і jQuery, завершено. Всього Вам доброго!
Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Прямо зараз подивіться курс по організації динамічної роботи з формами!