jQuery Serialize Object Groupable

by dfsq

HTML

<form action="">
    Title: <input type="text" name="title" value="Some Party"><br>
    Start Date: <input type="date" name="startDate" value="2014-03-26"><br>
    End Date: <input type="date" name="endDate" value="2014-03-27"><br>
    Guests:<br><textarea name="guests" id="" cols="30" rows="10">Mike and Joe</textarea><br>
    Host First Name: <input type="text" name="firstName" value="Thomas"><br>
    Host Last Name: <input type="text" name="lastName" value="Mann"><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({
        startDate: 'dates',
        endDate: 'dates',
        firstName: 'user',
        lastName: 'user'
    });
    $('#values').text(JSON.stringify(data, null, '  '))
});

$.fn.serializeObject = function(options) {
    
    var data = $(this).serializeArray(),
        obj = {};
    
    $.each(data, function(i, el) {
        var key = el.name;
        if (el.name in options) {
            obj[options[key]] = obj[options[key]] || {};
            obj[options[key]][key] = el.value;
        }
        else {
            obj[key] = el.value;
        }
    });
    
    return obj;
};

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