2010-09-30 42 views
5

如何序列化動態表單輸入?如何在動態表單元素中使用jQuery的.serialize函數

<table id="mytable"> 
<form id="myform"> 
<tbody> 
    <tr><td><input type="text" name="row0"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row1"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row2"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row3"></td></tr> <!-- dynamically generated --> 
</tbody> 
<tfoot> 
    <tr><td><input type="button" id="save" value="SAVE"></td></tr> <!-- static --> 
</tfoot> 
</form> 
</table> 

我想使用jQuery從PHP

$('#save').click(function(){ 
    $.ajax({ 
    type: "POST", 
    url: "post.php", 
    data: $('#myform').serialize(), 
    success: function(msg){ 
     console.log(msg); 
    } 
    }); 
}); 

加載信息這工作沒有問題,如果沒有動態生成行,但我無法弄清楚如何訪問或序列化動態內容。

回答

11

序列化的動態內容,工作正常,你把它(因爲你在click處理程序做,而不是負載)的方式......但你需要有一個有效的<form>元素<table>纏,就像這樣:

<form id="myform"> 
<table id="mytable"> 
<tbody> 
    <tr><td><input type="text" name="row0"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row1"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row2"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row3"></td></tr> <!-- dynamically generated --> 
</tbody> 
<tfoot> 
    <tr><td><input type="button" id="save" value="SAVE"></td></tr> <!-- static --> 
</tfoot> 
</table> 
</form> 

You can test it out here

+0

當它沒有動態生成時,它正在採摘它。我想知道爲什麼它在動態時有問題。 – polyhedron 2010-09-30 21:06:43

+1

雖然修復了它。 – polyhedron 2010-09-30 21:07:09

+0

@polyhedron - 使用無效標記的東西是不可編輯的...它可能已經將表單與DOM中的元素放在了不同的位置。 – 2010-09-30 21:12:26

相關問題