I am developing a Popup framework which will use AJAX type server interactions to update a wizard that will be running in a popup window. (I know... popups... but it's an internal app and they know)

There is a main Popup page (well formed xhtml) that is updated with a page fragment (more well formed xhtml) that contains a few context appropriate fields which are inserted into a named <div> in the main popup <form>. This all works, it displays as expected and it looks great. The problem is... although the fields "show up" and they get displayed just like I want them to, they don't seem to really exist in the DOM - they are not found in the form.elements collection. Only the fields which exist in the original main popup page are found. The exact same behavior occurs in IE (window.showModalDialog) and FF (window.open), and no errors are shown in the FF JavaScript Console.


This is how I insert the page fragement:

var responseXml = req.responseText;
var div = document.getElementById(divName);
div.innerHTML = responseXml;

As there are no apparent errors, I'm not sure what other code would be relevant to post... This is baffling me!

I just found this site today, looks like a great resource!
Mike B

To add items into the form collection you have to add them directly into the form element, simply adding them into a div that is inside a form doesn't mean they will exist in the form as well. The form elements need to be added as a child element (appendChild method) to the form.

Take a look at http://www.quirksmode.org/dom/domform.html to see how it is done with DOM scripting, you'll notice their script inserts the items before an empty <span> which is a child of the form so makes the added items a child element of the form also.

i think to add items into a form you can do that only by adding them to a form or a table n the form.but not to a div.

Chris,

That was the right clue I needed... stumbled through the usual IE/Mozilla incompatibilities and now it's working great.

Thanks!
Mike