Setting the NAME attibute of an for element after page has loaded

L

Laser Lips

Hello.
I need to change the name of a form element(s) after the HTML has
loaded and I can do it in FireFox but not in IE.
Here is a small snippet of code.

<HEAD>
<BODY>
<input type='text' id='test' name='useName'/>
<script type='text/javascript'>
var el=document.getElementById("test");

alert(el);

var els=document.getElementsByName("useName");

//alert should output 1
alert(els.length);

//trying two ways to set the attribute
el.setAttribute("name","graham");
el.name="graham";

var els=document.getElementsByName("graham");

//FireFox outputs 1, but IE outputs 0
alert(els.length);
</script>
</BODY>
</HTML>
 
L

Laser Lips

OK found a solution, albeit a hack.

el.outerHTML=el.outerHTML.replace("useName","graham");
 
T

Tim Slattery

Laser Lips said:
Hello.
I need to change the name of a form element(s) after the HTML has
loaded and I can do it in FireFox but not in IE.
Here is a small snippet of code.

<HEAD>
<BODY>
<input type='text' id='test' name='useName'/>
<script type='text/javascript'>
var el=document.getElementById("test");

alert(el);

var els=document.getElementsByName("useName");

//alert should output 1
Click to expand...

Right, it's an array with one element. So use:

els[0].name = "graham";
 
L

Laser Lips

Right, it's an array with one element. So use:

els[0].name = "graham";

--
Click to expand...
Tim, nope I was using the el which used getElementById...so not an
array.
Graham
 
D

Denis McMahon

el.setAttribute("name","graham");
el.name="graham";
Click to expand...

If a browser bombs out because it doesn't implement setAttribute, then
it might not reach the alternative.

Also your html is badly broken which might not be helping.

The following works in firefox, I can't answer for other browsers.

---8<--- cut here ---8<---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<script type='text/javascript'>

function el(id)
{
return document.getElementById(id);
}

function change()
{
var ele = el("test");
if (ele.setAttribute) ele.setAttribute("name","graham");
else ele.name="graham";
}

function check()
{
var ele = el("test");
if (ele.getAttribute) alert(ele.getAttribute("name"));
else alert(ele.name);
}

</script>
</head>

<body>

<p>
<input type='text' id='test' name='fred'>
</p>

<p>
<input type='button' id='chgbtn' value='Change' name='chgbtn'
onclick='change()'>
<input type='button' id='chkbtn' value='Check' name='chkbtn'
onclick='check()'>
</p>

</body>
</html>
---8<--- cut here ---8<---

Rgds

Denis McMahon
 
D

Doug Gunnoe

Hello.
I need to change the name of a form element(s) after the HTML has
loaded and I can do it in FireFox but not in IE.
Here is a small snippet of code.

<HEAD>
 <BODY>
  <input type='text' id='test' name='useName'/>
        <script type='text/javascript'>
        var el=document.getElementById("test");

        alert(el);

        var els=document.getElementsByName("useName");

        //alert should output 1
        alert(els.length);

        //trying two ways to set the attribute
        el.setAttribute("name","graham");
        el.name="graham";
Click to expand...

el.name="graham";
var elm=document.getElementsByName('usename');
alert(elm.length + " " + elm[0].name); //1 graham

ridiculous.
 
S

Sean Kinsey

el.name="graham";
var elm=document.getElementsByName('usename');
alert(elm.length + " " + elm[0].name); //1 graham
Click to expand...
ridiculous.
Click to expand...

^ in IE
Click to expand...

This is a known issue in IE, and it has been like this in at least
IE6-7 and in 8 when using on of the older modes.
If you set the name attribute (as a property, using setAttribute etc)
of an element it will be redirected into a 'submitName' attribute
instead, and the this will not be usable as target etc.

Sean
 
L

Laser Lips

This is a known issue in IE, and it has been like this in at least
IE6-7 and in 8 when using on of the older modes.
If you set the name attribute (as a property, using setAttribute etc)
of an element it will be redirected into a 'submitName' attribute
instead, and the this will not be usable as target etc.

Sean
Click to expand...

Thanks Sean.
Denis, your code does not work fully. See my revised version.

<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test Name Change</title>
<head>
<script type='text/javascript'>

function el(id)
{
return document.getElementById(id);
}

function change()
{
var ele = el("test");
if (ele.setAttribute) ele.setAttribute("name","graham");
else ele.name="graham";
}

function check()
{
var ele = el("test");
if (ele.getAttribute) alert(ele.getAttribute("name"));
else alert(ele.name);

var byName=document.getElementsByName("fred");
alert("fred has "+byName.length);
byName=document.getElementsByName("graham");
alert("graham has "+byName.length);
}

</script>
</head>

<body>

<p>
<input type='text' id='test' name='fred'>
</p>

<p>
<input type='button' id='chgbtn' value='Change' name='chgbtn'
onclick='change()'>
<input type='button' id='chkbtn' value='Check' name='chkbtn'
onclick='check()'>
</p>

</body>
</html>
 
D

Denis McMahon

Denis, your code does not work fully. See my revised version.
Click to expand...
function check()
{
var ele = el("test");
if (ele.getAttribute) alert(ele.getAttribute("name"));
else alert(ele.name);

var byName=document.getElementsByName("fred");
alert("fred has "+byName.length);
byName=document.getElementsByName("graham");
alert("graham has "+byName.length);
}
Click to expand...

Instead of adding those calls, it might be better if you determined the
correct alternative to getAttribute(name) to make the code work.

I (perhaps rashly) assumed that an implementation that supported
setAttribute(name,value) would also support getAttribute(name) as per
the XML dom.

I also said "The following works in firefox, I can't answer for other
browsers." Perhaps you could tell me which browser(s) it didn't work in?

Note that my code specified a particular DTD. I've just tested it in ie
7 running under wine, chrome and opera, and it seems to work in all of
those, as well as firefox. So as you say my code does not work fully,
could you confirm that you are talking about my code, that is the whole
document between the cut lines, and not just a cut from it that you have
pasted into some other possibly broken document?

Rgds

Denis McMahon
 
L

Laser Lips

Denis,
Perhaps you could tell me which browser(s) it didn't work in?
Click to expand...

IE
I'm running it in a document all by itself...

In particular the lines
---
byName=document.getElementsByName("graham");
alert("graham has "+byName.length);
---

I need to get the elements with the new name using
document.getElementsByName, but this returns 0 elements when I ask for
elements with the new name.

<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test Name Change</title>
<head>
<script type='text/javascript'>

function el(id)
{
return document.getElementById(id);
}

function change()
{
var ele = el("test");
if (ele.setAttribute) ele.setAttribute("name","graham");
else ele.name="graham";
}

function check()
{
var ele = el("test");
if (ele.getAttribute) alert(ele.getAttribute("name"));
else alert(ele.name);

var byName=document.getElementsByName("fred");
alert("fred has "+byName.length);
byName=document.getElementsByName("graham");
alert("graham has "+byName.length);
}

</script>
</head>

<body>

<p>
<input type='text' id='test' name='fred'>
</p>

<p>
<input type='button' id='chgbtn' value='Change' name='chgbtn'
onclick='change()'>
<input type='button' id='chkbtn' value='Check' name='chkbtn'
onclick='check()'>
</p>
<br/>Press Check.
<br/>Then Change
<br/>Then Check again.
</body>
</html>
 
D

Denis McMahon

IE
I'm running it in a document all by itself...
Click to expand...

OK, well I tested the code in IE7 today, as I said, which is the latest
version I have running under wine, as well as chrome and opera.
In particular the lines
---
byName=document.getElementsByName("graham");
alert("graham has "+byName.length);
---

I need to get the elements with the new name using
document.getElementsByName, but this returns 0 elements when I ask for
elements with the new name.
Click to expand...

I corrected the following:
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test Name Change</title>
<head>
<script type='text/javascript'>
Click to expand...

to:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test Name Change</title>
<script type='text/javascript'>

I also see you didn't include the doctype declaration.
var byName=document.getElementsByName("fred");
alert("fred has "+byName.length);
byName=document.getElementsByName("graham");
alert("graham has "+byName.length);
Click to expand...

I shall add your lines to my code and see what happens.

In fact, because alert boxes are a pain in the bum, I shall add the
following:

alert ("fred is the name of " +
document.getElementsByName("fred").length +
" elements\n" +
"graham is the name of " +
document.getElementsByName("graham").length +
" elements");

And now I see the following behaviour:

When I click check *before* changing the values, everything is as
expected, all browsers alert with fred, and then 1 fred, 0 grahams.

When I click check *after* changing the values, everything is not as
expected. All 4 browsers alert with graham, but chrome and ie7, although
the first part of the check is finding the element called graham, still
have 1 fred and no grahams using the document.getElementsByName()
method. FF and Opera have 1 graham and 0 freds.

I don't think it's in the javascript, I think it's in the browsers, and
the way they either implement document.getElementsByName() or the
changed elements. The element's name attribute *_has_* changed at the
element level as can be seen by the alert that displays the document's name.

Chrome is running natively under linux/gnome, ie7 is running within wine.

Rgds

Denis McMahon
 
L

Laser Lips

Thanks for your vigorous testing Denis.

Very frustrating. Anyway, I've got round it with the trick above (for
IE) anyway, by re-writing the outerHTML, as I think only IE supports
outerHTML.

Here's one that will piss a lot of people off...I don't see the point
in multiple browsers. We strive to make all our software look and work
the same in each one. Why can't they all just die and merge into one?

;-)

Graham
 
D

David Mark

Thanks for your vigorous testing Denis.

Very frustrating.
Click to expand...

Don't bother with getElementsByName or setAttribute. Both have
problems in IE and both can virtually always be avoided. The issue
(as was noted at some point) is that some versions of IE has issues
with setting the name property (elements will not show up in DOM
collections under the assigned name).
Anyway, I've got round it with the trick above (for
IE) anyway, by re-writing the outerHTML, as I think only IE supports
outerHTML.
Click to expand...

You think wrong. For one, Opera supports it (as they do with many of
IE's proprietary properties and methods).

Using outerHTML in such a manner does get around the problem as it
invokes the parser, which causes the element to show up in the
appropriate DOM collections (e.g. document.images). You can also use
IE's proprietary spin on createElement, which allows attributes to be
included (not recommended). Additionally, you could use the innerHTML
property of the element's parent (assuming it contains just the one
node).

Realize that using outerHTML (or the innerHTML of a container)
replaces the element, so any references to it will be invalidated.
Here's one that will piss a lot of people off...
Click to expand...

Oh good.
I don't see the point
in multiple browsers.
Click to expand...

Commie! :) But seriously, there is a market for multiple browsers
and there's nothing you can do about that.
We strive to make all our software look and work
the same in each one.
Click to expand...

Not necessarily. Trying to make every document look (or even work)
exactly the same in every browser is a fool's errand. The goal is to
leverage each environment to its fullest without breaking the others.
Why can't they all just die and merge into one?
Click to expand...

Then we'd have one dead browser. :(
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Cannot reference element by name after cloning 4
How to use PDF-lib and how to center each line of texts on the page? 1
Help with my responsive home page 2
An unknown bug doesn't allow the quotes app to work. What's the issue? 3
Code Review: Ajax function with javascript on loaded page enabled 12
Only one table shows up with the information 2
input in a text box still appear after page refresh for IE but notFF, Chrome, Opera 4
Is there any way to change the "name" of one element? 9

Members online

Total: 56 (members: 3, guests: 53)
Robots: 355

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top