Processing Form Data With jQuery and Lodash

Using Lodash functions to help organize form data collected by jQuery.

by Alee

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input name="username" placeholder="username" autofocus />
    <input name="password" type="password" placeholder="password" />
    <input type="submit" />
</form>

CSS

body {
    font: 0.8em "Georgia" serif;
}

JavaScript

$(function() {
    $( 'form' ).on( 'submit', function( e ) {
        e.preventDefault();

        var formData = $( e.currentTarget )
            .serializeArray();
        
        formData = _( formData )
            .groupBy( 'name' )
            .mapValues( function( i ) {
                return _( i )
                    .pluck( 'value' )
                    .first();
            })
            .value();
        
        console.log( formData );
    });
});