Rename attribute name after deletion

Question

I have a series of select fields that is created when I click the "Add" button. The select fields are created within an unordered list, and it goes a little like this:

<li><select name="fieldname1"></select><input type='button' name='delbtn1'></li>
<li><select name="fieldname2"></select><input type='button' name='delbtn2'></li>
<!--etc-->

As you can see, I've given a sequence in the names. This is to allow me to do server side scripting after the form is submitted.

I'm also allowing the user to delete the list item, but I would like to still retain the sequence naming after deletion. This would mean: if I delete "fieldname2" in between "1" to "3", I would like to resequence it to "1", and "2".

I've attempted to use the .each() method to go through each list item, but am unable to rename the name correctly.Don't really know what went wrong here.

JS Fiddle here: http://jsfiddle.net/kosherjellyfish/JsW3a/3/

Use `fieldname[]` name attributes, you will have an array of values on the server. — Ram, Dec 01 '13 at 15:13
I'm not able to do that, because I'm not writing this in PHP. Am doing it in ASP : ) — kosherjellyfish, Dec 02 '13 at 01:24

Tushar Gupta - curioustushar · Accepted Answer · 2013-12-01T15:23:22.627

3

fiddle Demo

$("ul.criteriallist li .fieldname").each(function (index) {
    $(this).prop("name", "fieldname" + ++index);
});

or Better .prop()

fiddle Demo

$("ul.criteriallist li .fieldname").prop("name", function (index) {
    return "fieldname" + ++index;
});

fiddle Demo

$("ul.criteriallist li .fieldname").prop("name", function (index) {
    return "fieldname" + ++index;
});
$("ul.criteriallist li .deletebtn").prop("name", function (index) {
    return "delete" + ++index;
});

Problem with your code

$("ul.criteriallist li").each(function (index) {
    $(".fieldname").attr("name", "fieldname" + index + 1);
    // $(".fieldname") refers to all elements so it sets same value to all
   //index + 1 will concatenate string if index is 1 than it will result 11
  //you can use $(this).find(".fieldname")
});

edited Dec 01 '13 at 15:23

answered Dec 01 '13 at 15:12

Tushar Gupta - curioustushar

58,085
24
103
107

1

+1 for the latter approach (I was about to comment you should do it that way) :) – David Thomas Dec 01 '13 at 15:16
@DavidThomas i was on it :) – Tushar Gupta - curioustushar Dec 01 '13 at 15:17
Ok I just learnt a new concept by using .prop from you. But Why do we need to use .prop with the name attribute.? It will better suits if we are manipulating a selected/checked property. Am I right.? – Rajaprabhu Aravindasamy Dec 01 '13 at 15:23
@RajaprabhuAravindasamy You are right with `selected/checked property` it works very good . – Tushar Gupta - curioustushar Dec 01 '13 at 15:26
1

That's not true, `attr` doesn't call the `prop` method. – Ram Dec 01 '13 at 15:29
Read [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) – Tushar Gupta - curioustushar Dec 01 '13 at 15:31
1

Thanks @TusharGupta for explaining to me where I've went wrong :) – kosherjellyfish Dec 02 '13 at 01:52

score 1 · Answer 2 · answered Dec 01 '13 at 15:13

There are two mistakes I just managed to find in your code,

You are re-assigning the name directly by using the class name. At that place you have to use $(this) to change the name of the targeting input element.
And you are concatenating the index values with out doing arithmetic calculations on it

Try this,

$("ul.criteriallist li").each(function (index) {
    $(this).find(".fieldname").attr("name", "fieldname" + (index + 1));
});

Rename attribute name after deletion

2 Answers2

DEMO