On developing a submition form, we will sometimes need a variable number of input for some options. In the case we usaully use jquery/js to dynamically add input fields to the form. However, today I face on a problem that the jquery added input does not post to the server side. Finally, I find the reason is related to the strcture of the html.

the html of my code

<table id="table">
	<form>
	<thead>
		<tr>
			<th>Title</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" name="dynamic[]"></td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<td><input type="button" id="addmore"></td>
		</tr>
	</tfoot>
	</form>
</table>

JS:

$(document).ready(function() {
	$("#addmore").click(function() { $("tbody",$("#table")).append(''); });
});

The reason cost the problem is the order of form and table. In the case, I have put the form inside the table which will make the added input not catch by the form, simply change to the following and the problem solve:

	

		

			

				

					Title