Создание и удаление полей в форме кликом по кнопке (jquery)
В данной статье рассматривается процесс создания формы с полями, которые можно добавлять (и удалять) по клику на соответствующие кнопки. Также рассмотрен процесс обработки значений данных полей на сервере.
Не так давно автору настоящей статьи пришлось разрабатывать форму, в которой бы пользователь мог бы добавлять дополнительное шаблонное поле (и удалять его по своему желанию). Само собой, что на стороне сервера всё эти данные должны были обрабатываться и, после обработки, отправляться на почту администратору сайта. К слову, данный сайт был на битриксе, но форма при этом была сделана универсальная. Единственное, что письмо отправлялось через почтовый шаблон битрикса, но об этом в самом конце. Конечно, автор признает, что предложенное решение не единственное и, вероятно, не лучшее. Но оно рабочее, а также достаточно простое в реализации и переносе на другие проекты.
Статья поделена на три небольших шага:
Шаг 1. HTML-шаблон формы
Начать следует с хтмл-шаблона формы. В целом, с поправкой на верстку того сайта, он стандартный. Наибольший интерес представляет поле «Добавить деталь» — т.к. это первое поле из «динамических» полей, т.е. тех, которые пользователь сможет добавить.
Также обратите внимание на поля «Марка» и «Модель» — их содержимое автозаполняется из GET-параметров адресной строки, т.к. переход происходит со страницы, где известны переменные марки и модели автомобиля.
Jquery динамическое добавление полей в форму
Одним из направлений такого улучшения может быть реализация возможности интерактивно, без перезагрузки страницы, управлять количеством полей для ввода данных, как в сторону увеличения, так и в сторону уменьшения. Это может быть очень удобно если необходимо добавить в базу данных приложения не одну, а сразу несколько записей; или если заранее не известно количество однотипных данных, каждое из которых требует отдельного поля для ввода (например, несколько телефонов или кредитных карт пользователя). В этой статье разберем одну из простых реализаций такой возможности через использование javascript библиотеки jQuery.
В самом низу, вы можете скачать архив с примерами, которые разбираются в этой статье.
Добавление нового поля в форму.
который добавляет “строку” во внутрь элемента с указанным “селектором”, при этом добавляемая строка следует за уже существующим содержимым.
Если рассматривать конкретный пример, то это может быть примерно так:
Мы создаем блок div с id “add_field_area”, во внутрь которого будем добавлять блоки с id “add№”, которые в свою очередь содержат в себе заголовок добавляемого поля и само поле для ввода. Можно конечно сразу добавлять элемент без обрамления его в тег div, но именно такая структура нам будет очень полезна в будущем, когда будем реализовавать возможность удаления выбранного поля, если это понадобится пользователю.
Далее, внизу под данным полем размещаем кнопку “Добавить новое поле”, при нажатии на которую должно появляться одно новое поле для ввода информации. Создание поля будет происходить по событию onClick, с помощью функции addField, обращение к которой будет происходить при клике по кнопке:
Сама функция addField() может быть реализована следующим образом:
Удаление конкретного поля формы.
Для удаления элементов DOM-дерева можно пользоваться методом remove():
Сама функция deleteField() может быть устроена предельно просто:
Обработка данных на сервере (php).
Или, если необходимо, все данные этих однотипных полей “склеить” в одну строку с помощью функции implode():
Обработка данных на клиентской стороне.
Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.
Для начала, нам необходимо несколько модифицировать саму форму, а именно добавить одно скрытое поле:
в него мы будем помещать объединенные в одну строку данные и отправлять уже на сервер для стандартной обработки.
Сама функция writeFieldsVlues(), может быть объявлена следующим образом:
Для полноты действия, обращение к этой функции нужно добавить и в функцию deleteField (), чтобы удаление поля тоже приводило к обновлению информации в скрытом поле:
Ссылки для скачивания.
Здесь Вы можете скачать сопроводительные материалы к статье:
Jquery динамическое добавление полей в форму
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
jQuery plugin для форм с динамической структурой
Хочу поделиться с обществом собственным плагином, который упрощает работу с динамическими формами и называется jqDynaForm. Под динамическими формами я подразумеваю формы, в которые при заполнении пользователь может добавлять по необходимости дополнительные поля или блоки полей. Разумеется, в каждом месте разрешено добавлять только заранее разрешенные виды блоков. Вот примеры подобных простейших форм:
1. Контактная форма, в которой есть поле «телефон». Пользователь может добавить еще несколько дополнительных полей для телефонов, если возникнет желание.
2. Счет на оплату. Есть фиксированный набор полей, таких как «имя плательщика» и «номер счета». Кроме того, есть таблица с позициями. Каждая позиция состоит следующих полей: «наименование», «количество», «цена». Пользователь может добавлять произвольное количество дополнительных позиций.
Давайте рассмотрим работу с jqDynaForm на примере такого счета. Вот пример такой формы:
Давайте посмотрим на HTML код, который необходимо приготовить для плагина:
Выкину все лишнее, чтобы стало нагляднее:
Т.е. у нас есть некая базовая форма с фиксированным набором полей. Внутри этой формы мы размещаем холдер, DIV помеченный атрибутом «data-holder-for». Значение атрибута задает имя блока, который сюда можно вставлять. HTML код этого блока задается отдельно от формы и помечается атрибутом data-name.
Кнопки добавление, удаления пунктов, поведение drag-and-drop для сортировки и переноса полностью формируется плагином.
Чтобы получить значения полей формы надо сделать следующий вызов
и он вернет JSON объект следующей структуры:
Обратите внимание, что повторяющиеся вложенные блоки автоматически размещаются в массивах. Значения ключей в полях, это атрибут name в тегах INPUT и SELECT.
Если у вас есть уже такой готовый JSON объект (сформированный скриптом, или считанный из базы данных), то вы можете при помощи одного вызова воссоздать форму.
После этого вызова мы получим исходную форму с заполненными полями и сформированными вложенными блоками. Разумеется, при наличии правильной исходной формы и подготовленных блоков полей.
Пример посложнее
На самом деле, структура формы может быть гораздо сложней, потому что вы можете размещать холдеры не только в базовой форме, но и внутри динамических блоков. Холдер даже может ссылаться на самого себя, формирую древовидную рекурсивную структуру. Вот пример более сложной формы:
Перечислю наиболее важные фичи:
Также планирую добавить следующее возможности:
Работа с JSON
Как работать с полученной JSON структурой. Можно обрабатывать на JavaScript-е, можно отправить на сервер и превратить, например в php-array древовидную структуру.
Обычно значения полей хранят в базах данных. С классическими «плоскими» формами все понятно. Такая форма замечательно ложиться в одну запись таблицы реляционной базы данных. А тут форма древовидная, и структура данных соответственно тоже древовидная. Вариантов хранения много, вот некоторые:
Что меня побудило к созданию этого плагина
Я много занимаюсь разработкой разного рода веб-приложений. Многие приложения содержат большое количество форм. Создание обработчиков форм часто отнимают много времени. Есть разного рода решения, которые упрощают создание обычных, плоских форм. Но когда требуются динамические формы, то тут стандартные решения, как правило, уже мало помогают.
Вот типичный ход работы над проекта в стиле «ночной кошмар». От Заказчика с некоторым периодом поступают следующие требования:
Дабы избежать кошмара постоянного программирования всех этих кнопочек – «добавить», «удалить», «перенести», не мучаться с формированием динамических структур, удобно обрабатывать значения полей, я и задумался на созданием этого плагина.
Исходники
Заранее предупреждаю, что плагин еще сырой. Но если у общества будет интерес, то я планирую его дорабатывать и выкладывать следующие версии.
Страничка проекта находится на Google Code
Динамичные select в форме (Laravel + jQuery)
Предположим у нас следующая задача: Необходимо сделать простую форму для выбора стран и городов. В форме имеются два поля выбора (select), в первом выбирается страна, а во втором города и в зависимости от выбранной страны города будут разные.
Создаем модели и миграции
Нам понадобятся две таблицы:
Создаем две модели Country и City:
Мы добавили флаг -m, чтобы одновременно создалась миграция.
Далее идем в папку миграций ( database/migrations ) и правим в них функцию up().
Вот так выглядит функция up() в миграции create_countries_table:
Вот так выглядит функция up() в миграции create_cities_table:
Далее выполняем миграцию:
php artisan migrate
После создания таблиц Страны и Города, их необходимо заполнить тестовыми данными для дальнейшей работы.
Создаем контроллер
Далее создаем контроллер, назовем его CountryController, для этого выполним команду:
php artisan make:controller CountryController
Идем в контроллер ( app/Http/Controllers/CountryController.php ) и создаем функцию index() с помощью нее мы будем выводить нашу форму с динамическими полями select.
А так же функцию selectCity() с помощью которой мы будем обрабатывать ajax запросы из формы и возвращать список городов для определенной страны.
В конечном счете контроллер должен выглядеть так: