Cannot reference element by name after cloning

J

Josh

Hi,

After I clone an element, I can no longer reference the original
element by name.


<html>
<head>
<script>
function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);
newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);

alert('Original Value: ' + templateRow.value);

templateRow = document.local['name1'];
alert('Original Value no longer accessible: ' +
templateRow.value);

}
</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>


This seems to be problem only in IE. Is this a known issue? Am I
doing something incorrectly?

Thank you for any help.

Josh Rauscher
josh dot rauscher at gmail dot com
 
M

Martin Honnen

Josh said:
After I clone an element, I can no longer reference the original
element by name.

This seems to be problem only in IE. Is this a known issue? Am I
doing something incorrectly?
Click to expand...

It is a known issue with IE somehow being unable to dynamically set the
name property of a DOM element node. So technically it is not cloning
which causes the problem but rather inserting the cloned node into the
same form that contains the original node. That way you will have
templateRow = document.local['name1'];
being a collection of two nodes. There is not much you can do about that
but using the id to access elements.
 
E

Evertjan.

Josh wrote on 05 jul 2007 in comp.lang.javascript:
Hi,

After I clone an element, I can no longer reference the original
element by name.


<html>
<head>
<script>
function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);
newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);

alert('Original Value: ' + templateRow.value);

templateRow = document.local['name1'];
alert('Original Value no longer accessible: ' +
templateRow.value);

}
</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>


This seems to be problem only in IE. Is this a known issue? Am I
doing something incorrectly?
Click to expand...

Try this:

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

function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);

newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);

templateRow = document.local['name1'][0];
alert('Value of FIRST input: ' + templateRow.value);
templateRow = document.local['name1'][1];
alert('Value of SECOND input: ' + templateRow.value);
}

</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>

=====================

or more cross browser friendly:

templateRow = document.forms['local'].elements['name1'][0];
alert('Value of FIRST input: ' + templateRow.value);
templateRow = document.forms['local'].elements['name1'][1];
alert('Value of SECOND input: ' + templateRow.value);
 
J

Josh

Josh wrote on 05 jul 2007 in comp.lang.javascript:


Hi,
Click to expand...
After I clone an element, I can no longer reference the original
element by name.
Click to expand...
<html>
<head>
<script>
function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);
newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);
Click to expand...
alert('Original Value: ' + templateRow.value);
Click to expand...
templateRow = document.local['name1'];
alert('Original Value no longer accessible: ' +
templateRow.value);
Click to expand...
}
</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>
Click to expand...
This seems to be problem only in IE. Is this a known issue? Am I
doing something incorrectly?
Click to expand...

Try this:

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

function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);

newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);

templateRow = document.local['name1'][0];
alert('Value of FIRST input: ' + templateRow.value);
templateRow = document.local['name1'][1];
alert('Value of SECOND input: ' + templateRow.value);

}

</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>

=====================

or more cross browser friendly:

templateRow = document.forms['local'].elements['name1'][0];
alert('Value of FIRST input: ' + templateRow.value);
templateRow = document.forms['local'].elements['name1'][1];
alert('Value of SECOND input: ' + templateRow.value);
Click to expand...

Thank you both.

Your replies also led me to the documentation.
http://msdn.microsoft.com/library/d.../author/dhtml/reference/properties/name_2.asp
 
D

dhtmlkitchen

IE has a weird syntax that works with name attribute

You can see that for createElement, IE will take a string of HTML.

"Attributes can be included with the sTag as long as the entire string
is valid HTML. To include the NAME attribute at run time on objects
created with the createElement method, use the sTag ."
taken from: http://msdn2.microsoft.com/en-us/library/ms536389.aspx

I found that the above approach will work, but is messy.
You might try it with innerHTML. That way you don't have conditional
logic. If your code usually uses createElement, then make sure you put
a comment in detailing why you used innerHTML in that case.


Josh wrote on 05 jul 2007 in comp.lang.javascript:
Hi,
After I clone an element, I can no longer reference the original
element by name.
<html>
<head>
<script>
function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);
newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);
alert('Original Value: ' + templateRow.value);
templateRow = document.local['name1'];
alert('Original Value no longer accessible: ' +
templateRow.value);
}
</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>
This seems to be problem only in IE. Is this a known issue? Am I
doing something incorrectly?
Click to expand...
Click to expand...
Try this:
Click to expand...
<html>
<head>
<script type='text/javascript'>
Click to expand...
function cloneElement() {
var templateRow = document.getElementById('id1');
var newRow = templateRow.cloneNode(true);
Click to expand...
newRow.id = 'id2';
newRow.name = 'name2';
newRow.value = 'value2';
templateRow.parentNode.appendChild(newRow);
Click to expand...
templateRow = document.local['name1'][0];
alert('Value of FIRST input: ' + templateRow.value);
templateRow = document.local['name1'][1];
alert('Value of SECOND input: ' + templateRow.value);
}
Click to expand...

</script>
</head>
<body onload="cloneElement();">
<form name="local">
<input id="id1" name="name1" type="text" value="value1">
</form>
</body>
</html>
=====================
Click to expand...

or more cross browser friendly:
Click to expand...
templateRow = document.forms['local'].elements['name1'][0];
alert('Value of FIRST input: ' + templateRow.value);
templateRow = document.forms['local'].elements['name1'][1];
alert('Value of SECOND input: ' + templateRow.value);
Click to expand...

Thank you both.

Your replies also led me to the documentation.http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dh...- Hide quoted text -

- Show quoted text -
Click to expand...
 

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

Setting the NAME attibute of an for element after page has loaded 15
can't reference the input element properly 5
Song requests 4
Very Basic CC Validation Javascript 0
Function name and input name property 6
Only one table shows up with the information 2
Issue with passing js var value to a form element 1
Need help with stripe payment 0

Members online

Total: 24 (members: 1, guests: 23)
Robots: 120

Forum statistics

Threads
473,780
Messages
2,569,607
Members
45,240
Latest member
pashute

Latest Threads

Top