Skip to content

Dynamically added fields using ajax do not get posted on form submission (FORM inside TABLE)

January 11, 2011

This is a problem which is actually not a problem if we are following right semantics of HTML.

Problem: I faced this problem where in after a page is loaded I have to add certain input html elements in the form (which I had inside a table) using ajax. Only the elements that were loaded when the page rendered were getting posted, but not the ones added using ajax after the page was loaded. This can be frustrating to figure out why the elements which were loaded by default are getting posted but the elements which rendered after wards using AJAX are not.

My Theory: When a DOM is loaded, the input elements, which are rendered inside TABLE cells get hooked to the FORM automatically because they are rendered when the DOM got loaded. And when the form is posted, its not the table, but the input elements which are hooked to the form get posted. Now, if you are rendering some elements through ajax, then those elements get hooked up only to the TABLE (in case the FORM is inside the TABLE) and not to the form.

Solution: Shift the TABLE inside the FORM. So, that when you add more elements dynamically, it gets hooked to the form as well.

FORM
TABLE — WORKS

TABLE
FORM — NOT GOOD

Advertisements
25 Comments leave one →
  1. Jeff permalink
    February 9, 2011 10:20 pm

    I’ve seen explanations to this problem here and there, but yours is getting to a nitty-gritty. No unnecessary beatin’ around the bush … so to speak.
    Good job.

    • Sanjeev Mishra permalink*
      February 11, 2011 5:56 am

      thanks jeff. Happy to have clarified the problem in a simpler way ๐Ÿ™‚

  2. February 22, 2011 4:17 pm

    Great job – was trying to find a solution to this. Thanks. How did you stumble across it? I can’t find it documented anywhere.
    Rich

    • Sanjeev Mishra permalink*
      March 17, 2011 6:27 am

      Not sure exactly where.. but when I faced this problem, I also googled and found something similar explained somewhere.. but it wasn’t that straight forward explanation.. so thought, I will put it in my words…

  3. March 16, 2011 4:08 pm

    yes it works perfect.

  4. Simon permalink
    May 19, 2011 8:05 pm

    Wow… I just spent DAYS trying to find the solution to this problem and all I ever found were different ways to re-bind my function calls, which, yes, I needed to do, but that didn’t address THIS problem, even though the symptoms were similar. The fact that my form wouldn’t even *begin* to submit was driving me mad!

    So, please accept my deepest thanks for posting this. Now I can finally get back to work! ^_^

  5. Charlie permalink
    July 6, 2011 2:20 pm

    Like others posting here, I struggled with this issue and drove myself nearly crazy going over and over my code looking for the mistake. I searched and searched on Google for an answer as well, and finally found this page.

    Thank you so much for sharing this!!

  6. Jorge Wander Santana Urena permalink
    August 8, 2011 4:37 pm

    Hi!, i was looking for this many times, and thx for you it seems to work for many people…. but i havent got it at all :/

    can you explain it a litter more pls

    thx.

    I tried the next:

    i have a table inside my form that is empty. With ajax, i bring the new fields to add them inside the table, but when i try to submit, these fields doesn’t post… ๐Ÿ˜ฆ

    • Jorge Wander Santana Urena permalink
      August 8, 2011 6:08 pm

      EUREKA! xD , thx a lot, i got it ๐Ÿ™‚

  7. October 13, 2011 3:18 am

    Oh my god, thank you so much!!!!!!! You saved me from insanity!!!

  8. January 8, 2012 7:08 am

    thank u very much for simple explanation. i was using relcopy jquery plugin to clone a bunch of form fields. But then those newly added dynamic fields were not getting added to php POST array. I surrounded the Form tag to the entire main div and it fixed the issue.

  9. February 28, 2012 10:51 am

    Good job, thank you.

  10. Erik Verhoef permalink
    March 17, 2012 11:20 pm

    This just saved me. Been working for hours now on this problem, and such a small change in the code made the difference for me! Thank you!!

  11. June 13, 2012 10:57 am

    thank U Sanjeev:)

  12. August 20, 2012 8:06 pm

    Man! You did awesome! Thank U so much. As the other guys said, I’ve benn trying to fix this problem for hours too and now this single change worked very well!

    Thanks dude, from Brazil!

  13. Jithin TC permalink
    September 5, 2012 7:25 pm

    Perfect .. Thank You Man.. That was a great help..

  14. September 6, 2012 11:38 am

    Useful post. Thanks ๐Ÿ™‚

  15. harishankr permalink
    February 23, 2013 7:00 am

    Thank you very much. Was of instant help to me

  16. March 3, 2013 7:09 pm

    So helpful. Thank you.

  17. meen permalink
    March 26, 2014 12:30 pm

    it was really helpful

  18. Modasser Hossain permalink
    October 13, 2014 4:14 pm

    I was totally puzzled with this problem. After I got this solution from you, I solved my problem in no time. Thanks a lot.

  19. fgdfg permalink
    May 27, 2016 10:30 am

    good

  20. beginner_ajax permalink
    May 28, 2016 8:11 pm

    it doesn’t work in my application.
    my ajax function just working only one function, another thing is not.
    most of my ajax function dynamically append the table tag.
    And the nice working ajax function also append the tag and the tags are wrapped tag like your recommendation.
    So, i try to this solution. but they are not working.
    just using tag like this

    head

    please help me

  21. beginner_ajax permalink
    May 28, 2016 8:23 pm

    Oh, i can’t find my comment..

    i have crazy problem about ajax dynamically add table tags.
    your solution doesn’t work in my application
    I have many ajax function and they are normally working in my local.
    So, i deployed this application to remote server. But, only the part of ajax function doesn’t work.
    most of my ajax function append the tag. and the most weird thing is only one ajax function is working. they also append the tag but the nice function is only wrapped tag. like your recommendation

    so i tried to tag to another function like this

    hi

    but it doesn’t work..
    please help me

Trackbacks

  1. AJAX dynamic form input fields submission no POST data

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: