jQuery Serialize Object Groupable

by dfsq

HTML

<form action="">Title:
    <input type="text" name="title" group="event" value="Some Party">
    <br>Start Date:
    <input type="date" name="startDate" group="event.dates" value="2014-03-26">
    <br>End Date:
    <input type="date" name="endDate" group="event.dates" value="2014-03-27">
    <br>Host First Name:
    <input type="text" name="firstName" group="event.host" value="Thomas">
    <br>Host Last Name:
    <input type="text" name="lastName" group="event.host" value="Mann">
    <br>Host Profile:
    <input type="text" name="age" group="event.host.profile" value="29">
    <br>Sex:
    <input type="text" name="sex" group="event.host.profile" value="Male">
    <br>
    <button id="submit" type="button">Get Values</button>
</form>
<pre id="values"></pre>

CSS

#values {
    font-family: monospace;
}

JavaScript

$('#submit').click(function () {
    var data = $('form').serializeObject();
    $('#values').text(JSON.stringify(data, null, '  '));
});

$.fn.serializeObject = function(options) {
    
    function namespace(obj, keys, name, value) {
        keys = keys.split('.');
        var o = obj;
        for (var i = 0; i < keys.length; i++) {
            o[keys[i]] = o[keys[i]] || {};
            o = o[keys[i]];
        }
        o[name] = value;
        return obj;
    }
    
    var elements = $.makeArray($.prop(this[0], "elements")),
        obj = {};
    
    $.each(elements, function(i, el) {
        if (!el.name || $(el).is(":disabled")) return;
        
        var group = $(el).attr('group');
        
        if (!group) {
            obj[el.name] = $(el).val();
        }
        else {
            obj = namespace(obj, group, el.name, $(el).val());
        }
    });
    
    return obj;
};

// http://stackoverflow.com/a/22661115/949476