GitHub project repoI'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 name=myForm data-detect=true>        <label for=myForm>Form</label>        <input name=myFirstName placeholder=myFirstName/>        <input name=mySecondName placeholder=mySecondName/>        <input name=myLastName placeholder=myLastName/>        <fieldset name=myLibrary>            <legend>Library</legend>            <input name=myLibraryName placeholder=myLibraryName/>            <select name=myLibraryGenre>                <option value=SciFi>Sci-Fi</option>                <option value=Horror>Horror</option>                <option value=Manuals>Manuals</option>                <option value=Comics>Comics</option>            </select>            <fieldset name=myBook>                <legend>Book</legend>                <input name=myBookTitle placeholder=myBookTitle/>                <input name=myBookDate type=date placeholder=myBookDate/>                <input name=myBookEditor placeholder=myBookEditor/>                <br/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>            </fieldset>            <fieldset name=myBook>                <legend>Book</legend>                <input name=myBookTitle placeholder=myBookTitle/>                <input name=myBookDate type=date placeholder=myBookDate/>                <input name=myBookEditor placeholder=myBookEditor/>                <br/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>                <input name=myFavouriteQuote placeholder=myFavouriteQuote/>            </fieldset>        </fieldset>        <input type=submit value=Submit me!>    </form>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 I basically select the form with $([data-detect]) and pass it as the node parameter to my toJSON function:function toJSON(node){    if($(node).children().length == 0) return $(node).val();    var json = new Object();    $(node).children([name]).each(function(){        name = $(this).attr('name');        if($(node).children([name=+name+]).length > 1){             if(!json[name]) json[name] = [];             json[name].push(toJSON(this));        }else if(($(this).children(':not(option)').length > 0)){             json[name] = toJSON(this);        }else{             json[name] = $(this).val();            }               });     return json;}so like : myJSONDatas = toJSON($([data-detect]));Is there any way I can improve my function? How could I modify this to handle combo and radio boxes?EDITI rewrote the function as a jQuery plugin and improved it a bit:$.fn.toJSON = function() {    if(!this.children().length) return this.val();    var json = new Object();    this.children('[name]').each(function(){         if($(this).siblings([name=+$(this).attr('name')+]).length){            if(!json[$(this).attr('name')]) json[$(this).attr('name')] = [];            json[$(this).attr('name')].push($(this).toJSON());         }else if($(this).children('[name]').length){            json[$(this).attr('name')] = $(this).toJSON();         }else{            json[$(this).attr('name')] = $(this).val();          }              });     return json;};now the call will be simply myJSONForm = $([data-detect]).toJSON();EDIT 2I added support for checkbox and radio input. Plus I replaced all those $(this).attr('name'); in code.$.fn.toJSON = function() {    if(!this.children().length) return this.val();    var json = new Object();    this.children('[name]').each(function(){        var name = $(this).attr('name');        var type = $(this).attr('type');        if($(this).siblings([name=+name+]).length){            if( type == 'checkbox' && !$(this).prop('checked')) return true;            if( type == 'radio' && !$(this).prop('checked')) return true;            if(!json[name]) json[name] = [];            json[name].push($(this).toJSON());        }else if($(this).children('[name]').length){            json[name] = $(this).toJSON();        }else{            json[name] = $(this).val();         }               });     return json;};Is this really returning a JSON object? What is the difference with a regular JS Objects?LAST EDITHere is my last edit since I think this is as concise as my brain can go. Basically I deleted that double this.children.length check:$.fn.toJSO = function() {    if(!this.children('[name]').length) return this.val();    var jso = new Object();    this.children('[name]').each(function(){        var name = $(this).attr('name');        var type = $(this).attr('type');        if($(this).siblings([name=+name+]).length){            if( type == 'checkbox' && !$(this).prop('checked')) return true;            if( type == 'radio' && !$(this).prop('checked')) return true;            if(!jso[name]) jso[name] = [];            jso[name].push($(this).toJSO());        }else{            jso[name] = $(this).toJSO();        }           });     return jso;};
jQuery plugin $(node).toJSON() - convert html form to JS Object
javascript;jquery;html;json;form
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 stuffbecomes 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/