Question

Hi I have a input box that needs to be cloned up to six times, according to the .clone() function, i can do this, but if the input name has to be changed, how to do this.

http://api.jquery.com/clone/

<label for="input">
 <input name="input" id="input" type="text">
</label>

<a href="#" onClick="cloneInput()">Add Another Input</a>

So let’s say when a new input is created it should add an increment to the name and id, ie: name="input2" id="input2" and so on, each time the object is cloned.

Anyone have any suggestions on the best/easiest way to do this with jQuery?

Answer 1

First of all remove inline event handling use jQuery and instead of using clone you can try this.

Markup

<div id="inputContianer">
   <label for="input">
     <input name="input" id="input" type="text">
   </label>
</div>

<a class="cloneInput" href="#">Add Another Input</a>

JS

$(function(){
   var count = 1;
   $('a.cloneInput').click(function(){
       var id = 'input' + (count++);
       $('<label />', { for: id })
       .append($('<input />', { id: id, name: id, type: "text" }))
       .appendTo('#inputContianer');

       return false;
   });
});