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

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

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

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

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

<form method="GET" action="#">
<div id="parentId">
<div>
<input name="name_1" type="text" />
<a onclick="return deleteField(this)" href="#">[X]</a>
</div>
</div>
<input class="s" type="submit" value="GO!" />
</form>
<a onclick="return addField()" href="#">Добавить поле</a>

Суть скрипта в том, чтобы добавлять методом 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 = "<input name="name_" + curFieldNameId + "" type="text" /> <a onclick="return deleteField(this)" href="#">[X]</a>";
// Добавляем новый узел в конец списка полей
document.getElementById("parentId").appendChild(div);
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}

Замечание

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

Egor 25-02-2012    Ваша задача не решаема таким способом если добавлять более сложную структуру. Например если добавить div или таблицу содержащую набор элементов формы. В этом случае как решить задачу?

Живые меню или Как сделать красиво с помощью CSS и JavaScript

14-03-2009

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее Комментарии: 0 Кол. просмотров: общее - 5624 сегодня - 0

Локальная баннерная система

14-03-2009

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее Комментарии: 0 Кол. просмотров: общее - 4746 сегодня - 0

Локальная реклама

14-03-2009

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее Комментарии: 0 Кол. просмотров: общее - 5099 сегодня - 0

Использование JS для создания «умных» форм

14-03-2009

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее Комментарии: 0 Кол. просмотров: общее - 4927 сегодня - 0

Обманщик спам-роботов

14-03-2009

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее Комментарии: 0 Кол. просмотров: общее - 5168 сегодня - 0