php - フィールドから動的に追加されたjQueryが送信されない

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);、動的に作成されたフィールドがありません。

以下は、動的に生成されたフィールド (child-3) を含む私の html の例です。これは、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

入力要素の名前を管理する必要があります。一意の名前を付けるか、 のようなインデックスのない配列として名前を付けることができますchildren[gender][]。Php はそれらを解析し、インデックスを自動的に作成して配列として扱います。このリンクが役立つ場合があります

Answer 3

name 属性を jQuery コードに追加します。