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

Cla*_*dio 10 javascript jquery form-submit

我有一个使用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>'
   );
});
Run Code Online (Sandbox Code Playgroud)


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>
Run Code Online (Sandbox Code Playgroud)


PHP:

<?php
  print_r($_POST);
?>
Run Code Online (Sandbox Code Playgroud)

Pet*_*tai 5

问题1:

#button不应该是 type submit,因为您只想使用它来添加到表单而不是提交表单。所以你应该有:

<input type="button" id="button" value="Add input">
Run Code Online (Sandbox Code Playgroud)


问题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>'
   ); 
});
Run Code Online (Sandbox Code Playgroud)

jsFiddle 示例

  • 同样的问题,就像 DOM 没有看到新项目并且提交没有发送这些变量一样。 (2认同)