как сделать отправку формы без перезагрузки страницы
Ajax-форма без перезагрузки страницы
Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.
Отправка формы без перезагрузки страницы:
Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.
AJAX + PHP + JQuery
Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.
Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:
Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.
Готовая схема выглядит так:
Пользователь нажатием кнопки отправляет данные
файл JS отправляет их в PHP через Ajax, функцию JQuery
обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе
в первом случае владелец сайта также получает готовую заявку.
Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.
Инструкция по созданию формы без перезагрузки
Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).
Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):
Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.
Обработчик, в JS элементе выше мы уже назвали его formx.php:
Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.
Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.
Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).
Как отправить HTML-форму без перезагрузки страницы
Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
Создайте первый файл под названием index.php с таким содержимым:
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.
Отправляем форму без обновления страницы с помощью jQuery
Что мы строим
В этом примере у нас есть простая контактная форма с именем, адресом электронной почты и номером телефона. Форма отправляет все поля в php-скрипт без обновления страницы, используя собственные функции jQuery (это означает, вам не нужно загружать дополнительные плагины, чтобы заставить все это работать.
Если вы обнаружили эту статью без какого-либо предварительного знакомства с jQuery, отличным местом для начала станет статья Джеффри Пута о 15 ресурсах, чтобы начать работу с jQuery From Scratch.
Давайте посмотрим на нашу разметку html. Начнем с нашей базовой html-формы:
Вы могли заметить, что я включил div с id contact_form, который оборачивает всю форму.
Не забудьте добавить этот div к вашей собственной форме, поскольку нам позже понадобится этот оберточный div. Вы
возможно также заметили, что я оставил как действие, так и метод тега формы пустыми. Нам
на самом деле здесь не нужен ни один из них, потому что jQuery позаботится об этом позже.
Я добавил некоторые стили CSS и фоновое изображение из Photoshop, чтобы создать следующую форму:
Следующим шагом в этом процессе является добавление некоторого кода jQuery. Я собираюсь предположить, что вы загрузили jQuery, загрузили его на свой сервер и ссылаетесь на него на своей веб-странице.
Затем откройте еще один новый файл javascript, укажите его в своем html, как и любой обычный файл javascript,
и добавьте следующее:
Мы проверяем, сначала осталось ли поле имени пустым, и если да, тогда мы покажем метку с идентификатором name_error. Затем мы сосредоточим внимание на поле ввода имени, если пользователь
совсем не понимает, что делать дальше! (Я научился никогда не принимать слишком много от пользователей).
Затем мы проверяем, пустое ли это значение, и если это так, мы используем метод jQuery show (), чтобы показать метку с
id «name_error»:
Затем мы помещаем фокус формы обратно в поле ввода с идентификатором «name» и, наконец, возвращаем false:
Обязательно верните false в своем коде, иначе вся форма будет отправлена (что не является
целью этого урока)! Если возвращается false, это не позволяет пользователю продолжать
без заполнения необходимого поля(ей).
Вспомним ранее, мы установили переменную ‘name’ со значением поля ввода с id «name», например:
Мы можем снова использовать это значение «name», а также значения «email» и «phone» для создания нашей dataString:
Я прокомментировал предупреждение, которое иногда использую, чтобы быть уверенным, что я использую правильные значения, которые могут оказаться полезными в этом процессе. Если вы раскомментируете это предупреждение и протестируете свою форму, предполагая, что все дошло до сих пор, вы должны получить сообщение, подобное следующему:
Теперь мы добираемся до нашей главной функции ajax, звезды сегодняшнего шоу. Вот где все происходит, так что обратите сюда
свое пристальное внимание!
Есть более сложные вещи, которые вы можете сделать здесь, кроме отправки электронной почты и сообщения об успешном завершении. Например, вы можете отправить свои значения в базу данных, обработать их, а затем отобразить результаты обратно пользователю. Поэтому, если вы разместили опрос среди пользователей, вы можете обработать их голос, а затем вернуть результаты голосования, без необходимости обновления страницы.
Подведем итог тому, что произошло в нашем примере, чтобы убедиться, что мы все поняли. Мы взяли наши значения формы с помощью jQuery, а затем поместили их в строку следующим образом:
Затем мы использовали jQuery функцию ajax для обработки значений в dataString. После этого
процесс завершается успешно, мы выводим сообщение обратно пользователю и добавляем return false, чтобы наша страница не обновлялась:
Успешная часть скрипта была заполнена некоторым конкретным контентом, который может быть отображен обратно пользователю. Но что касается нашей функциональности ajax, это все, что нужно. Для получения дополнительных параметров и настроек обязательно ознакомьтесь с документацией jQuery по функции ajax. Примером здесь является одна из более простых реализаций, но даже в этом случае она очень эффективна, как вы можете видеть.
Давайте вкратце рассмотрим ту часть кода, которая отображает наше сообщение обратно пользователю, чтобы закончить этот учебник.
Во-первых, мы меняем все содержимое div_control_form (помните, я сказал, что нам понадобится этот div) со следующей строкой:
Затем добавим еще больше контента в div сообщения с помощью jQuery функции append(), и, прежде всего, мы добавим классный эффект, скрыв div с помощью jQuery функции hide(), а затем спрячем все это с помощью функции fadeIn():
Таким образом, пользователь получает следующие данные после отправки формы:
Поэтому, если у вас есть контактная форма на вашем веб-сайте, форма входа в систему или даже более продвинутые формы, которые обрабатывают значения через базу данных и возвращают результаты, вы можете сделать все это легко и эффективно, и, возможно, самое главное, вы повышаете качество работы с вашим сайтом, предоставляя интерактивность без необходимости ждать перезагрузки страницы.
Вывод
Единственное, что я сделал с runonload, на самом деле не имеет никакого отношения к обработке формы. Таким образом, вы можете полностью выполнить функцию ajax без каких-либо дополнительных плагинов. Я использовал runonload, чтобы сфокусировать поле ввода имени при загрузке страницы. Мой опыт заключался в том, что вызов runonload иногда может быть лучшей заменой для собственной функции готовности документа jQuery, и я обнаружил, что это действительно так. По какой-то причине функция focus() не будет работать при загрузке страницы с использованием функции готового документа jQuery, но она работает с runonload, и именно поэтому вы считаете ее частью этого примера. Поэтому, если вы знаете способ сделать это без использования runonload, я был бы рад услышать от вас об этом.
Отправка формы без перезагрузки страницы на PHP и Ajax
Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара.
Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.
Используя только одно включение кода из этого примера, можно создать неограниченное количество различных форм на странице. Это будет актуально, например для сайтов лендингов, где на одной странице используется множество различных форм.
HTML-код формы
Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение.
Один важный момент: у тега
В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:
Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.
Отправка формы без перезагрузки страницы
Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом
Отправка формы без перезагрузки страницы
Дата публикации: 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.