Dynamically added fields using ajax do not get posted on form submission (FORM inside TABLE)
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
Sanjeev Mishra's Blog 
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.
thanks jeff. Happy to have clarified the problem in a simpler way 🙂
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
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…
yes it works perfect.
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! ^_^
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!!
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… 😦
EUREKA! xD , thx a lot, i got it 🙂
Oh my god, thank you so much!!!!!!! You saved me from insanity!!!
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.
Good job, thank you.
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!!
thank U Sanjeev:)
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!
Perfect .. Thank You Man.. That was a great help..
Useful post. Thanks 🙂
Thank you very much. Was of instant help to me
So helpful. Thank you.
it was really helpful
I was totally puzzled with this problem. After I got this solution from you, I solved my problem in no time. Thanks a lot.
good
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
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