Заказать звонок
×
Старт

5 000 Р

  • Состоит из 1 страницы
  • Основная информация
  • Схема проезда
  • Форма обратной связи
  • Бесплатные начальные консультации
ПОДРОБНЕЕ
Визитка

10 000 Р

  • Состоит из 1-3 страниц
  • Новостная лента
  • Схема проезда
  • Форма обратной связи
  • Бесплатные начальные консультации
ПОДРОБНЕЕ
Малый
бизнес

25 000 Р

  • Новости компании
  • Каталог продукции
  • Контакты и схема проезда
  • Форма обратной связи
  • Слайд-шоу
ПОДРОБНЕЕ
Интернет
магазин

25 000 Р

  • Каталог товаров
  • Вывод новинок
  • Сопутствующие товары
  • Загрузка товаров из файла
  • Модуль доставки
ПОДРОБНЕЕ
Landing
Page

15 000 Р

  • Продающие тексты
  • Продающие триггеры
  • Инфографика
  • Форма обратной связи
  • Блок отзывов клиентов
ПОДРОБНЕЕ
  • Madcatzz
  • Несколько форм на одной странице с отправкой без перезагрузки

Несколько форм на одной странице с отправкой без перезагрузки

  • 29.06.2015
  • 61316
Несколько форм на одной странице с отправкой без перезагрузки

Вы можете скачать готовые файлы, в которые дополнительно включена проверка введенных данных в форму (валидация), поделившись статьей в Twitter.

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

За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit. В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else, с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

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

Несколько форм связи с одним обработчиком

К примеру, возьмем три формы.

Присвойте каждой форме свой уникальный id. У нас это form1, form2 и form3. Кроме того, для стилизации формы примените классы css, для отображения подсказки включите атрибуты placeholder, а для формирования темы письма добавьте скрытый input.

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

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

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

Используя AJAX, отправку формы без перезагрузки страницы сделать очень легко.

Несколько форм на одной странице с отправкой без перезагрузки
Форма связи в процессе заполнения

После нажатия кнопки «Отправить» вместо полей ввода формы у вас появится сообщение об отправке.

Несколько форм на одной странице с отправкой без перезагрузки
Форма связи после нажатия кнопки «Отправить»

update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):

Метод .load() загружает данные и вставляет в указанный элемент.

"#parent" - id формы, в которую необходимо вставить удаленные данные.
В приведенном примере скрипта с отправкой данных форм без перезагрузки страницы, оберните в div все input. Назначьте ему id, например inputs. Этот div с вложенными полями input удаляется скриптом, на его месте появляется сообщение об отправке. Получается, что в коде остается тег form с id, этот id необходимо указать в #parent, это станет контейнером для загрузки скриптом данных формы (удаленные input).

"http://site.ru" - адрес вашей страницы с формой, откуда скрипт загрузит удаленные input. Например, если ваша форма будет находиться по адресу http://site.ru/contacts.html, вставляете этот адрес.

"#child" - id блока, который содержит input. В данном случае div #inputs.

3000 - время в мс через которое восстановится код формы.

Демо

PHP обработчик

Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.

Данный обработчик содержит проверку метода передачи данных.

Создавая формы на страницах своего сайта, не забывайте о внедрении проверки введенных данных и методах защиты от спама.

Возникли вопросы? Давайте обсудим их в комментариях.

Демо