2

我有一点 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>
4

3 回答 3

1

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

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

于 2012-05-18T19:15:01.707 回答
0

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

于 2012-05-18T19:15:56.557 回答
0

您必须管理输入元素的名称。您可以为它们提供唯一的名称，也可以将名称作为未索引的数组（如children[gender][]. Php 将通过自动创建索引来解析它们并将其视为数组。此链接可能会有所帮助

于 2012-05-18T19:27:16.130 回答