从字段动态添加的jQuery不会提交


jQuery dynamiclly added from field wont submit

我有一些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>

根据您的代码,您正在更改id,但不会更改克隆字段的name属性

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

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

您必须管理输入元素的名称。您可以为它们唯一地命名,也可以将名称指定为未索引数组,如 children[gender][] 。PHP 将通过自动创建索引来解析它们并被视为数组。此链接可能会有所帮助