469,576 Members | 1,624 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,576 developers. It's quick & easy.

modifying childNodes of a cloned div

Hi,
I am modifying some code from here
http://www.quirksmode.org/dom/domform.html

I have a div 'readroot' that I clone. I change the change the id and
name of the childnodes of 'readroot' to the original name plus a
number(counter).

The problem is I have i have a div 'serials' inside 'readroot' and the
childnodes of
'readroot' are not modified with the current function i have.

What is the best way to modify the childnodes of the div serials?

I guess i could put another for loop inside the for loop of the
moreFields function
but i am thinking a recursive function could do it.

I am still a javascript beginner so i may be missing something obvious.

Thanks for your time,
Chuck


<script type="text/javascript">
var counter = 0;
function moreFields()
{ counter++;
var newFields = document.getElementById('readroot').cloneNode(true );
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{ var theID = newField[i].id;
if(theID) newField[i].id = theID + counter;
var theName = newField[i].name;
if (theName) newField[i].name = theName + '[' + counter + ']';
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,inser tHere);
}

window.onload = moreFields;
</script>

<div id="readroot" style="display: none" >
<input id="name" name="name" type="text" />
<input id="phone" name="phone" type="text" />
<input id="email" name="email" type="text" />
<div id="serials">
<input id="serialnumb" name="sn" type="text" />
<input id="warrantystatus" name="ws" type="text" />
<input id="condition" name="c" />
</div>
</div>

<form>
<span id="writeroot"></span>

<input type="button" value="Give me more fields!" onClick="moreFields()">

</form>
Nov 23 '05 #1
2 2361
chuck wrote:
Hi,
I am modifying some code from here
http://www.quirksmode.org/dom/domform.html

I have a div 'readroot' that I clone. I change the change the id and
name of the childnodes of 'readroot' to the original name plus a
number(counter).

The problem is I have i have a div 'serials' inside 'readroot' and the
childnodes of
'readroot' are not modified with the current function i have.

What is the best way to modify the childnodes of the div serials?

I guess i could put another for loop inside the for loop of the
moreFields function
but i am thinking a recursive function could do it.
Recursion is handy, but sometimes slow. Have you considered using
getElementsByTagName()?
e.g. Call the function with:

changeIds(newFields, counter);
...
And the function is:

function changeIds(r, c)
{
var rKids = r.getElementsByTagName('*');
var i = rKids.length;
var rKid;
while (i--){
rKid = rKids[i]
if (rKid.id) rKid.id = rKid.id + c;
if (rKid.name) rKid.name = rKid.name + '[' + c + ']';
}
}

Some older versions of IE don't support '*' so you may need to feature
test and use an alternative.

An alternative recursive function would look something like:

changeIds(newFields, counter);
...
function changeIds(r, c)
{
var rKid, rKids = r.childNodes;
var i = rKids.length;
while (i--){
rKid = rKids[i];
if (rKid.id) rKid.id = rKid.id + c;
if (rKid.name) rKid.name = rKid.name + '[' + c + ']';
if (rKid.childNodes) changeIds(rKid, c);
}
}
Tested in Firefox & IE. If you have any problems, post again.

I am still a javascript beginner so i may be missing something obvious.

Thanks for your time,
Chuck

<script type="text/javascript">
var counter = 0;
function moreFields()
{ counter++;
var newFields = document.getElementById('readroot').cloneNode(true );


changeId(newFields, counter);
}

And you're done.

[...]

--
Rob
Nov 23 '05 #2
RobG wrote:
chuck wrote:
What is the best way to modify the childnodes of the div serials?
Tested in Firefox & IE. If you have any problems, post again.


Thanks Rob!
chuck
Nov 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by ason | last post: by
3 posts views Thread by Q1tum | last post: by
5 posts views Thread by Moses | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.