как отменить перезагрузку страницы при отправке формы
Отправка формы без перезагрузки страницы
Дата публикации: 2009-11-04
В этом уроке Вам будет показано, как сделать контактную форму, через которую Вы будите посылать электронное сообщение без обновления страницы с помощью jQuery. Давайте начнем.
Обязательно советую Вам скачать исходный код всего урока. Там будут и php скрипт, который реализует процесс доставки сообщения.
Одним словом, урок очень полезный!
В сегодняшнем примере мы имеем простую форму с возможностью ввода имени, адреса электронной почты и номера телефона. Как я уже и говорил, форма содержит и php скрипт и родной jQuery, в том смысле, что не нужно устанавливать и скачивать никаких дополнительных плагинов.
Шаг 1 – создаем непосредственно саму HTML форму
Давайте взглянем на наш html код. Мы начинаем с нашей основной html формы:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вы могли заметить, что я включил div id contact_ form, который охватывает весь код формы. Вы также могли заметить, что я оставил параметры action и method пустыми. Это я сделал специально, т.к. об этом позже позаботиться jQuery.
Еще одна важная вещь. Не забудьте включить значение id в каждое поле ввода (строка начинается с тега input). Эти id значения jQuery сценарий будет искать для обработки формы.
Я добавил некоторый css стили и фоновое изображение в Photoshop для получения данной формы:
Шаг 2 – начинаем добавлять jQuery
Следующим шагом мы начнем добавлять по частям jQuery код. Я буду считать, что В уже скачали jQuery.
Далее открываем новый файл JavaScript, ссылаемся на него в xtml документе также, как и на любой другой файл JavaScript. Добавляем следующий код:
Первая функция (function()) он начинает загружать события, как только html документ готов. Если Вы уже делали какие-либо работы с jQuery, то функция такая же, как и document.ready функция. По коду можно понять, что мы имеем функцию клика по кнопке, с именем класса «button». Таким образом мы тут достигли такого же самого эффекта, как и если бы мы в поле input нашей формы добавили функцию onClick кнопки «отправить».
Шаг 3 – написание формы проверки введенных данных
Проверка первого поля: если поле для имени было оставлено пользователем пустым, мы показываем сообщение, записанное в теге label с идентификатором name_error. Затем мы помещаем фокус на поле ввода имени, на случай если пользователь запутался с тем, что ему делать дальше. (Я думаю, не стоит сильно напрягаться, когда речь идет о форме пользователей)
Объясняю, как данная вещь работает. В переменную “name” мы записываем значение, которое было введено в поле с идентификатором “name” – это всего одна строчка на jQuary.
Контроль перезагрузки страницы: 2 способа
Кликнув по ссылке, кнопке или отправив форму, произошла перезагрузка страницы и ваша панель в режиме отладки Google Tag Manager обновилась? Из-за этого вы не можете выбрать переменную для триггера и настроить корректно отслеживание? Предлагаю 2 решения этой проблемы.
Специальный код
Скопируйте этот код, вставьте его в консоль разработчика (вызов клавишей F12 для Google Chrome) на вкладке Console. Нажмите Enter:
В результате вы увидите undefined в последней строчке. Событие beforeunload позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию.
Нам этом все! Теперь вы можете совершать клики по кнопкам, переходить по ссылкам и отправлять форму. Перед перезагрузкой страницы или переходом на другой сайт вы будете видеть всплывающее окно, в котором будет две кнопки: Закрыть и Отмена.
Если выбрать Закрыть, то диалоговое окно пропадет и начнется процесс перезагрузки страницы. Если нажать Отмена, то сценарий все равно произойдет, но вы останетесь на прежней вкладке и сможете проанализировать события на временной шкале отладчика в Google Tag Manager.
Например, на главной странице моего сайта есть форма записи на вебинар. При заполнении поля Email и отправки заявки страница автоматически перезагружается, и пользователь перенаправляется на страницу с другим URL.
Событие отправки формы сработало, но страница не перезагрузались (хотя без кода перезагружается)
Но благодаря событию beforeunload и специальному коду, мы можем предотвратить автоматическую перезагрузку страницы. Просто запускаете код, совершаете событие и в диалоговом окне нажимаете Отмена. Триггер сработает, и вы сможете в режиме предварительного просмотра GTM проанализировать его состояние.
Расширение для браузера Google Chrome
Если вы не хотите работать с кодом и консолью разработчика, есть специальное расширение для Google Chrome stopReload, которое блокирует переадресацию на другие страницы при нажатии на ссылки и кнопки. Его разработал Павел Мрыкин (эксперт по сквозной аналитике в компании Calltouch).
Чтобы его добавить к себе в браузер, перейдите по ссылке и нажмите Установить:
В правом верхнем углу у вас появится иконка расширения.
Чтобы активировать расширение, нажмите на иконку stopReload. Круг окрасится в красный цвет. После этого вы можете совершать клики по кнопкам и ссылкам. Как и в случае со специальным кодом, вы будете видеть всплывающее окно с кнопками Закрыть и Отмена.
Павел записал небольшое видео с демонстрацией работы расширения stopReload: