After DOM manipulation, form fields won't post...

Posted by Dan on Jun 30, 2008 @ 4:36 PM

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.
Categories: HTML/ColdFusion


  • jon martin solaas's Gravatar
    jon martin solaas
    Thx a bunch, after googling and struggling for nearly two days I came across this post and instantly my problem was resolved. Never occurred to me that the elements were structured crappy.
  • @Jon:

    Glad this post helped. Thank goodness Google works fast! It's weird that I've run into several people lately who've run into this problem. I suspect it's just that more an more developers are trying to add functionality to old legacy pages.
  • jon martin solaas's Gravatar
    jon martin solaas
    Well, I expected I had a pretty common problem, and I was just amazed nothing turned up on google, until your post did ... well, anyway, now Struts isn't happy to eat the new fields. I use indexed fields corresponding to an ArrayList in the DynaForm bean, and the post looks like this:

    keywordsUnpaid[0].keywordUnpaid    fish
    keywordsUnpaid[1].keywordUnpaid    bird

    Fish was the initial value of the indexed fields, and bird has been added.

    I get

    Message: BeanUtils.populate
    javax.servlet.ServletException: BeanUtils.populate
        at org.apache.struts.util.RequestUtils.populate(

    As long as I don't add fields everything works just fine. I can work around it by just putting the new values comma separated in a hidden field, but it'd be nice to get it working as initially intended. Well, anyway ... that's for tomorrow ...

    Regards to Nikki and Maddie, I have a 14 year old labrador - Bamse - and he's still going strong ... :-)
  • Thanks for this post. I ran into this problem, except that my form tag wasn't inside a table. I moved both tags outside of some DIVs they were nested in, and it worked instantly. Strange behavior, but thanks nonetheless!
  • @Alex:

    It wouldn't suprise me if you had the tags in an invalid order, like


    I've seen that cause problems to. The markup should be in a valid order:


    That might not have been the case, but it wouldn't surprise me if it was the root problem.
  • omg i was going nuts on this issue and indeed just some bad markup caused the issue
  • Thank god I found this post! After two days of not knowing why my data wasn't sent I was almost going crazy. With the information you provided here it was really easy to solve the problem.
  • Sooooooo glad you shared this info. Was going nuts for a week with this issue!!!

Comments for this entry have been disabled.