Сегодня формы - это один из важнейших инструментов взаимодействия пользователей с веб-приложениями. Формы позволяют организовать эффективное управление информацией на сайте, состоянием самого сайта, оказывать услуги клиентам, передавать информацию другим пользователям, предоставлять доступ к закрытому разделу и многое-многое другое... Поэтому существует вполне естественное желание сделать формы более удобными и адаптированными под конкретные нюансы работы.
Одним из направлений такого улучшения может быть реализация возможности интерактивно, без перезагрузки страницы, управлять количеством полей для ввода данных, как в сторону увеличения, так и в сторону уменьшения. Это может быть очень удобно если необходимо добавить в базу данных приложения не одну, а сразу несколько записей; или если заранее не известно количество однотипных данных, каждое из которых требует отдельного поля для ввода (например, несколько телефонов или кредитных карт пользователя). В этой статье разберем одну из простых реализаций такой возможности через использование javascript библиотеки jQuery.
В самом низу, вы можете скачать архив с примерами, которые разбираются в этой статье.
Добавление нового поля в форму.Создавать новое поле формы будем с помощью метода.append():
$("селектор" ) .append ("строка" ) ;который добавляет “строку” во внутрь элемента с указанным “селектором”, при этом добавляемая строка следует за уже существующим содержимым.
Если рассматривать конкретный пример, то это может быть примерно так:
Поле №1 "/> Добавить новое полеСама функция addField() может быть реализована следующим образом:
< script type= "text/javascript" > function addField () { var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append (" Поле №" telnum "" ) ; }
Сначала, как обычно, подключаем библиотеку jQuery и далее объявляем функцию addField(). Функция сначала вычисляет номер, который необходимо вставить в добавляемый элемент - по этому номеру, мы в последствии будем удалять ненужные поля. Затем addField() добавляет в div#add_field_area код блока div#add№ с полем формы внутри, код которого полностью аналогичен коду “Поле №1”, указанному чуть выше. Теперь при нажатии на кнопку “Добавить”, мы можем видеть как мгновенно появляется новое поле.
Удаление конкретного поля формы.Для удаления элементов DOM-дерева можно пользоваться методом remove():
$("селектор" ) .remove () ;который применяется к элементу с указанным “селектором”. Будем считать, что по умолчанию одно поле всегда должно оставаться, все дополнительные можно удалять. Для этого в функции addField(), в строке параметра метода.append() мы добавим код кнопки удаления поля, при нажатии на которую будет идти обращение к функции deleteField (id), при этом в функцию будет передаваться номер поля, которое нужно удалить.
function addField () { var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append (" Поле №" telnum " " ) ; }Сама функция deleteField() может быть устроена предельно просто:
function deleteField (id) { $("div#add" id) .remove () ; }Собственно все. Теперь при нажатии на кнопку (красный крестик) напротив выбранного поля - оно исчезнет, а вместе с ним и та информация, которая была записана в нем.
Обработка данных на сервере (php).Когда форма содержит множественные поля, с однотипными данными, то естественно встает вопрос обработки данных, например перед отправкой в базу данных. В примере выше, этот вопрос решается указанием у поля формы атрибута name с параметром val. Это означает, что после отправки данных этой формы методом POST, значения этих полей будут помещены в массив $_POST[‘val’], элементы которого можно перебрать в цикле foreach (...) {...}, например:
foreach ($_POST [ "val" ] as $value ) { // ваш код.... }Или, если необходимо, все данные этих однотипных полей “склеить” в одну строку с помощью функции implode():
$str = implode ("|" , $_POST [ "val" ] ) ;Тогда все значения полей с name=”val” - будут объединены в строку с разделителем “вертикальная черта”.
Но, это обработка на стороне сервера, которая кстати говоря - более предпочтительна по соображениям безопасности. Но, могут возникнуть обстоятельства вынуждающие вас выполнять обработку таких полей на клиентской стороне: например у вас нет доступа к скриптам сервера (используется какой-то удаленный обработчик формы), или вы не можете по каким-то причинам изменить работу обработчика формы на вашем сервере. В таком случае можно так же пользоваться средствами языка javascript, а так как мы уже работаем с библиотекой jQuery - то и продолжим работать в ней.
Обработка данных на клиентской стороне.Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.
Для начала, нам необходимо несколько модифицировать саму форму, а именно добавить одно скрытое поле: