создание динамических элементов формы (с увеличенными атрибутами имени)

Question

Как я могу динамически создать элемент формы и предоставить ему динамически увеличивающиеся атрибуты входного имени? Я работаю с JQuery, но я открыт для любых решений.

У меня есть div, который выглядит так:

<div>

<input type="text" name="title1" />

<input type="text" name="body1" />

<select name="photo1" size="1">

<option value="0">foo</option>

</select>

</div>

и я хочу клонировать его n раз И увеличить значения имени на 1 так, например, второй div будет выглядеть так (меняются только значения имени):

<div>

<input type="text" name="title2" />

<input type="text" name="body2" />

<select name="photo2" size="1">

<option value="0">foo</option>

</select>

</div>

Клонировать div просто с помощью jquery:

$(document).ready(function(){
    $('.toClone').click(function(){
        $(this).clone(true).insertAfter(this);
     });
});

но у меня возникают проблемы с автоматическим увеличением значения имени динамически создаваемых полей div.
Кто-нибудь знает, как это сделать?

Answer 1

С чем вы это обрабатываете? В PHP вы можете назвать поля title[], body[] и т. Д., Чтобы они отправлялись в виде массива. Это был бы лучший способ сделать это, поскольку клонирование было бы тривиальным. Насколько я знаю, он работает аналогично для других технологий. Во всяком случае, если вы действительно хотите сделать это по-своему:

$(document).ready(function(){
    $('.toClone').click(function(){
        var el = $(this).clone(true).insertAfter(this);
        var regex = new RegExp(/^(.+)(\d+)$/);
        $(el).find(':input').each(function() {
            var match = $(this).attr('name').match(regex);
            $(this).attr('name', match[1] + (++match[2]));
        });
    });
});

Это должно сработать.

Answer 2

Изменение поля атрибута имени можно выполнить с помощью следующего:

var i = 1;
$(this).clone(true).attr('name', 'title' + i).insertAfter(this);

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