14

According to SitePoint (and my own experiments), the IE implementation of "setAttribute()" is buggy and unreliable.

Also according to SitePoint, the name attribute is read-only.

Is there another way I can set the name attributes on elements? I need this for use with radio buttons. If possible, I'd like a solution without jQuery, as I'm currently not using the library.

Thanks in advance!

1
  • 1
    Your SitePoint reference points to the name property of an Attribute object not the name propery of a HTMLInputELement, you need to compare eggs with eggs. Commented Sep 1, 2009 at 14:04

7 Answers 7

17

This worked for me

alert(document.getElementById('testInput').name);
document.getElementById('testInput').name = 'someName';
alert(document.getElementById('testInput').name);

With

<input type="radio" name="test" id="testInput" />
Sign up to request clarification or add additional context in comments.

1 Comment

It partially works. However, it does not change the radio group the button belongs to, so if you had another input called someName on the same page they would remain independent, and if you had another input called test, it would still be exclusive with the new someName control. Also if you try to retrieve 'someName' using getElementsByName, or form.someName/form.elements.someName, however, IE can't find it. There may be more weird interactions like this; in general it's best avoided.
5

Sitepoint liesis talking about a different usage of ‘name’ (see Anthony's comment). It's not read-only, it's just there's a long-standing IE bug (up to v7) where setting ‘name’ on form fields is only partially effective. Radio buttons in particular don't accept it properly.

The Microsoft-endorsed solution, as detailed here is to use a horrific misfeature of IE's version of the createElement call to set attributes at the same time:

var radio= document.createElement('<input type="radio" name="test" value="a" />');

Probably a better way would simply be to use good old innerHTML, eg.:

var div= document.createElement('div');
div.innerHTML= '<input type="radio" name="test" value="a" />';
var radio= div.firstChild;

3 Comments

This looks like INSERTING the element into the dom, instead of setting the name attribute to me.
You can't set the name attribute in IE. So this creates a new radio element, which you could replace the existing radio element with if that's what you want. You could set the innerHTML on the parent of the original radio, if that's what you're after; there's not quite enough info in the question to say.
This seems to be the only reliable way to do this in IE );
3

Why not use setAttribute("name", yourValue) it works perfectly fine.

Comments

1

Have you tried simply assigning a new name to the elements name property? I'm not sure how cross-browser that is but it shold work with anything supporting DOM level 1.

I'm not sure why you would use setAttribute to perform this?

1 Comment

I posted some code that does it like this and worked for me. if I would have seen this answer first I wouldn't have posted it.
0

The name property is not read only for input elements.

See the spec.

Comments

0

Looking at W3C DOM Compatibility - Core you could try using setAttributeNode() instead of setAttribute(). It may work on IE 6 and above.

Comments

0

IE DOM does not allow me to change name attribute on runtime. However, using jQuery to update the name attribute works on IE. I tested on IE9. For examples,

<input id="ID0E2B" name="Field2" value="3" type="radio" />
$("#ID0E2B").attr("name", newName);

1 Comment

And how does jQuery do it?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.