jquery клонирование новых элементов и добавление переменной к имени

Question

Привет, У меня есть функция jQuery для дублирования полей формы. Теперь мне нужно обработать их с помощью PHP, и моя проблема в том, что клонированные элементы имеют одинаковое имя ввода.

Я хотел был бы добавить и variabel на конце имени как _1 _2 _3 и так далее. Также было бы здорово положить в скрытое поле количество клонированных элементов для обработки их в цикле.

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

Возможно, вы, ребята, можете мне помочь. Будет appriciate это много :)

Там является JQuery часть:

$(document).ready(function() { 
$('#btnAdd').click(function() { 
    var num  = $('.clonedInput').length; 
    var newNum = new Number(num + 1); 

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
    $('#input' + num).after(newElem); 

    $('#btnDel').removeAttr('disabled'); 

    if (newNum == 10)// Max 
     $('#btnAdd').attr('disabled','disabled'); 
}); 

$('#btnDel').click(function() { 
    var num = $('.clonedInput').length; 

    $('#input' + num).remove(); 
    $('#btnAdd').removeAttr('disabled',''); 

    if (num-1 == 1) 
     $('#btnDel').attr('disabled','disabled'); 
}); 

$('#btnDel').attr('disabled','disabled'); 

});

А вот HTML

<div id="input1" class="clonedInput"> 
<!-- Elements to clone --> 
    <div class="control-group"> 
     <label class="control-label" for="">Firmenname</label> 
     <div class="controls"> 
      <input type="text" class="input-xlarge {validate:{required:true}}" rel="popover" data-content="Der Firmenname ist ein wichtiger Hinweis." data-original-title="Hilfe" id="firma" name="firma"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label" for="">Branche</label> 
     <div class="controls"> 
      <input type="text" class="input-xlarge" name="branche"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label" for="">Anschrift</label> 
     <div class="controls"> 
      <input type="text" class="input-xlarge" name="anschrift"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label" for="">Ansprechpartner</label> 
     <div class="controls"> 
      <input type="text" class="input-xlarge" name="ansprechpartner"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label" for="">Tel.</label> 
     <div class="controls"> 
      <input type="text" class="input-xlarge"> 
     </div> 
    </div> 
<!-- END Elements to clone -->  
</div> 

Answer 1

Ваши имена входных должны быть все name[], а не name_1, name_2 и т.д. PHP распознает этот формат имени, и делает $_POST['name'] массив с элементом для каждого из входов с этим именем.

Вам все еще нужно предоставить уникальные идентификаторы элементов. Но, возможно, вашим клонированным входам вообще не нужны идентификаторы, поэтому вы можете полностью избежать этой проблемы.

Возможно, вы также захотите посмотреть плагин jquery-dynamic-form. Тем не менее, я просто проверил и не решает эту проблему (на самом деле, демонстрация, в которой кнопки + и - встроены в каждую строку, имеет повторяющиеся идентификаторы, поэтому это не действительный DOM).

BTW, вам не нужно использовать new Number. Просто напишите:

var newNum = num+1; 

Answer 2

Чтобы сделать уникальный идентификатор, просто держать счетчик, который начинается с 0 и увеличивается на 1 каждый раз, когда вы делаете новый клон. Затем соедините этот счетчик с вашим полем имени.