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