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 worth blogging.

If you ever run into a situation where form fields step getting posted to the server after you've done some DOM manipulation, check to make sure your <form/> tag is in a valid location. If the <form/> tag resides as a direct child of either a <table/> or <tr/> tag, then you're going to have problems when the form once you've modified a child element of the <form/> tag.

This behavior does not occur in IE, but it happens in Firefox and several other browsers (I believe Safari exhibits the same behavior.)

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>

I've usually only seen this type of markup on older sites, where I believe the intent of putting the <form/> tag inside the <table/> was to prevent any margins from being inserted into the document. However, this is invalid markup and will 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.

Add Comment

Name:

Email Address:

Website:

Comments:

Enter text that you see in the image:

Remember My Information
Subscribe

If you subscribe, any new posts to this thread will be sent to your email address.