Создание и удаление полей в форме кликом по кнопке (jquery)

Создание и удаление полей в форме кликом по кнопке (jquery)

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

Не так давно автору настоящей статьи пришлось разрабатывать форму, в которой бы пользователь мог бы добавлять дополнительное шаблонное поле (и удалять его по своему желанию). Само собой, что на стороне сервера всё эти данные должны были обрабатываться и, после обработки, отправляться на почту администратору сайта. К слову, данный сайт был на битриксе, но форма при этом была сделана универсальная. Единственное, что письмо отправлялось через почтовый шаблон битрикса, но об этом в самом конце.  Конечно, автор признает, что предложенное решение не единственное и, вероятно, не лучшее. Но оно рабочее, а также достаточно простое в реализации и переносе на другие проекты.

Статья поделена на три небольших шага:

  1. HTML-шаблон формы
  2. Обработка на стороне клиента
  3. Обработка на стороне сервера и отправка на почту

Шаг 1. HTML-шаблон формы

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

Также обратите внимание на поля «Марка» и «Модель» — их содержимое автозаполняется из GET-параметров адресной строки, т.к. переход происходит со страницы, где известны переменные марки и модели автомобиля.

Собственно, шаблон формы:

Особый интерес, как было сказано выше, представляет вот этот блок:

Параметр onclick=»addField();»  у кнопки «Добавить деталь» — это функция, что добавляет дополнительное поле «добавить деталь». Сама функция будет объявлена на следующем шаге, дабы не смешивать html и js.

Также обратите внимание, т.к. это, пожалуй, ключевой момент в данном алгоритме — у input’а детали name=»val[]». Что это значит? Это позволяет поместить значения из полей с таким именем при отправке на сервер в массив $_POST[‘val’]. Т.е. таких полей может быть много.

Шаг 2. Обработка на стороне клиента

Здесь особых новшеств также нет. Всё достаточно стандартно, но некоторые моменты требуют уточнения.

Весь js для данной формы (в том числе и функции добавления/удаления полей):

Функции addField и deleteField, наверное не нуждаются в особом комментарии. Первая функция создает новое поле «добавить деталь» с уникальным айдишником, сразу после предыдущего поля и кнопку «удалить поле». Как видно выше, весь html кнопки вписан в append().

Функция deleteField, в свою очередь, принимает в качестве аргумента id и удаляет связанный с ним input.

Ну а $(‘#call_form’).submit(function(e) отправляет ajax’ом (без перезагрузки страницы) данные на сервер. Тут всё стандартно.

Шаг 3. Обработка на стороне сервера и отправка на почту

Переходим к обработке данных на стороне сервера. Первым делом мы принимаем и систематизируем данные, полученные из формы, потом верстаем из них шаблон письма и отправляем админу сайта. Весь код приведен ниже:

Итак, шаг первый, обработка данных:

Мы приняли данные из формы. Обратите внимание, что массив $_POST[«val»] мы «склеили» через разделитель |, т.е. данные из каждого динамического поля «добавить деталь» будут отделяться от предыдущего таким символом. Разделитель, само собой, может быть любым.

Далее мы верстаем таблицу из значений, полученных с формы. Обратите внимание, что предложенном примере все данные, вместе с версткой «склеены» в одну переменную $message. В данном случае — это оправданный шаг.

Склеив всё в одну переменную, мы можем отправить данные на почту админу:

За отправку отвечает функция CEvent::Send, в которой первое значение — это символьный код типа почтового шаблона, а 63 — это id необходимого почтового шаблона. file_put_contents — это «страховка» для контроля отправки данных. После отладки эту строчку можно удалить.

В целом, это всё. Проделав эти три шага, вы получите рабочую форму с динамическими полями, которую можно использовать на любом сайте, который работает на php (Битриксовую функцию отправки на почту можно заменить на mail(); ).