Changing input name using JQUERY

Question

I'm trying to change all the input name based on the list index of <li> but it seems like it's not changing at all.

$('.test').click(function() {
for(var i=0;i<$("li.songs").length;i++)
{
  var ob = $("li.songs").eq(i).clone();
  ob.find('input').each(function()
  {
    this.name = this.name+i;
    alert(this.name); //just checking if does it change
  });      
}
});

Now, the alert displays the right name I want, BUT no changes on the name when I inspect the element AND try to submit the form and display all the POST values.

Example expected output before changing:

<li class="songs"><input type="text" name="song" /></li>
<li class="songs"><input type="text" name="song" /></li>
<li class="songs"><input type="text" name="song" /></li>

After changing:

<li class="songs"><input type="text" name="song1" /></li>
<li class="songs"><input type="text" name="song2" /></li>
<li class="songs"><input type="text" name="song3" /></li>

NOTE: I DO NOT WANT the input named song to be an ARRAY.

actually that's a typical server-side task, you may generate correct name there. alternative - you can delete all this items and write back with JS (just I don't think that's a good practice) — Mike
– Mike, Commented Aug 19, 2011 at 8:21

Jens Roland · Accepted Answer · 2011-08-19 08:24:24Z

39

You are cloning the object, so the change is done to a copy rather than the original DOM node.

Don't use clone() and you'll be fine. Or do this:

$("li.songs input").each(function(i) {
  $(this).attr('name', $(this).attr('name') + i);
});

edited Aug 19, 2011 at 8:24

answered Aug 19, 2011 at 8:19

Jens Roland

27.8k15 gold badges86 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dogbert · Accepted Answer · 2011-08-19 08:18:14Z

12

$("li.songs").each(function(i) {
  $(this).find('input').attr('name', 'song' + i);
});

answered Aug 19, 2011 at 8:18

Dogbert

224k43 gold badges419 silver badges416 bronze badges

Collectives™ on Stack Overflow

Changing input name using JQUERY

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related