使用javascript动态添加表单元素——不提交答案

【问题标题】：Add form element dynamically using javascript -- not submitting使用javascript动态添加表单元素——不提交
【发布时间】：2009-09-06 17:43:33
【问题描述】：

编辑：我从头开始解决了这个问题。很抱歉浪费大家的时间。如果您愿意，请投票关闭。

当通过 javascript 添加输入字段时，我无法在表单中获取要提交的实际数据。字段显示在正确的位置，但是当我在服务器端执行 var_dump(fieldname) 时，什么都没有显示。检查实时 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 中的正确位置，但不发布。我是否需要将该元素作为子元素附加到我的表单元素才能提交？

我已经看到Submit form input fields added with javascript，这是我想到将数据专门附加到表单子表单的地方，但这需要对我的 CSS 进行一些重组。所以，我希望我可以在上面的代码中做一些简单的事情。

提前致谢！

编辑：修正了错别字，但仍然无法正常工作。我决定使用上面 SO 链接中讨论的库免费 JS 方法，因为它工作正常。不过感谢您的帮助！

【问题讨论】：

如果您将 html 附加到表单的命名-fieldset-child 上，它是否有效？
不确定，但我尽量不卡在这个实例上。它会进入一些非常丑陋的html。没有时间尝试所有很棒的建议，但感谢大家的帮助！关闭问题。

标签： php javascript jquery html

【解决方案1】：

您的代码中有 2 个拼写错误： htm 而不是 html

和 add_fields / add_files

【讨论】：

【解决方案2】：

您的代码中有很多错别字。例如，您没有关闭 jquery 的选择器标记。

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

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

注意缺少的括号。

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

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

上述来源工作正常。

【讨论】：

【解决方案3】：

当您添加/附加或使用innerHtml 将表单字段放置为html 时，有时它会将其放置在表单之外，您会将其视为表单的一部分，但在内部它不是。

要解决此问题，您需要添加form 属性和form=myForm 之类的输入字段，myForm 应该是您的表单ID。

【讨论】：

【解决方案4】：

那是你的实际代码吗？

如果是这样，你没有关闭输入标签和p标签..所以表单可能会忽略它们..

var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";

【讨论】：