我們編寫網頁表單時，有時會需要設計一些動態數目的輸入項，在這些情況中，我們通常會使用 jQuery/js 來動態增加輸入框到表單中。可是，今天我卻遇到一個問題，就是用 JS 加入的輸入框的值並沒有送到伺服器端，起初我以為是 JS 的設定錯了，但最終找到原因原來是和 html 的結構有關

以下是 html

<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(''); });
});

令新加的輸入框無法傳送出去的原因是 table 和 form 的次序, 上例中我是把 form 放在 table 的入面, 這樣的情況便會導致提交時表單無法取得新加的輸入框的值, 因為從正確 html 層面上來說, table 中間的內容應該是寫在 td 或 th 中的, 而上例則不規則地在 table 和 td 中間插入 form, 所以便出了錯誤, 解決方法很簡單, 只需將 form 和 table 的次序調轉, 用 form 包住 table 便可以了:

	

		

			

				

					Title