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

时间:2018-02-24 12:09:26

标签: javascript jquery

我有一个有三种不同输入元素的表单。每个元素子元素都是由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>

jquery代码:

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

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

如果我在每个字段中添加两个动态元素,那么结果可能会像array([0]=>,[1]=>,[2]=>)一样,但是第一个元素第二个和第三个元素结果的显示是array([0]=>)

1 个答案:

答案 0 :(得分:0)

您发布的代码中存在一些问题。 想想你写的以下代码:

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

});

您在$("#first")中取了btn1。接下来应该是btn1.click(function(e){而不是$(btn1).click(function(e){。同样适用于$(".warp1");

HTML中也存在一些问题。 value属性没有用逗号括起来。

<强> 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和PHP在同一页面中:

<?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中的formaction属性的空值表单提交到同一页面。但是,您可以使用值action="somepage.php"提交到其他页面。

相关问题