[thelist] DOM Javascript - childNodes

[Mark Howells]

>> I'm coding a function to join several HTML forms together on a page 
>> and submit them as one, using DOM Javascript.  I parse through the 
>> childNodes of the main forms, then copy the lot into a new form and 
>> submit it.
>
> Why not move them? It's as simple as appending them to the new form, 
> they will be automatically removed from their original position.

The problem I'm having isn't creating the new form, that's working fine 
and I don't want to change or delete the source forms.  The problem is 
that I want to ensure that the target form is empty before I start 
copying elements over.  I need to do this to ensure that I don't end up 
with multiple fields with the same name, if the copy function is run 
more than once before the form is submitted.

>> I am new to DOM JS code and stuck at the point where I want to delete 
>> all the dynamic form elements.  I see that I can ditch the whole form 
>> and all children using obj.removeChild(true), but only want to ditch 
>> the children, not the form itself.  Do I have to loop through the 
>> child elements and delete them one by one, or am I missing something? 
>> What's the most efficient solution?
>
> Remember, childNodes is all types of nodes, not only elements...
> You'd have to loop through it and remove all nodes of a type you want 
> to remove. A perhaps better approach is to replace the form element 
> with a shallow clone of itself, as that provided by 
> oFormElement.cloneNode(false)

form1
form2
form3
mainform

If I clone a form, then I will have two copies of this form, correct?  
(OK, I realize that I can rename the new form using the name 
attribute.)  I need mainform to be a product of form1, form2 and form3: 
wouldn't cloning the existing forms simply give me duplicates of all 
these forms, rather than a single new form with all the elements of the 
other three?

Regards
Mark Howells
http://www.mark.ac/