Отправка формы без перезагрузки страницы

jQuery

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

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

Одним словом, урок очень полезный!

В сегодняшнем примере мы имеем простую форму с возможностью ввода имени, адреса электронной почты и номера телефона. Как я уже и говорил, форма содержит и php скрипт и родной jQuery, в том смысле, что не нужно устанавливать и скачивать никаких дополнительных плагинов.

Шаг 1 – создаем непосредственно саму HTML форму

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

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

Еще одна важная вещь. Не забудьте включить значение id в каждое поле ввода (строка начинается с тега input). Эти id значения jQuery сценарий будет искать для обработки формы.

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

jQuery

Шаг 2 – начинаем добавлять jQuery

Следующим шагом мы начнем добавлять по частям jQuery код. Я буду считать, что В уже скачали jQuery.

Далее открываем новый файл JavaScript, ссылаемся на него в xtml документе также, как и на любой другой файл JavaScript. Добавляем следующий код:

Первая функция (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:

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

jQuery

Теперь переходим к нашей основной функции – 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() фуекциии.

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

jQuery

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

На этом урок посвящённый отправке формы без перезагрузки страницы, средствами AJAX и jQuery, завершен. Всего Вам доброго!

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

Источник: //net.tutsplus.com

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

Метки: , , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (15)