jQuery 不会在 .append() 之后发布表单的所有输入

Question

我有一个使用 jQuery 的 .append() 方法动态生成的表单。 我可以添加任意数量的新输入、文本框、cmbbox 等...

但问题是，当我执行表单的 sumbit 时，PHP 目标不会收到添加的新输入，而只会收到连接到输入的变量已经在append()之前的表单中了。

有什么想法吗？

JavaScript：

$("#button").live('click',function add(){
   $("#list").append(
       '<li style="height:20px;">'
    +'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+ 
       '</li>'
   );
});

HTML：

<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
   <ul style="width:670px;padding:0px 0px 30px 0px" id="list">
   </ul>
   <input type="submit" id="submit" value="Submit">
</form>

PHP：

<?php
  print_r($_POST);
?>

Answer 1

问题 1：

您的 #button 不应该是 submit 类型，因为您只想使用它添加到表单而不是提交形式。所以你应该有：

<input type="button" id="button" value="Add input">

问题2：

你正在覆盖你的变量。 name 是随表单发送的变量，因此每个input 添加都必须有一个新名称，或者变量必须是一个数组。

此外，不能有多个元素具有相同的 id。

解决此问题的最简单方法是使用 prova[] 形式将 prova 设为数组：

$("#button").live('click',function() {
   $("#list").append(
       '<li style="height:20px;">' +
         // Removed repetitive ID and made prova an array
       '<input type="text" class="text" name="prova[]" value="prova"></li>'
   ); 
});

jsFiddle 示例

Answer 2

您正在拦截 click 事件并向表单添加元素，但该事件已经启动，并将完成其默认操作（提交表单），而无需重新检查表单内容。

您应该在添加字段后停止事件（preventDefault 应该是正确的选择），然后重新提交表单。

沿着这些思路：

$('#button').live('click', function add(event){
    event.preventDefault();
    $('#list').append(...);
    $('#form').submit();
});

我还没有测试过它，但我非常有信心它应该有效:)

Answer 3

只是为了澄清，并把任何其他问题放在一边，@Claudio 的注释是这里的正确答案。我刚刚遇到了同样的问题，按钮类型是“按钮”，并且新元素的名称正在动态递增。一切看起来都很好，但添加的元素不会提交。

然后我注意到我的表单标签位于表格标签内。我把它们搬到外面，一切都按计划进行。

Answer 4

有任何代码可以显示吗？为了让 php 能够“看到”提交的变量，您必须确保它具有在表单元素上指定的“name”属性。我感觉你的问题是 jQuery 而不是 php。

Answer 5

最佳猜测：您尚未为动态添加的元素设置名称属性。