Доброго времени суток, уважаемые читатели. В некоторых ситуациях требуется через форму на сайте добавить несколько идентичных данных, например, заполнить таблицу в базе данных фамилиями сотрудников фирмы, это не суть. Добавлять через одно поле и каждый раз отправлять данные на сервер согласитесь довольно скучное занятие. Поэтому в данном уроке мы будем учиться размножать поля формы и делать их столько, сколько нам нужно, а в этом нам поможет jQuery. Взгляните на пример и сразу поймете, о чем я.
Поскольку делать это мы будем при помощи jQuery, то нужно подключить данную библиотеку.
Теперь создадим саму форму с кнопкой добавления нового поля и кнопкой отправки данных:
Название |
Как вы заметили для кнопки Добавить поле мы написали параметр onclick="return add_new_image();". Это означает что при нажатии на нее у нас должна выполняться функция, которая и будет добавлять дополнительные поля. Данная функция на JavaScript будет выглядеть так:
var
total
= 0
;
function
add_new_image()
{
total++;
$
("
.attr ("id" ,"tr_image_" +total )
.css ({lineHeight:"20px" })
.append (
$("
.attr ("id" ,"td_title_" +total )
.append (
$("" )
.css ({width:"200px" })
.attr ("id" ,"input_title_" +total )
.attr ("name" ,"input_title_" +total )
)
)
.append
(
$("
.css ({width:"60px" })
.append (
$("" )
)
.appendTo ("#table_container" );
}
$(document).ready (function () {
add_new_image() ;
});
Давайте разберем, что здесь происходит. Поскольку при добавлении нового поля нам нужно чтобы имена у них были разные, чтобы иметь возможность обработать их на сервере. Для этого создана переменная total, которая будет при клике увеличиваться на 1 и добавляться к имени поля input. Затем мы в таблицу, находящуюся в форме мы добавляем новую строку
После этого мы добавляем первый столбец
В этот столбец мы добавляем поле input и снова применяем атрибуты id и name, а также стили
Следующим действием мы добавляем второй столбец, в котором у нас будет кнопка для удаления поля. Данный код уже должен работать и добавлять поля.
Теперь нужно разобраться, как обрабатывать все эти данные. В форме у нас прописан обработчик add.php его и будем редактировать. При добавлении нового поля, как мы знаем, у нас возникают новые переменные input_title_1, input_title_2 и т.д. Казалось бы все просто, мы просто сосчитаем сколько элементов в массиве $_POST и используя цикл переберем все значения.
$n
= count
($_POST
);
for
($i
=1
; $i
input_title_1
$key => input_title_2
$key => input_title_4
Теперь, зная все значения ключей, мы можем их перебрать при помощи цикла в исходном массиве, тем самым не «упустив» переменные. В данном примере просто выводятся все значения, но с ними вы можете делать все что угодно. Чтобы сделать два поля то в JavaScript нужно добавить вот такой код сразу после того как мы закончили с добавлением первого столбца:
Append
(
$("
.attr ("id" ,"td_ name_" +total )
.css ({paddingRight:"5px" ,width:"200px" })
.append (
$("" )
.css ({width:"200px" })
.attr ("id" ,"name_" +total )
.attr ("name" ,"name_" +total )
)
Только не забывайте менять параметры id и name, иначе у вас получится несколько полей с одинаковым именем.
Сегодня формы - это один из важнейших инструментов взаимодействия пользователей с веб-приложениями. Формы позволяют организовать эффективное управление информацией на сайте, состоянием самого сайта, оказывать услуги клиентам, передавать информацию другим пользователям, предоставлять доступ к закрытому разделу и многое-многое другое... Поэтому существует вполне естественное желание сделать формы более удобными и адаптированными под конкретные нюансы работы.
Одним из направлений такого улучшения может быть реализация возможности интерактивно, без перезагрузки страницы, управлять количеством полей для ввода данных, как в сторону увеличения, так и в сторону уменьшения. Это может быть очень удобно если необходимо добавить в базу данных приложения не одну, а сразу несколько записей; или если заранее не известно количество однотипных данных, каждое из которых требует отдельного поля для ввода (например, несколько телефонов или кредитных карт пользователя). В этой статье разберем одну из простых реализаций такой возможности через использование 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 - то и продолжим работать в ней.
Обработка данных на клиентской стороне.Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.
Для начала, нам необходимо несколько модифицировать саму форму, а именно добавить одно скрытое поле: