CODEWITHSUNDEEP
jqueryforms
user120944
user120944

Reputation:

Add Dynamic name to input sequentially

<tr>
<td><input name="of[1][dsn]" type="text" size="6" /></td>
<td><input name="of[1][gc]" type="text" size="6" /></td>
<td><input name="of[1][ys]" type="text" size="3" /></td>
<td><input name="of[1][ym]" type="text" size="3" /></td>
<td><input name="of[1][yl]" type="text" size="3" /></td>
<td><input name="of[1][s]" type="text" size="3" /></td>
<td><input name="of[1][m]" type="text" size="3" /></td>
<td><input name="of[1][l]" type="text" size="3" /></td>
<td><input name="of[1][xl]" type="text" size="3" /></td>
<td><input name="of[1][xxl]" type="text" size="3" /></td>
<td><input name="of[1][xxxl]" type="text" size="3" /></td>
<td><input name="of[1][xxxxl]" type="text" size="3" /></td>
<td><input name="of[1][xxxxxl]" type="text" size="3" /></td>
<td><input name="of[1][total]" type="text" size="4" /></td>
</tr>

I currently have this being cloned using jQuery and would like to have it to where the number in the "name" attribute is raised by +1 every time it is duplicated. "of[1][dsn]" to "of[2][dsn]" etc. How can I do this? Below is what I had tried to use, but that was flat out replacing what was already there. 

 ("input").each(function(index, element){$(element).attr("name", index);});

This is what I am using to actually clone the table row:

var clonedRow = $("table tr:last").clone();     
$("table tr:last").clone(true).insertAfter("table tr:last").append(clonedrow);

Upvotes: 2

Views: 2931

Answers (2)

Pim Jager
Pim Jager

Reputation: 32119

Okay you need something like this. First we clone, then we increase the number in the name by one, and then we apply that to each of the inputs, and then we insert them into the DOM.

var $cloned = $('#selector').clone();
var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
var newIndex = parseInt(oldIndex,10)+1;
$cloned.find('input').each(function(){
   var newName = $(this).attr('name').replace(oldIndex, newIndex);
   $(this).attr('name', newName);
});
$cloned.appendTo('#something');

This assumes that the number to be increased is always the first number in the name string (it can however be multiple digits).

Edit In response to you comment: You need to clone the cloned object in the rest of your code. Thus always clone the lastest clone. You should rewrite the code to something like this:

function clone(){
  var $cloned = $('table tr:last').clone();
  var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
  var newIndex = parseInt(oldIndex,10)+1;
  $cloned.find('input').each(function(){
     var newName = $(this).attr('name').replace(oldIndex, newIndex);
     $(this).attr('name', newName);
  });
  $cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone);

Upvotes: 1

Matthew Groves
Matthew Groves

Reputation: 26151

Check out the jQuery clone function and see if that helps. You'll still have to do some parsing, I think, to update the names.

Upvotes: 0

Related Questions