Question

I am busy with a form duplication, when submit is pressed, I would like it to parse to json in the following format:

{ "dependant1": [
  { "name": "daniel"},
  ],"dependant2": [
  { "name": "steve"},
  ]
}

with each added dependant, at the moment, if i add more then one dependant it returns “{} {}” but if theres only one dependant it returns “{“name”:”steve”}.

any help greatly apreciated.
Heres the code:

jQuery:

        //Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var name_input_groups = ["name-group-1"];
//General Variables
//Generate variables
var name_fields=[0];
var name_input = "<input class='name' />";
//Generate variables
jQuery(document).ready(function(e) {
    jQuery(name_fields).each(function() {
        jQuery(name_input).appendTo('#name-group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;
        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter);
        var name_newDiv = 'name-group-'+ g_counter;
        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter );
        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');
        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);
        name_input_groups.push(name_newDiv);
    };
    //Cloning Function
    function validate_gen() {};
//submit function
var dep_counter = 0
jQuery('#submit').click(function(){
    $('.dependant').each(function(k, v){
        dep_counter++;
        var dependants = {};
    dependants['name'] = jQuery("#name-group-" + dep_counter).find('input').val();
        var json = JSON.stringify(dependants); 
        console.log(json);
    });
});
});

and heres the HTML:

<div id="dependant-1" class="dependant">
    name<div id="name-group-1"></div>
</div>
<div id="test"></div>

<button id="clone">clone</button>
<button id="submit">submit</button>

and the jsFiddle link – http://jsfiddle.net/dawidvdh/TzRu8/2/

Thanks.

Answer 1

simply used the following code and it worked perefectly:

    var result = {};
var dependants;
jQuery('#submit').click(function(){
    $('.dependant').each(function(k, v){
        dependants = {};
        dependants['name'] = $(v).find('.name').val();
        dependants['surname'] = $(v).find('.surname').val();
        dependants['id'] = idNumber;
        dependants['age'] = $(v).find('.age').val();
        dependants['gender'] = $(v).find('.gender').val();
        dependants['cell'] = cell_values;
        dependants['passport'] = pass_values;
        dependants['relationship'] = $(v).find('.relationship:checked').val();
        result['dependant'+g_counter] = [dependants];
    });

    var jsonData = JSON.stringify(result);

    console.log(jsonData);

    $.ajax({
        type: "POST",
        url: "mail.php",
        dataType: "json",
        data: {parameters: jsonData}
    });

});

Thanks everyone 🙂