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

Question

编辑：我解决了问题，只需从头开始。抱歉浪费了你们的时间。如果你感觉倾向于关闭，请投票。

我遇到了一个问题，在使用JavaScript添加输入字段时，无法提交表单中的实际数据。字段显示出来，而且位置正确，但是在服务器端执行var_dump（fieldname）时，没有任何显示。使用Live HTTP headers检查后发现，浏览器并没有尝试提交动态添加的表单字段。

我需要如何“附加”我的动态创建的表单输入到表单中？

我的代码：

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]的输入显示为POST值，但使用addFormField()添加的输入不会。它们在HTML中显示在正确的位置，但不会POST。我需要将元素作为子级附加到表单元素才能使其提交吗？

我看过用JavaScript添加的表单输入字段，那里我得到了将数据特定附加到表单子级的想法，但这将需要重新构建我的CSS。所以，我希望在上面的代码中可以做些简单的事情。

提前致谢！

编辑：修正了拼写错误，但仍然不起作用。我决定使用SO链接中讨论的库免费JS方法，因为那个方法很好用。谢谢你的帮助！

- Travis Leleu

---

如果您将HTML附加到表单的命名“fieldset”子级，它是否有效？ - David Thomas

不确定，但我正在努力避免在这个实例上卡住。它将进入一些相当丑陋的HTML。时间已经用完，无法尝试所有好建议，但感谢大家的帮助！关闭问题。 - Travis Leleu

Answer 1

您的代码中有两个错别字： htm应该是html

还有add_fields / add_files

- Olivvv

Answer 2

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

你写成了 $("#add_fields".append( htm );

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

注意缺少的括号。

但我认为你的问题主要在于你尝试通过PHP访问值的方式。我将你的源代码放入一个测试页面中，如果你正确地访问这些值，则它可以正常工作。

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

上述源代码运行良好。

- MagikWorx

Answer 3

当您使用innerHtml添加/追加或将表单字段作为HTML放置时，有时它会将其放置在表单外部，您会将其视为表单的一部分，但实际上不是。

要解决此问题，您需要在输入字段中添加form属性，例如form=myForm，其中myForm应该是您的表单ID。

- Asif Khan

Answer 4

这是你实际的代码吗？

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

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

- amitkaz