Jump to content

Dynamic Form Problem


luca_moller
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...