Problem with dynamically changing form in Firefox using innerHTML

[pjdeklerk]

I have a web page which has javascript which uses the innerHTML property of a <TD> object to replace that table cell's contents. The contents are of the form

<span><select><option1.../><option2..>...</select></span> 

(in engish, the <td> contains a <span> which contains a <select> which contains some number of <option>s.

It works fine in IE. In Firefox it displays fine but when I submit the form the name and value for the select tag are missing from the request that is sent to the server. Another symptom is that in Firefox the DOM object for select is missing from document.forms[0].elements[] array

The reason I am using innerHTML rather than using the DOM methods to manipulate the options in the select is that the list of options is computed by a JSP tag on the server-side (and accessed via Ajax).

Does anyone know if there is a way get Firefox to create the <select> properly when it is created by setting the innerHTML on a <td>?

[acoder]

Welcome to TSDN!

Can you show a real example of a select HTML snippet that is returned by the JSP?

[pbmods]

Heya, pjdeklerk.

Please use CODE tags when posting source code:

[CODE=html]
HTML code goes here.
[/CODE]

[drhowarddrfine]

I don't know if this would affect it but <span> is an inline element being wrapped around <select> which is block-level. Whether that confuses things in the tree at that point, I don't know.

[pbmods]

Heya, pjdeklerk.

What's the JavaScript look like that generates the options for the select element?

[Solution]

I had this exact same problem.

Possible solution:

Make sure your <form> tags are outside of your <table> tags. IE doesn't care, but Firefox gets mad when the form is rooted inside a table or td.

(sounds too simple to be true, but it worked for me!)

Good luck!