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

jQuery

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

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

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

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

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

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

<div id="contact_form">
  <form name="contact" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>
      
      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">This field is required.</label>
      
      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label>
      
    	<br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
  </div>

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

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

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

jQuery

Шаг 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("<div id='message'></div>");
     $('#message').html("<h2>Contact Form Submitted!</h2>")
     .append("<p>We will be in touch soon.</p>")
     .hide()
     .fadeIn(1500, function() {
       $('#message').append("<img id='checkmark' src='images/check.png' />");
     });
   }
 });
 return false;

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

Напомню, ранее мы объявили переменную “name” и установили ей в качестве значения то, что было введено в поле с идентификатором “name”.

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

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

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

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

jQuery

Теперь переходим к нашей основной функции – 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("<div id='message'></div>");
       $('#message').html("<h2>Contact Form Submitted!</h2>")
       .append("<p>We will be in touch soon.</p>")
       .hide()
       .fadeIn(1500, function() {
         $('#message').append("<img id='checkmark' src='images/check.png' />");
       });
     }
   });
   return false;

Шаг 5 – реализовываем показ сообщения пользователю после ввода данных в форму

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

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

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

Что сделано? Мы заменили весь div с id=” contact_form ”, используя jQuery html() функции. Итак, вместо формы мы получили новый div c id=’message’. Далее ставим в этот div сообщение – оно будет в теге h2 с подписью “Contact Form Submitted”

$('#message').html("<h2>Contact Form Submitted!</h2>")
  

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

.append("<p>We will be in touch soon.</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("<img id='checkmark' src='images/check.png' />");
  });

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

jQuery

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

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

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

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

E-mail:contact@webformyself.com

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

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

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки: , , ,

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

Комментарии Facebook:

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

  1. Георгий

    Читаешь или смотришь урок , всё просто и понятно ! Доходит до практики и … , но интересно очень !

  2. design

    Хорошая вещь!!
    Продолжаем в том же духе.

  3. Vladusik

    Спасибо за урок. Продолжаем, пожалуйста.

  4. Нелли

    У меня не получается скачать ни с предыдущего урока «Архив» ни с этого «исходный код».Выбрасывает меня на страницу где предлагается скачать Download Master.Поэтому не могу дальше продолжить.Что-то у меня повидимому с программой.Не могу разобраться.Уроки эти мне так нужны,как раз то что нужно.Может подскажет кто?

  5. Нина

    Добрый вечер!

    Спасибо за ценные уроки. Для меня это хорошая школа! Мне очень помогли уроки. Спасибо!!!

  6. Александр

    Спасибо,ценный урок!!

  7. Алексей

    +1 Спасибо

  8. mdi

    Гениально, шеф !!!
    Вот если бы еще и на process.php посмотреть …
    Было бы вооще …

  9. doll

    Спасибо, хороший урок, но на код process.php, действительно, хотелось бы посмотреть

  10. popo

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

  11. Вадим

    Поддерживаю предыдущий пост — очень нужно !!!

    «вместо сообщения об успешной отправки сообщения появлялась вторая форма, где пользователь мог бы подтвердить свои введённые данные и дополнить например некоторые доп.поля, и только потом данные отправлялись для отправки и появилось сообщение об успешной отправки.»

  12. Bogdan

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

  13. Михаил

    Спасибо!
    Вот оно, что мне нужно и все понятно написано.
    А где поле для ввода самого сообщения? textarea

  14. pantg

    Все работает.. Вот только.. подскажите, не могу найти строку, куда свою почту забивать..

    • Андрей Кудлай

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree