Question

I am going to make an associative array of the information I am dealing with. I have the following code:

var controls = {};
$('#userForm').find('div.control').each(function(index, Element)
{
    if($(Element).find('input').attr('type') == "checkbox")
    {
        var attributes = {}; // Object
        attributes["type"] = "checkbox";
        attributes["name"] = $(Element).find('.controlText').text().toLowerCase().split(" ").join("_")+"_"+$(Element).find('input').attr("id");
        attributes["required"] = $(Element).find('input').hasClass('required');
        controls[index] = attributes;
        $(controls[index]).children().each(function(){
            // How do i check the controls object each value 
            alert($(this));

          });
    }
});

I want to make an array of controls which will contain each input’s properties separately in an index like this;

controls 
   [0] =>
       [type] = checkbox
       [name] = chk_box_1
       [required] = true
   [1] =>
       [type] = checkbox
       [name] = chk_box_2
       [required] = false

…and so on similarly.

How can I populate the controls array and then see the elements in javascript and pass them to php and print the array there?

Answer 1

Make it an array of objects.

var controls = [];
$('#userForm').find('div.control').each(function (index, elm) {
    if ($(elm).find('input').attr('type') == "checkbox") {
        var attributes = {}; // Object
        attributes["type"] = "checkbox";
        attributes["name"] = $(elm).find('.controlText').text().toLowerCase().split(" ").join("_") + "_" + $(elm).find('input').attr("id");
        attributes["required"] = $(elm).find('input').hasClass('required');
        controls.push(attributes);
    }
});

Now access it like this.

for(var i = 0; i < controls.length; i++){
    //alert(controls[i].name);
}