使用javascript动态添加表单元素 - 不提交

Question

编辑:我通过从头开始修复问题.很抱歉浪费你们所有的时间.如果你有这种倾向,请投票结束.

当通过javascript添加输入字段时,我无法在表单中获取实际数据.这些字段显示在正确的位置,但是当我在服务器端执行var_dump(fieldname)时,没有任何内容出现.使用Live HTTP标头检查告诉我浏览器没有尝试提交动态添加的表单字段.

我是否需要以某种方式将动态创建的表单输入"附加"到表单中？

我的代码:

HTML

<form id="att_form" method="post" name="add_attachments" enctype="multipart/form-data" action="#">
<-- below input to prove form submits, just not the dyn added elements -->
<input name="data[one]" type="text" />
<div id="add_fields"></div>
<input type="submit" />
</form>

使用Javascript

function addFormField()
{
 var id = 1;
 var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";
 $("#add_fields".append( htm );
}

当我提交表单时,我的输入名为data [one]显示为POSTd值,但添加addFormField()的输入不显示.它们在HTML中显示在正确的位置,但不要POST.我是否需要将元素作为子元素附加到我的表单元素以使其提交？

我已经看到使用javascript添加提交表单输入字段,这是我想要将数据专门附加到表单子项的地方,但这需要对我的CSS进行一些重组.所以,我希望我能在上面的代码中做到这一点很简单.

提前致谢!

编辑:修正了错别字,但仍无法正常工作.我决定使用上面SO链接中讨论的库免费JS方法,因为它工作正常.谢谢你的帮助!

Answer 1

您的代码中有很多拼写错误。例如，您没有关闭 jquery 的选择器标签。

你把 $("#add_fields".append( htm );

本来应该 $("#add_fields").append( htm );

注意缺少的括号。

但我相信你的问题主要在于你如何尝试通过 PHP 访问这些值。我只是将您的源代码放入测试页中，如果您正确访问这些值，一切都会正常。

<?php
foreach ($_REQUEST['txt'] as $printme) 
    echo $printme."<br/>";
?>

上面的源码工作正常。