Changing name attribute using jQuery

Question

I've got a jQuery function that attempts to change the id, name and class attribute values of an element.

The id and class change seems to work but for some curious reason, trying to change the name of the element never works.

Here is my code:

$(document).ready(function () {

$("table select").live("change", function () {

    var id = $(this).attr('id');

    if ($(this).attr('classname') != "selected") {
        var rowIndex = $(this).closest('tr').prevAll().length;
        $.getJSON("/Category/GetSubCategories/" + $(this).val(), function (data) {
            if (data.length > 0) {

                $("#" + id).attr('classname', 'selected');
                $("#" + id).attr('id', 'sel' + rowIndex);
                $("#" + id).attr('name', 'sel' + rowIndex); // this never works

                var position = ($('table').get(0));

                var tr = position.insertRow(rowIndex + 1);
                var td1 = tr.insertCell(-1);
                var td2 = tr.insertCell(-1);
                td1.appendChild(document.createTextNode('SubCategory'));
                var sel = document.createElement("select");
                sel.name = 'parent_id';

                sel.id = 'parent_id';

                sel.setAttribute('class', 'unselected');
                td2.appendChild(sel);

                $.each(data, function (GetSubCatergories, Category) {
                    $('#parent_id').append($("<option></option>").
       attr("value", Category.category_id).
       text(Category.name));
                });
            }

        });

    }
});
});

karim79 · Accepted Answer · 2010-04-27 01:33:43Z

65

The name cannot be changed because once you have modified the id, the selector in the subsequent expression (which uses the unmodified id) is selecting nothing :)

$("#" + id).attr('id', 'sel' + rowIndex);
$("#" + id).attr('name', 'sel' + rowIndex); // this can't ever work

Try chaining them together like this, to keep the reference to the current selection:

$("#" + id).attr('id', 'sel' + rowIndex)
           .attr('name', 'sel' + rowIndex);

Alternatively, reorder the statements such that you change the name (and/or whatever else) before changing the id:

$("#" + id).attr('name', 'sel' + rowIndex);
$("#" + id).attr('id', 'sel' + rowIndex);

You can also assign the selection to a variable:

var $el = $("#" + id);
$el.attr("id", 'sel' + rowIndex);
...

edited Apr 27, 2010 at 1:33

answered Apr 26, 2010 at 16:59

karim79

343k67 gold badges420 silver badges409 bronze badges

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

4 Comments

Rabbott Over a year ago

chaining just returns the element, no? You may have to re-arrange the order, good catch btw!

user113716 Over a year ago

My answer missed the obvious completely! But jQuery has a name() function? Must be a typo. Also, worth noting that it is probably better to call attr() once, and pass in a object with all the settings.

user113716 Over a year ago

Thought maybe you had some insider info!

kevin Over a year ago

Duh of course guys, Thanks a lot, I think its time for me to go home now before I ask any more stupid questions :)

Gaurav Bharti · Accepted Answer · 2018-03-21 06:59:41Z

4

Instead of chaining you can pass into .attr()

{
    "id" : "sel" + rowIndex ,
    "name" : "sel" + rowIndex
}

A lot of jQuery functions accept objects like above when you have to pass in (string comma string) data like .css() and .animate()

edited Mar 21, 2018 at 6:59

Gaurav Bharti

1,1051 gold badge14 silver badges22 bronze badges

answered Feb 18, 2016 at 19:47

user3152459

4031 gold badge5 silver badges12 bronze badges

Comments

Rabbott · Accepted Answer · 2010-04-26 17:00:41Z

3

Karim is right,

$("#" + id).attr('classname', 'selected');
$("#" + id).attr('id', 'sel' + rowIndex);
$("#" + id).attr('name', 'sel' + rowIndex);

could be changed to

$("#" + id).attr('name', 'sel' + rowIndex);
$("#" + id).attr('classname', 'selected');
$("#" + id).attr('id', 'sel' + rowIndex);

to change the name first, $("#" + id) is the same as getElementById and once you change the id, its no longer the element you meant to refer to

answered Apr 26, 2010 at 17:00

Rabbott

4,3321 gold badge32 silver badges53 bronze badges

Comments

Muhammad Ali · Accepted Answer · 2021-01-12 08:12:35Z

0

I had a similar issue where I needed to reassign those attributes. I managed to achieve this simply and only by using the native method setAttribute().

$('.check-box-id').each(function (index,element) {
    element.setAttribute("id" , 'ingredients'+index+'.id');
    element.setAttribute("name" , 'ingredients['+index+'].id');
   
})

answered Jan 12, 2021 at 8:12

Muhammad Ali

1151 silver badge7 bronze badges

Collectives™ on Stack Overflow

Changing name attribute using jQuery

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related