Question

我有一些jQuery允许人们根据他们拥有的孩子数量动态添加表单字段。

var childCount = $('.newchildsub').length + 1;

$('.newchildsub:last').after($('.newchildsub:first').clone().removeAttr('id').attr('id', 'child-' + childCount).insertAfter('.newchildsub:last'));

$('#child-' + childCount).find('#childId').remove();
$('#child-' + childCount).find('#gender').attr('name', 'children[child-' + childCount + '][gender]').attr('value', '');
$('#child-' + childCount).find('#month').attr('name', 'children[child-' + childCount + '][month]').attr('value', '');
$('#child-' + childCount).find('#year').attr('name', 'children[child-' + childCount + '][year]').attr('value', '');

代码完全可以添加字段并增加名称，但是当我单击提交和print_r($_POST);时，动态创建的字段不存在。

下面是我的html示例，其中包括动态生成的字段（child-3），它基于jQuery中可以看到的第一个字段。

<div id="child-1" class="newchildsub">
    <h4>Gender: </h4><input type="hidden" id="childId" name="children[child-1][id]" value="394820">
    <select name="children[child-1][gender]" id="gender">
        <option value="">--</option>
        <option value="male" selected>Male</option>
        <option value="female">Female</option>
    </select>

    <h4>Birthday: </h4>
    <select name="children[child-1][month]" id="month">
        <option value="">Month</option>
        <option value="01">January</option>
        <option value="02" selected>February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select name="children[child-1][year]" id="year">
        <option value="">Year</option>
        <option value="2012" selected>2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
    </select><br><br>
</div>

<div id="child-2" class="newchildsub">
    <h4>Gender: </h4>
    <input type="hidden" id="childId" name="children[child-2][id]" value="394821">
    <select name="children[child-2][gender]" id="gender">
        <option value="">--</option>
        <option value="male">Male</option>
        <option value="female" selected>Female</option>
    </select>

    <h4>Birthday: </h4>
    <select name="children[child-2][month]" id="month">
        <option value="">Month</option>
        <option value="01" selected>January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select name="children[child-2][year]" id="year">
        <option value="">Year</option>
        <option value="2012">2012</option>
        <option value="2011" selected>2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
    </select><br><br>
</div>

<div id="child-3" class="newchildsub">
    <h4>Gender: </h4>
    <select id="gender" name="children[child-3][gender]">
        <option value="">--</option>
        <option selected="" value="male">Male</option>
        <option value="female">Female</option>
    </select>

    <h4>Birthday: </h4>
    <select id="month" name="children[child-3][month]">
        <option value="">Month</option>
        <option value="01">January</option>
        <option selected="" value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select id="year" name="children[child-3][year]">
        <option value="">Year</option>
        <option selected="" value="2012">2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
    </select><br><br>
</div>

Answer 1

根据您的代码，您要更改克隆字段的id，而不是name 属性。

name属性必须是唯一的，这就是您没有看到动态添加字段的原因。

Answer 2

将您的name属性添加到jQuery代码中。

Answer 3

您必须管理输入元素的名称。您可以为它们指定唯一的名称，也可以将名称指定为未编入索引的数组，如children[gender][]。 Php将解析它们并通过自动创建索引来视为数组。 This link may help

jQuery动态添加表单字段不会提交

3 个答案: