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

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

但问题是，当我对表单进行求和时，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);
?>

最佳答案

问题 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 example

关于javascript - jQuery 不会在 .append() 之后发布表单的所有输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3847492/