This is an issue I first ran into several years ago, but I've recently helped two different people who had the same problem and thought it was worthy of blogging.
If you run into a situation where form fields are not getting posted to the server after the DOM has been manipulated, check to make sure the <form/> element is in a valid location. If the <form/> tag resides as a direct child of either a <table/> or <tr/> element, then you will encounter problems posting the form once a child element of the <form/> element has been dynamically modified.
While this behavior does not occur in IE, it does happen in other modern browsers—such as Firefox and some WebKit-based browsers.
Any of the following will break your form post submission:
<table><form><tr> .... </tr></form></table>
<table><tr><form> .... </form></tr></table>
<table><tbody><form> ... </form></tbody></table>
To correct the problem, just place the <form/> tag outside of the <table/> tag:
<form><table><tr> ... </tr></table></form>
This type of markup usually appears on older sites, where I believe the intent of putting the <form/> tag inside the <table/> was to prevent any visual margins from being seen. Obviously, it's easy to remove the margins using CSS and this type of invalid markup can only come back to haunt you.
NOTE: You can do <table><tr><td><form> .... </form></td></tr></table>. That's perfectly valid HTML. You just need to make sure the <form/> tag is placed somewhere were visible text is allowed.
8 Comments
Comments for this entry have been disabled.