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>