Javascript добавить полей ввода

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

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

В самом низу, вы можете скачать архив с примерами, которые разбираются в этой статье.

Добавление нового поля в форму.

Создавать новое поле формы будем с помощью метода .append():

который добавляет “строку” во внутрь элемента с указанным “селектором”, при этом добавляемая строка следует за уже существующим содержимым.

Если рассматривать конкретный пример, то это может быть примерно так:

div id="add_field_area"> div id="add1" class="add"> label> Поле №1/label> input type="text" width="120" name="val[]" id="val" value=" "/> /div> /div>

Мы создаем блок div с id “add_field_area”, во внутрь которого будем добавлять блоки с id “add№”, которые в свою очередь содержат в себе заголовок добавляемого поля и само поле для ввода. Можно конечно сразу добавлять элемент без обрамления его в тег div, но именно такая структура нам будет очень полезна в будущем, когда будем реализовавать возможность удаления выбранного поля, если это понадобится пользователю.

Читайте также: Long method names java

Далее, внизу под данным полем размещаем кнопку “Добавить новое поле”, при нажатии на которую должно появляться одно новое поле для ввода информации. Создание поля будет происходить по событию onClick, с помощью функции addField, обращение к которой будет происходить при клике по кнопке:

div id="add_field_area"> div id="add1" class="add"> label> Поле №1/label> input type="text" width="120" name="val[]" id="val" value=" "/> /div> div onclick="addField();" class="addbutton">Добавить новое поле/div> /div>

Сама функция 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 "" style="color: #3366CC;">"> Поле №" telnum "text" width="120" name="val[]" style="color: #3366CC;">" value=""/>
"); } script>

Сначала, как обычно, подключаем библиотеку jQuery и далее объявляем функцию addField(). Функция сначала вычисляет номер, который необходимо вставить в добавляемый элемент — по этому номеру, мы в последствии будем удалять ненужные поля. Затем addField() добавляет в div#add_field_area код блока div#add№ с полем формы внутри, код которого полностью аналогичен коду “Поле №1”, указанному чуть выше. Теперь при нажатии на кнопку “Добавить”, мы можем видеть как мгновенно появляется новое поле.

Удаление конкретного поля формы.

Для удаления элементов DOM-дерева можно пользоваться методом 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 "" style="color: #3366CC;">"> Поле №" telnum "text" width="120" name="val[]" style="color: #3366CC;">" value=""/> " onclick="deleteField(" telnum ");">
"); }

Сама функция deleteField() может быть устроена предельно просто:

function deleteField (id) { $("div#add" id).remove(); }

Собственно все. Теперь при нажатии на кнопку (красный крестик) напротив выбранного поля — оно исчезнет, а вместе с ним и та информация, которая была записана в нем.

Обработка данных на сервере (php).

Когда форма содержит множественные поля, с однотипными данными, то естественно встает вопрос обработки данных, например перед отправкой в базу данных. В примере выше, этот вопрос решается указанием у поля формы атрибута name с параметром val[]. Это означает, что после отправки данных этой формы методом POST, значения этих полей будут помещены в массив $_POST[‘val’], элементы которого можно перебрать в цикле foreach (. ) <. >, например:

foreach ($_POST["val"] as $value) { // ваш код. }

Или, если необходимо, все данные этих однотипных полей “склеить” в одну строку с помощью функции implode():

Тогда все значения полей с name=”val[]” — будут объединены в строку с разделителем “вертикальная черта”.

Но, это обработка на стороне сервера, которая кстати говоря — более предпочтительна по соображениям безопасности. Но, могут возникнуть обстоятельства вынуждающие вас выполнять обработку таких полей на клиентской стороне: например у вас нет доступа к скриптам сервера (используется какой-то удаленный обработчик формы), или вы не можете по каким-то причинам изменить работу обработчика формы на вашем сервере. В таком случае можно так же пользоваться средствами языка javascript, а так как мы уже работаем с библиотекой jQuery — то и продолжим работать в ней.

Обработка данных на клиентской стороне.

Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.

Для начала, нам необходимо несколько модифицировать саму форму, а именно добавить одно скрытое поле:

input type="hidden" name="values" id="values" value=" "/>

в него мы будем помещать объединенные в одну строку данные и отправлять уже на сервер для стандартной обработки.

Далее, необходимо чуть модифицировать сами множественые поля ввода, над которыми мы работали выше, а именно: в атрибут name поместить нумерованный параметр, а так же добавить событие onBlur=”” — при котором будет идти обращение к функции writeFieldsVlues().

input type="text" width="120" name="val1" id="val" onblur="writeFieldsVlues();" value=" "/>

Сама функция writeFieldsVlues(), может быть объявлена следующим образом:

function writeFieldsVlues () { var str = []; var tel = ""; for(var i = 0; i$("input#val").length; i ) { tel = $($("input#val")[i]).val(); if (tel !== "") { str.push($($("input#val")[i]).val()); } } $("input#values").val(str.join("|")); }

То есть идет цикл по всем элементам input с из каждого извлекается значение атрибута value=”” (то что мы вводим в поле), и если это значение не пустое — помещаем в массив str. Далее массив объединяем в строку с разделителем “вертикальная черта” с помощью метода .join() и полученную строку записываем в атрибут value=”” скрытого поля input#values.

Для полноты действия, обращение к этой функции нужно добавить и в функцию deleteField (), чтобы удаление поля тоже приводило к обновлению информации в скрытом поле:

function deleteField (id) { $("div#add" id).remove(); writeFieldsVlues(); }

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

Ссылки для скачивания.

Здесь Вы можете скачать сопроводительные материалы к статье:

Если информация этой статьи будет интересна и полезна Вашему кругу друзей и знакомых, то Вы можете опубликовать ссылку — тогда им проще будет ее найти. Они Вам будут благодарны:).

Источник

doctor Brain

Иногда особенности интерфейса приложения требуют, чтобы у пользователя была возможность добавить в веб-форму неограниченное количество полей ввода. Для этого мы можем добавить кнопку Добавить поле (Add field), которая позволит при необходимости динамически создавать новые поля.

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

Создадим новую форму и добавим скрипт с функцией генерации динамический полей:

Итак, мы создали функцию add_field, добавляющую при каждом вызове новое поле ввода, которое будет являться предпоследним дочерним элементом в форме. Имя каждого нового поля ввода устанавливается как text_field[], определяя его как элемент массива.

Следующим шагом, чтобы сохранить динамические данные, создадим файл save_data.php:

$conn = mysqli_connect("localhost","USER_NAME","PASSWORD","DATABASE_NAME"); $data = $_POST['text_field']; $data = implode(",",$data); $query = "INSERT INTO `test`(`data`) VALUES ('$data')"; if(mysqli_query($conn,$query)) < echo "Success: Data successfully inserted"; >else

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

Новые публикации

JavaScript: сохраняем страницу в pdf

Источник

Добавление полей в форму

Задача: реализовать функционал «еще одно поле» для формы с ограничением числа полей и возможностью удаления.

Самое первое, что приходит в голову: заложить новые поля заранее в форме и поставить им style=»display:block». Далее с помощью простенького скрипта, меняющего значение display, показывать/скрывать эти поля. Однако, этот способ не очень удобен, т.к. в случае 20 и более полей будет передаваться большое количество HTML-кода, и для исправления придется копаться в скриптах на сервере.

Более удобно и правильно генерировать новые поля формы «на лету» JavaScript-ом и вставлять в DOM-дерево.

К сожалению, скрипты для добавления полей зависимы от верстки формы, поэтому панацеи не будет. Ниже приведен код формы, которую мы попытаемся «размножить», используя JavaScript-функции.

Суть скрипта в том, чтобы добавлять методом appendChild сгенерированные «на лету» ДИВы к родительскому ДИВу (id=»parentId»). Возникает резонный вопрос: «А не проще ли воспользоваться свойством innerHTML того же родительского ДИВа и используя оператор += прибавлять к нему код новых полей?». Ответ — «Нет!». Это связано с тем, что в некоторых браузерах при таком способе наблюдается сбой в работе формы, например:
— форма может терять значения, введенные ранее;
— форма может потерять введенные данные при сабмите;
Поэтому, при добаление полей следует аккуратно перестраивать DOM-ветку формы, оперируя только методами appendChild (или insertBefore) и removeChild.

var countOfFields = 1; // Текущее число полей var curFieldNameId = 1; // Уникальное значение для атрибута name var maxFieldLimit = 5; // Максимальное число возможных полей function deleteField(a) < // Получаем доступ к ДИВу, содержащему поле var contDiv = a.parentNode; // Удаляем этот ДИВ из DOM-дерева contDiv.parentNode.removeChild(contDiv); // Уменьшаем значение текущего числа полей countOfFields--; // Возвращаем false, чтобы не было перехода по сслыке return false; >function addField() < // Проверяем, не достигло ли число полей максимума if (countOfFields >= maxFieldLimit) < alert("Число полей достигло своего максимума = " + maxFieldLimit); return false; >// Увеличиваем текущее значение числа полей countOfFields++; // Увеличиваем ID curFieldNameId++; // Создаем элемент ДИВ var div = document.createElement("div"); // Добавляем HTML-контент с пом. свойства innerHTML div.innerHTML = " [X]"; // Добавляем новый узел в конец списка полей document.getElementById("parentId").appendChild(div); // Возвращаем false, чтобы не было перехода по сслыке return false; >

Замечание

Приведенный пример лишь показывает, как следует добавлять поля к форме, сам же код можно (и нужно) дополнять и совершенствовать под свои нужды, избавляясь от глобальных переменных и улучшая функционал.
Проверено в:
— IE 6;
— Opera 9.1;
— FF 1.5;

Источник