Question

我正在尝试提交一个表单，其中包含在页面完成加载后由jQ添加到DOM的动态元素。

当我在表单上运行serialize（）时，它会抓取硬编码到页面中的所有字段的数据 - 而不是动态字段。

以下是一些相同的代码片段。

HTML

<form id="someform" name="someform" method="post" action"">
    <input type="text" name="afield" />
 <ul id="somelist">
 </ul>
 <input type="submit" name="submit" />
</form>

<img id="add" src="add-button.png" />

<div class="new_unit" style="display:none">
 <input type="text" name="somefield" />
</div>

JavaScript

<script type="text/javascript">
// Adds a new field to the form
$( '#add' ).click( function() {
 $( '#somelist' ).append( '<li>' + $( '.new_unit' ).html() + '</li>' );
});

// Validate before submission
$( '#someform' ).validate({
 .......,
 .....,
 submitHandler: submit_form
});

function submit_form() {
 _data = $( '#someform' ).serialize();
 alert( _data );
}
</script>

点击提交按钮后，静态字段 afield 中的数据显示...但是jQuery添加的任何 somefields 都没有。

我在这里发现了几个similar questions。我遵守建议的解决方案但没有效果。

我正在使用最新的jQuery（1.4.1） - 并考虑过使用live（）事件绑定器。我有一种感觉可能有助于解决这个问题，但无法弄清楚如何将它与validate（）插件结合使用。

有什么建议吗？

谢谢，米^ E

Answer 1

问题是您动态添加的字段都是相同的。您要么必须给它们不同的名称，要么根据您在服务器上使用的名称，给它们一个像somefield[]这样的名称来聚合它们（PHP和我相信Python会对此进行处理）。

为了给他们一个不同的名字，这可能会稍微容易一点：

<input type="text" id="copy" />

和

$("#add").click(function() {
  $("#copy").clone().removeAttr("id").attr("name", "field[]")
    .appendTo("#somelist").wrap("<li>")
});

jQuery：提交动态表单元素时出现问题

1 个答案: