Динамическое добавление полей в форме?

Question

[Adiost]

Добрый вечер.



Возникла необходимость организовать скрипт для редактирования значений в базе.



Ситуация: есть три input поля в форме (для наглядности упомяну, что они расположены одной строкой), атрибут name у каждого input имеет вид name[N].



Необходимо средствами JS, jQuery или еще чего угодно добавить возможность добавления новой строки с тремя инпутами с изменением атрибутов name (name[N+1]),



Простите за столь дилетантский вопрос, но никак не могу придумать как же это реализовать.

Answer 1

[nixmale]

<div id="parentId">
  <div>
    <nobr><input name="name[1]" type="text" style="width:300px;" />
    <select size="1" name="type[1]" style="width:150px;">
      <option value="text">Текстовое поле</option>
      <option value="int">Целое число</option>
      <option value="float">Число-цена</option>
    </select>
    <a style="color:red;" onclick="return deleteField(this)" href="#">[—]</a>
    <input name="url[1]" type="text" style="width:300px;" />
    <a style="color:green;" onclick="return addField()" href="#">[+]</a></nobr>
  </div>
</div>

<script>
var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 25; // Максимальное число возможных полей
function deleteField(a) {
  if (countOfFields > 1)
  {
 // Получаем доступ к ДИВу, содержащему поле
 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 = "<nobr><input name=\"name[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" /> <select size=\"1\" name=\"type[" + curFieldNameId + "]\" style=\"width:150px;\"><option value=\"text\">Текстовое поле</option><option value=\"int\">Целое число</option><option value=\"float\">Число-цена</option></select> <a style=\"color:red;\" onclick=\"return deleteField(this)\" href=\"#\">[—]</a> <input name=\"url[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" /> <a style=\"color:green;\" onclick=\"return addField()\" href=\"#\">[+]</a></nobr>";
 // Добавляем новый узел в конец списка полей
 document.getElementById("parentId").appendChild(div);
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}
</script>

Comments

[RakotAdmin]

Подскажите, а как запихать все значения полей в переменную, чтоб потом использовать.?

Answer 2

[Анатолий]

Простейший вариант:
Делаем шаблончик нужного хтмл но как значение переменной

var tpl = "
<div>\
    <input name='name[%%num%%]'>\
    <input name='name[%%num%%]'>\
    <input name='name[%%num%%]'>\
</div>\
";

При нажатии на кнопку добавления новой строки просто заменяете в переменной %%num%% на счетчик++

var currentTpl = tpl.replace(/%%num%%/g, counter++)

и вставляете после текущих полей

Comments

[Илья Плотников]

из name[] составляется неассоциативный массив. так что получим name[0]

[Илья Плотников]

не так понял автора ответа. судя по всему, с шаблонами самый аккуратный вариант

[WTERH]

Идеальное решение, обернул в jquery, вышло так:

// Считаем от 1, потому что счетчик используется так же для обозначения номера маршрута
        var counter = 1;
        function addWaybill(){
            if(counter <= 10){
                var tpl = '<div> \
                <input name=\"name['+ counter +']\" /> \
                <input name=\"title['+ counter +']\" /> \
                <input name=\"url['+ counter +']\" /> \
                <input name=\"text['+ counter +']\" /> \
                <input name=\"date['+ counter +']\" /> \
            </div>';
                $('.myform').append(tpl);
                counter++
                if(counter == 11){
                    // Удаляем кнопку, по достижении лимита
                    $('#input-add').remove();
                }
            }
            else{
                alert('Достигнуто максимальное кол-во полей!');
            }
        }

Answer 3

[ivandanylovskyy]

ПРошло много времени, но если автор ещё здесь то прошу ответить зачем в коде внизу слеши в коде "\\" мне нужно подставить свои поля в это скрипт я никак не пойму синтаксис а яву учить неохота для одной формы. Заранее благодарю за ответ

div.innerHTML = "<nobr><input name=\"name[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" /> <select size=\"1\" name=\"type[" + curFieldNameId + "]\" style=\"width:150px;\"><option value=\"text\">Текстовое поле</option><option value=\"int\">Целое число</option><option value=\"float\">Число-цена</option></select> <a style=\"color:red;\" onclick=\"return deleteField(this)\" href=\"#\">[—]</a> <input name=\"url[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" /> <a style=\"color:green;\" onclick=\"return addField()\" href=\"#\">[+]</a></nobr>";

Comments

[Adiost]

Слэши эскейпят спецсимволы.

[ivandanylovskyy]

спасибо за ответ. Уже давно разобрался

Answer 4

[xaker1]

Если правильно понял, то:

$("#add_new_fields").live('click', function(){
	var num = $("#last_fields").attr("num");
		$("#last_fields").before('<input type="text" name=name['+(parseInt(num)+1)+'] value=""> 
Возможно описание здесь.');
		$("#last_fields").attr("num", (parseInt(num)+1))
});

В HTML

<tr id="last_fields" num="4"></td>
...
тут код
...
<a id="add_new_fields" href="javascript:void(0);" >Добавить еще</a>

При нажатии на последнюю кнопку будет добавлена строка «Здесь_вставляемая_строчка» перед Но данный код приспособлен для таблицы, не думаю, что будет сложно его к вашему случаю адаптировать.

Comments

[xaker1]

Код не мой (писали по моему заказу), JS знаю плохо, но вроде ничего не перепутал.

Answer 5

[try4tune]

Сохраняете значение N в переменную (по умолчанию присваиваете, скажем, 0). Потом при каждом нажатии кнопки добавления инпутов создаете элементы (document.createElement) и инкрементите N. Вроде довольно несложно все.