Javascript 仅表单过帐第一个动态生成的输入

我有一个表单，它有三个不同的输入元素。每个元素子元素都是由jquery动态创建的。 我的问题是，当我尝试提交表单（用php）时，它只发布第一个动态输入值，第二个和第三个动态输入值没有发布

<input type="text" name="first[]"><input type="button" id="first" value="first>
<div class="warp1></div>
<input type="text" name="second[]"><input type="button" id="second" value="second>
<div class="warp2></div>
<input type="text" name="third[]"><input type="button" id="third" value="third>
<div class="warp3></div>

---

如果我在每个字段中添加两个动态元素，那么结果可能如下所示

数组（[0]=>，[1]=>，[2]=>）

，但这显示第一个元素第二个和第三个元素的结果是

数组（[0]=>）

您发布的代码中有一些问题。 考虑一下您编写的以下代码：

var btn1   = $("#first"); 
 $(btn1).click(function(e){ 
 //......

});

您在

btn1

中使用了

$（“#第一”）

。所以接下来应该是

btn1。单击（函数（e）{

而不是

$（btn1）。单击（函数（e）{

。同样的事情也适用于

$（“.warp1”）

HTML中也存在一些问题。

value

属性没有正确地用逗号括起来

JS:

var wrap1  = $(".wrap1");
var btn1   = $("#first"); 
 $(btn1).click(function(e){ 
    e.preventDefault();
 var appendText='<input type="text" name="first[]" />';
        $(wrap1).append(appendText); 

});

similar for other button

 $(document).ready(function () {

            var warp1  = $(".warp1");
            var btn1   = $("#first");
            btn1.click(function(e){
                e.preventDefault();
                var appendText='<input type="text" name="first[]" />';
                warp1.append(appendText);

            });



            var warp2  = $(".warp2");
            var btn2   = $("#second");
            btn2.click(function(e){
                e.preventDefault();
                var appendText='<input type="text" name="second[]" />';
                warp2.append(appendText);

            });

            var warp3  = $(".warp3");
            var btn3   = $("#third");
            btn3.click(function(e){
                e.preventDefault();
                var appendText='<input type="text" name="third[]" />';
                warp3.append(appendText);

        });

        });

<?php

if(isset($_POST['submit'])){


print_r ($_POST['first']);

echo "<br/>";
print_r ($_POST['second']);

echo "<br/>";
print_r ($_POST['third']);

}

?>
<form action="" method="post">

<input type="text" name="first[]"><input type="button" id="first" value="first" />
<div class="warp1"></div>
<input type="text" name="second[]"><input type="button" id="second" value="second" />
<div class="warp2"></div>
<input type="text" name="third[]"><input type="button" id="third" value="third" />
<div class="warp3"></div>

<input type="submit" value="Submit" name="submit" />
</form>

$（文档）.ready（函数（）{
var warp1=$（“.warp1”）；
风险值btn1=$（“第一”）；
btn1.点击（功能（e）{
e、 预防默认值（）；
var appendText=''；
warp1.追加（追加文本）；
});
var warp2=$（“.warp2”）；
风险值btn2=$（“第二”）；
btn2.点击（功能（e）{
e、 预防默认值（）；
var appendText=''；
2.追加（追加文本）；
});
var warp3=$（“.warp3”）；
风险值btn3=$（“第三”）；
btn3.点击（功能（e）{
e、 预防默认值（）；
var appendText=''；
3.追加（追加文本）；
});
});

HTML和PHP一起出现在同一页面中：

var wrap1  = $(".wrap1");
var btn1   = $("#first"); 
 $(btn1).click(function(e){ 
    e.preventDefault();
 var appendText='<input type="text" name="first[]" />';
        $(wrap1).append(appendText); 

});

similar for other button

 $(document).ready(function () {

            var warp1  = $(".warp1");
            var btn1   = $("#first");
            btn1.click(function(e){
                e.preventDefault();
                var appendText='<input type="text" name="first[]" />';
                warp1.append(appendText);

            });



            var warp2  = $(".warp2");
            var btn2   = $("#second");
            btn2.click(function(e){
                e.preventDefault();
                var appendText='<input type="text" name="second[]" />';
                warp2.append(appendText);

            });

            var warp3  = $(".warp3");
            var btn3   = $("#third");
            btn3.click(function(e){
                e.preventDefault();
                var appendText='<input type="text" name="third[]" />';
                warp3.append(appendText);

        });

        });

<?php

if(isset($_POST['submit'])){


print_r ($_POST['first']);

echo "<br/>";
print_r ($_POST['second']);

echo "<br/>";
print_r ($_POST['third']);

}

?>
<form action="" method="post">

<input type="text" name="first[]"><input type="button" id="first" value="first" />
<div class="warp1"></div>
<input type="text" name="second[]"><input type="button" id="second" value="second" />
<div class="warp2"></div>
<input type="text" name="third[]"><input type="button" id="third" value="third" />
<div class="warp3"></div>

<input type="submit" value="Submit" name="submit" />
</form>

---

我添加了未包含在OP中的

表单

。

action

属性值为空的表单提交到同一页面。但是，您可以使用值，即

action=“somepage.php”

提交到其他页面。

您在此处拼写错误的变量：

$（warp1）。append（appendText）

首先，有一个输入错误：`$（warp1）.append（appendText）；`应该是`$（wrap1）.append（appendText）；`在发布问题时输入错误，否则它会起作用。请告诉我如何发布动态内容的数据