CODEWITHSUNDEEP
phpjqueryhtmlforms
ATLChris
ATLChris

Reputation: 3296

jQuery dynamiclly added from field wont submit

I have a bit of jQuery that allows people to add form fields dynamically based on the number of children they have.

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', '');

The code works prefect to add the fields and increase the name but when I click submit and print_r($_POST);, the dynamically created field is not there.

Below is an example of my html including the dynamically generated field (child-3), which is based of the first one as you can see in the 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>

Upvotes: 2

Views: 164

Answers (3)

bitoshi.n
bitoshi.n

Reputation: 2318

You have to manage name of your input element. You can give them the name uniquely or give the name as un-indexed array like children[gender][]. Php will parse them and treat as array by creating index automatically for that. This link may help

Upvotes: 0

BrianM
BrianM

Reputation: 71

Add your name attribute into your jQuery code.

Upvotes: 0

ilanco
ilanco

Reputation: 9957

According to your code you are changing the id, but not the name attribute for the cloned fields.

The name attribute has to be unique and that's why you don't see the dynamically added fields.

Upvotes: 1

Related Questions