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.
TABLE — WORKS
FORM — NOT GOOD