动态文本字段不能取值jquery php

时间:2014-09-26 09:52:10

标签: javascript php jquery html

我正在尝试动态添加/删除项目,但我无法获取数组中所有元素的值。

基本上我有这个表格

<form action="" method="post">
    <div class="input_fields_wrap">
        <div>
            <label> <span>Team name </span> 
            <input type="text" class="input-field" name="teams[]"> </label>
        </div>
    </div>
    <span id="num_teams"></span> <label><span>&nbsp;</span>
    <input type="submit" value="Add Team" class="add_field_button" name="add_field_button">
    <input type="submit" name="next" value="Next" />
    </label> 
</form>

它只显示一个输入框,我必须插入团队名称和两个按钮;一个用于转到下一页,另一个用于使用jquery添加新文本字段。 这是jquery脚本

<script type="text/javascript">
$(document).ready(function() {



    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
    e.preventDefault();
var max_fields = $('#n_teams').val(); //maximum input boxes allowed
    if(x < max_fields){ //max input box allowed
        x++; //text box increment

        $(wrapper).append('<div><label><span>Team Name </span><input type="text" class="input-field" name="teams[]">  <a href="#" class="remove_field">Delete</a></label></div>'); // add input box
        $("#num_teams").html('Number of Teams: '+x);

    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('label').remove(); x--;
    $("#num_teams").html('Number of Teams: '+x);
})
});
</script>

上述脚本运行正常:它添加和删除文本字段。

我现在遇到的问题是我无法获取数组'teams []'的值。 在一个

if(isset($_POST['next'])) 

即使我尝试手动获取值,如

echo $_POST["teams"][0]; and 
echo $_POST["teams"][1]; ect...

它只取第一个值(即我不使用jquery添加的值)。它没有“看到”添加的jquery文本字段。

当然我的最终目标是在mysql表中插入'teams []',但是现在我注意到我不能接受这些值。

我哪里错了?

编辑 - 已解决 这是我在html代码中犯的一个非常愚蠢的错误。实际上<div>之前<form>引起了所有麻烦。经过非常精确的分析,单独尝试每一段代码,我终于得到了我只需将<form>移到两个<div>以上以使代码工作。 我向所有人道歉,愚蠢的我!

2 个答案:

答案 0 :(得分:0)

不使用name="teams[]"使用name="teams"而是在服务器端使用:

$_POST['teams']

它应该以逗号分隔列表。

答案 1 :(得分:0)

var wrapper = $(&#34; .input_fields_wrap&#34;)。first();