I'm creating a namespace in javascript to loop through a form and create an object. The goal of the function when called is to loop through all of a certain form type and construct an object that has a key which is the html input's name and the value as its current value. However, it keeps returning undefined.

Any help would be greatly appreciated:

get_form_data.radio = function(container) { //will return the value 
    var data = {}; //function data object to return
    container.find('input[type="radio"]:checked').each(function() {

        var current_object = {}; //loop temporary object
        var current = $(this); //current element
        var current_key = current.attr('name'); //property category
        var current_value = current.attr('value'); //value to update the database with
        current_object[current_key] = current_value; //temporary object
        console.log(current_object.length); //RETURNS UNDEFINED
        $.extend(data, current_object);

    });

    console.log(data.length); //returns undefined
    return data;
}​

I'm creating a namespace in javascript to loop through a form and create an object. The goal of the function when called is to loop through all of a certain form type and construct an object that has a key which is the html input's name and the value as its current value. However, it keeps returning undefined.

Any help would be greatly appreciated:

get_form_data.radio = function(container) { //will return the value 
    var data = {}; //function data object to return
    container.find('input[type="radio"]:checked').each(function() {

        var current_object = {}; //loop temporary object
        var current = $(this); //current element
        var current_key = current.attr('name'); //property category
        var current_value = current.attr('value'); //value to update the database with
        current_object[current_key] = current_value; //temporary object
        console.log(current_object.length); //RETURNS UNDEFINED
        $.extend(data, current_object);

    });

    console.log(data.length); //returns undefined
    return data;
}​

• javascript
• jquery
• undefined

• It seems to me that this would work, albeit a bit roundabout as other ments are suggesting. Can we see the HTML? Do the inputs actually have names, and did they have names when the page was first loaded? – Zach Shipley Commented Jul 26, 2012 at 20:02
• Hello, the inputs have names and they are statically built with php. I have a parent div with several forms and send each form to this namespace function as container. If I just alert a single value or name in the loop it works properly, but just doesn't work outside of the loop – JonMorehouse Commented Jul 26, 2012 at 20:23

3 Answers 3

You want to get the var current_object = {}; declaration out of the .each() call. Each iteration of the .each() function redeclares it, and effectively erases it. And forget about $.extend() as well.

var data = {};
container.find('input[type="radio"]:checked').each(function() {
    data[this.name] = this.value;
});
return data;

Untested though from a quick skim of your current code.

You need specify key and index value, something like thtat:

array.each(function(index, value) { 
  alert(index + ': ' + value); 
});

In your case:

get_form_data.radio = function(container) { //will return the value 
    var data = {}; //function data object to return
    container.find('input[type="radio"]:checked').each(function(index,value) {

        var current_object = {}; //loop temporary object
        var current = value; //current element
        var current_key = current.attr('name'); //property category
        var current_value = current.attr('value'); //value to update the database with
        current_object[current_key] = current_value; //temporary object
        console.log(current_object.length); //RETURNS UNDEFINED
        $.extend(data, current_object);

    });

    console.log(data.length); //returns undefined
    return data;
}​

Problem solved by taking a look at the global scope. It seems that the code above worked but my global namespace was confusing current = $(this) inside the each loop and this.data which is the global object for form data.

heres my form_submit namespace:

this.data = {};

this.property_status = function() {

        var property_status = {};

        this.container.children('form').each(function() {
            var current = $(this);
            property_status[current.attr('data-property_id')] = get_form_data.radio(current);
        });

        $.extend(this.data, property_status);
    };

and the get_form_data namespace:

    get_form_data.radio = function(container) {//will return the value 

    var form_data = {};//function data object to return

    container.find('input[type="radio"]:checked').each(function() {

        form_data[this.name] = this.value;
    });


    return form_data;
}

Any suggestions on optimizing this?