jQuery plugin $(node).toJSON() - convert html form to JS Object

GitHub project repo

I've been working on this little function to convert an HTML form into a JSON Object having the same structure of the form. Basically it is intended to be useful in those situations where you let your user dynamically alter the structure of your form, for examle:

        Form

        
        
        

        

            Library

            

            
                Sci-Fi
                Horror
                Manuals
                Comics
            

            

                Book

                
                
                
                
                
                
                
                

            

            

                Book

                
                
                
                
                
                
                
                

            

        

        
    

where user can add more favourite quotes, or add more books or even more libraries dynamically using jQuery to add form parts and assigning the new inputs names to be those shown in the above three example, i.e. a new fav. quote input text will have name="myFavouriteQuote" and so on.

Done this you want to grab your datas so you can send them over to a server scipt in a way that keeps the original data structure created within the form using fieldsets as in the example.

So a JSON rapresentation of the Object would be for example:

{

    "myFirstName":"Carlo",

    ...,

    "myBook":[

        {

            "myBookTitle":"some title"

            ...,

            "myFavouriteQuote":[

                {0:"quote1"},
                {1:"quote2"},
                ...

            ]

        },

        ...

    ]

}

This because the final goal is to send this object to a server side php script which will convert the correctly nested data array to an XML file representing the exact structure of the form (where the tag names will be the elements' 'name' attributes).

To do so

Here are a few enhancements that I made to your code.

1)

Cached references to this and $(this).children('[name]').

2)

Used a regular expression to check if the element type is a radio or checkbox.

3)

In this case,

if (!jso[name])
    jso[name] = [];

is the same as

jso[name] = jso[name] || [];

4)

var jso = new Object(); is the same as var jso = {};

5)

Negated the if condition to get rid of the return true.

if (type == 'radio' && !$(this).prop('checked')){
    return true;
}
//other stuff

becomes

if (type != 'radio' || $(this).prop('checked')){
    //other stuff
}

Final Result

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

Demo: http://jsfiddle.net/x4DjZ/

StackExchange Code Review Q#13443, answer score: 2