Отправить форму без обновления страницы с помощью jQuery

Ранее в Nettuts + Филон показал, как можно использовать jQuery для добавления проверки формы в комментарии WordPress, которая работает без перезагрузки страницы. Еще один замечательный способ использования jQuery для повышения удобства работы пользователей — это не просто проверить, но и отправить форму полностью без обновления страницы.

В этом уроке я покажу вам, как легко это сделать — отправьте контактную форму, которая отправляет электронное письмо, без обновления страницы с помощью jQuery! (Фактическое письмо отправляется с помощью php-скрипта, который обрабатывается в фоновом режиме). Давайте начнем.

Если вы хотите получить готовое решение, попробуйте Ultimate PHP, HTML5 & AJAX Contact Form или просмотрите другие скрипты форм для продажи на Envato Market.

Что мы строим

В этом примере у нас есть простая контактная форма с именем, адресом электронной почты и номером телефона. Форма отправляет все поля в php-скрипт без обновления страницы, используя встроенные функции jQuery (собственное значение, вам не нужно загружать дополнительные плагины, чтобы это работало.

Если вы нашли эту статью без какого-либо предварительного знакомства с jQuery, отличным местом для начала была бы статья Джеффри Уэя о 15 ресурсах, которая поможет вам начать работу с jQuery From Scratch .

Шаг 1 — Создайте форму HTML

Давайте посмотрим на нашу HTML-разметку. Мы начнем с нашей основной HTML-формы:

Вы можете заметить, что я включил div с идентификатором contact_form, который охватывает всю форму.
Обязательно не пропустите этот div в своей собственной форме, так как позже нам понадобится этот div-упаковщик. Вы
Я также мог бы заметить, что я оставил поля действия и метода в теге формы пустыми. Мы
на самом деле ни один из них здесь не нужен, потому что jQuery позаботится обо всем этом позже.

Еще одна важная вещь, которую необходимо включить, — это значения идентификаторов для каждого поля ввода. Значения идентификатора
это то, что ваш jQuery-скрипт будет искать для обработки формы.

Я добавил несколько стилей CSS и фоновое изображение в Photoshop, чтобы получить следующую форму:

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

Следующий шаг в этом процессе — добавить код jQuery. Я предполагаю, что вы загрузили jQuery , загрузили на свой сервер и ссылаетесь на него на своей веб-странице .

Затем откройте еще один новый файл javascript, укажите его в своем html-файле так же, как в обычном файле JavaScript,
и добавьте следующее:

  $ (function () {
     $ (". button"). click (function () {
       // проверить и обработать форму здесь
     });
   }); 

Первая функция () выполняет загрузку событий внутрь, как только готов HTML-документ. Если вы ранее выполняли какую-либо работу в jQuery, эта функция аналогична функции document.ready в jQuery. Итак, мы начинаем с этого, и внутри у нас есть функция click, которая выполняется при нажатии кнопки submit с именем класса «button». В конечном итоге, с помощью этих строк кода мы достигли того же результата, что и добавление события onclick к кнопке отправки в html. Причина, по которой мы делаем это с помощью jQuery, заключается в чистом отделении нашей презентации от наших сценариев.

Шаг 3 — Напишите некоторую проверку формы

  $ (function () {
     $ ( 'Ошибка.') Скрыть ().
     $ (". button"). click (function () {
       // проверить и обработать форму здесь
      
       $ ( 'Ошибка.') Скрыть ().
  	   var name = $ ("input # name"). val ();
  		 if (name == "") {
         $ ( "# Метка NAME_ERROR") показывают ().
         $ ( "# Введите название") фокус ().
         вернуть ложь;
       }
  		 var email = $ ("input # email"). val ();
  		 if (email == "") {
         $ ( "# Метка email_error") показывают ().
         $ ( "# Вход по электронной почте") фокус ().
         вернуть ложь;
       }
  		 var phone = $ ("input # phone"). val ();
  		 if (phone == "") {
         $ ( "# Метка phone_error") показывают ().
         $ ( "# Вход телефон") фокус ().
         вернуть ложь;
       }
      
     });
   }); 

Внутри нашей функции, которая загружается, когда страница готова, мы добавляем некоторую проверку формы. Но первое, что вы видите, что это было добавлено, это $ (‘. Error’). Hide () ;. Это скрывает наши 3 метки с именем класса «error». Мы хотим, чтобы эти ярлыки были скрыты не только тогда, когда
страница сначала загружается, но также и при нажатии кнопки «Отправить», если одно из сообщений ранее было показано пользователю. Каждое сообщение об ошибке должно появляться только в том случае, если проверка не работает.

Мы проверяем, сначала проверяя, было ли поле имени оставлено пустым пользователем, и если это так, мы затем показываем метку с идентификатором name_error. Затем мы помещаем фокус на поле ввода имени, в случае, если пользователь
совсем не путаюсь с тем, что делать дальше! (Я научился никогда не брать на себя слишком много, когда дело доходит до пользователей формы).

Чтобы объяснить более подробно, как мы это делаем, мы устанавливаем переменную ‘name’ в значение поля ввода с идентификатором «name» — все с одной строкой jQuery:

  var name = $ ("input # name"). val (); 

Затем мы проверяем, является ли это значение пустым, и если это так, мы используем метод show () jQuery, чтобы показать метку с
id «name_error»:

  if (name == "") {
     $ ( "# Метка NAME_ERROR") показывают ().
   } 

Затем мы помещаем фокус формы обратно в поле ввода с идентификатором «name» и, наконец, возвращаем false:

  if (name == "") {
     $ ( "# Метка NAME_ERROR") показывают ().
     $ ( "# Введите название") фокус ().
     вернуть ложь;
   } 

Обязательно верните false в своем коде, иначе вся форма будет отправлена ​​(что побеждает
цель этого урока)! Что возвращает false, так это то, что он мешает пользователю продолжить работу
без заполнения обязательных полей.

Шаг 4 — обработайте отправку формы с помощью функции jJuery AJAX

Теперь мы переходим к сути учебника — отправляем нашу форму без обновления страницы, которая отправляет значения формы в php-скрипт в фоновом режиме. Давайте сначала посмотрим на весь код, а затем я расскажу подробнее. Добавьте следующий код чуть ниже фрагмента проверки, который мы добавили ранее (и до того, как функция нажатия кнопки будет закрыта):

  var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
   // alert (dataString); return false;
   $ .Ajax ({
     тип: "POST",
     URL: "bin / process.php",
     data: dataString,
     success: function () {
       $ ('# contact_form'). html ("<div id = 'message'> </ div>");
       $ ('# message'). html ("<h2> Форма контакта отправлена! </ h2>")
       .append ("<p> Мы скоро свяжемся. </ p>")
       .скрывать()
       .fadeIn (1500, function () {
         $ ('# message'). append ("<img id = 'checkmark' src = 'images / check.png' />");
       });
     }
   });
   вернуть ложь; 

У нас здесь много чего происходит! Давайте разберем все это — это так просто и так легко использовать, когда вы поймете процесс. Сначала мы создаем строку значений, которые являются всеми значениями формы, которые мы хотим передать сценарию, отправляющему электронное письмо.

Напомним, ранее мы установили переменную «name» со значением поля ввода с идентификатором «name», например:

  var name = $ ("input # name"). val (); 

Мы можем использовать это значение «name» снова, а также значения «email» и «phone», чтобы создать нашу dataString:

  var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; 

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

Теперь мы добрались до нашей главной функции ajax, звезды сегодняшнего шоу. Здесь происходит все действие, так что платите
пристальное внимание!

  $ .Ajax ({
     тип: "POST",
     URL: "bin / process.php",
     data: dataString,
     success: function () {
       // выводим сообщение обратно пользователю
     }
   });
   вернуть ложь; 

По сути, в коде происходит следующее: функция .ajax () обрабатывает значения из нашей строки с именем dataString (data: dataString) с помощью php-скрипта с именем process.php (url: «bin / process.php»), используя метод «POST» (тип: «POST»). Если наш скрипт успешно обработан, мы можем отобразить сообщение обратно пользователю и, наконец, вернуть false, чтобы страница не перезагружалась. Это оно! Весь процесс обрабатывается прямо в эти несколько строк!

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

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

  var name = $ ("input # name"). val ();
   var email = $ ("input # email"). val ();
   var phone = $ ("input # phone"). val ();
   var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; 

Затем мы использовали функцию jjuery ajax для обработки значений в dataString. После того
процесс завершается успешно, мы отображаем сообщение обратно пользователю и добавляем return false, чтобы наша страница не обновлялась:

  $ .Ajax ({
       тип: "POST",
       URL: "bin / process.php",
       data: dataString,
       success: function () {
         $ ('# contact_form'). html ("<div id = 'message'> </ div>");
         $ ('# message'). html ("<h2> Форма контакта отправлена! </ h2>")
         .append ("<p> Мы скоро свяжемся. </ p>")
         .скрывать()
         .fadeIn (1500, function () {
           $ ('# message'). append ("<img id = 'checkmark' src = 'images / check.png' />");
         });
       }
     });
     вернуть ложь; 

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

Шаг 5 — Показать сообщение обратно пользователю

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

Во-первых, мы изменим все содержимое элемента contact_form (помните, я сказал, что нам понадобится этот элемент div) следующей строкой:

  $ ('# contact_form'). html ("<div id = 'message'> </ div>"); 

То, что это сделало, заменило все содержимое внутри div contact_form, используя функцию jQuery html (). Таким образом, вместо формы, у нас теперь есть новый div внутри с идентификатором «message». Затем мы заполняем этот div реальным сообщением — h2, говорящим «Форма отправки отправлена»:

  $ ('# message'). html ("<h2> Форма контакта отправлена! </ h2>") 

Затем мы добавляем еще больше содержимого к сообщению div с помощью функции jQuery append (), и, в довершение всего, добавляем классный эффект, скрывая сообщение div с помощью функции jQuery hide (), а затем постепенно добавляем все это с помощью fadeIn (). функция:

  .append ("<p> Мы скоро свяжемся. </ p>")
   .скрывать()
   .fadeIn (1500, function () {
     $ ('# message'). append ("<img id = 'checkmark' src = 'images / check.png' />");
   }); 

Таким образом, пользователь в конечном итоге видит следующее после отправки формы:

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

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

Вывод

Я хотел бы добавить несколько заключительных слов о демонстрационном примере. В демоверсии вы можете заметить, что на самом деле используется один плагин — файл runonload.js. В начале урока я заявлял, что мы не будем использовать какие-либо плагины, а затем вы обнаружите, что в демоверсии есть дополнительный скрипт runonload, поэтому некоторые пояснения могут понадобиться! Для тех, кто заинтересован в демонстрации живой рабочей демо-версии, вы можете просмотреть форму SEO-консультации моего сайта.

Единственное использование, которое я сделал с runonload, на самом деле не имеет ничего общего с обработкой формы. Таким образом, вы можете выполнять функции AJAX полностью без каких-либо дополнительных плагинов. Я использовал runonload только для фокусировки поля ввода имени при загрузке страницы. По моему опыту, вызов runonload иногда может быть лучшей заменой встроенной функции jQuery для работы с документами, и я обнаружил, что так оно и есть при создании этого учебника. По какой-то причине функция focus () не будет работать при загрузке страницы с использованием встроенной функции готовности документов jQuery, но она работала с runonload, и поэтому вы найдете ее в качестве примера. Так что если вы знаете способ достичь этого без использования runonload, я был бы рад услышать от вас об этом.

Изучите JavaScript: полное руководство

Мы создали полное руководство, которое поможет вам изучить JavaScript , независимо от того, начинаете ли вы как веб-разработчик или хотите изучать более сложные темы.