Dynamic Form Problem

[luca_moller]

I've created a dynamic form, but it is not working in FireFox 3, yet it works with IE. Maybe someone can tell me why and how to fix it. :)Here goes its simplified code:The form in html:<form id="my_form" method="POST" > <select id="condition" name="condition" onchange="show_input()" > <option value="yes">yes</option> <option value="no">no</option> </select> <span id="input_place"></span></form>The javascript function:function show_input(){ if( document.getElementById('condition').value == "yes") { document.getElementById('input_place').innerHTML = "<input id='my_input' type='text' name='my_input' maxlength='10' /> "; } else { document.getElementById('input_place').innerHTML = ""; } alert(document.getElementById('my_form').length);}(in FireFox 3) When I select "yes" in the select box, the new input appears, but the form lenght alerted is still 1... and when i submit the form there is nothing in $_POST["my_input"] ...(in IE) When I select "yes", the new input appears, the form lenght increases to 2 and when i submit the form i can acess $_POST["my_input"] normally.Anyone knows why this is happening? Am I doing something the wrong way? Is there a better way of doing this?Thanks.

[jeffman]

I'm using Firefox 3, and it works perfectly. Maybe there's something else in your document that's messing it up?

[luca_moller]

I'm using Firefox 3, and it works perfectly. Maybe there's something else in your document that's messing it up?

yes, you're right, there must be something strange in my code because the way i wrote here it works! sorry!ill try to find the error.Thanks!

[luca_moller]

ouch! found the problem....i had the form in a table, an the code was like this:<table><tr><td> the head of the table </td> </tr><form><tr><td> form elements here </td> </tr></form></table>If i put it the following way it works fine:<form><table><tr><td> the head of the table </td> </tr><tr><td> form elements here </td> </tr></table></form>I guess we shouldnt use tags between <table>. <tr> and <td> opening tags...Anyway, thx a lot! I spent one hour yesterday with this problem thinking that the way i was putting the innerHTML did not make the browser realize that input was a child of my form... since im new with javascript and DOM i was thinking the problem was there! =D

[jeffman]

Good catch.Some page elements are like that. Tables, lists, and select come to mind. Each one has nested parts, like rows, or options. Content can exist only inside those elements. There is only non-existence between table rows. If you put something there, there are no rules for the way the browser should deal with it. Same with the space between list items and select options. Nothing should go there.