Jquery +表单中的动态附加行

时间:2009-06-01 15:42:52

标签: jquery forms

我正在创建一个表单,该表单在输入任何内容时动态地将输入表单字段的数据插入到数据库中。我现在正致力于向表单添加动态行(即,如果用户需要添加额外信息,则复制现有行)。我遇到了两个问题。

我正在使用的代码基于以下内容:

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

问题1:原始行(插入下一行之前)工作正常,但我似乎无法弄清楚为什么新行甚至没有尝试使用输入模糊功能通过$ .post发送数据。是因为所有的名称都是相同的,或者是因为实际的$ .post代码是在文档准备好的情况下加载的,并且忽略了这一点,因为表单字段出现在点击事件之后?

问题2:要从新添加的行中插入数据,我是否需要使用jquery.each来遍历表单字段如果它们具有相同的名称/ ID?

好吧,任何建议在这一点上都会很好 - 它的头脑刮擦时间!

1 个答案:

答案 0 :(得分:2)

不要使用相同的ID和名称,您将朝着正确的方向前进。使用相同ID的HTML无效。

此外,当您转到发布数据(无论是使用jQuery.serialize())还是仅发布标准POST时,处理信息会更容易。

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

从查看代码:您可以使用DOM来引用您想要删除的字段。希望这消除了您对ID的需求。

这看起来像:

function addFormField(index) {
$("#divTxt").append("<div ><input name='name"+index+"' type='text' size='20'><a href='#' onClick='$(this.parentNode).remove()'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}