表单只发布第一个动态生成的输入

Question

I have a form which have three different input elements. Each element child element is created by jquery dynamically. My problem is, when I try to submit my form (in php) it post only first dynamic input value second and third dynamic input values are not posting.

<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>

jquery code:

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

php code

print_r $_POST['first'];
print_r $_POST['second'];
print_r $_POST['third'];

If I add two-two dynamic element in every field then the result may like this array([0]=>,[1]=>,[2]=>) but this show for first element second and third element result is array([0]=>)

Answer 1

You have a few problems in the code you posted. Think about the following code you wrote :

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

});

You took $("#first") in btn1 . So next it should be btn1.click(function(e){ instead of $(btn1).click(function(e){ . Same thing applies for $(".warp1") ;

Some problems in HTML were also there. The value attributes were not properly enclosed with commas.

JS:

 $(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);

        });

        });

HTML and PHP together in same page:

<?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>

I added the form which you did not include in OP. The form with empty value for action attribute submits to the same page. You can however use a value ie action="somepage.php" to submit to a different page.