Processing Form Data With jQuery and Lodash

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

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>
<script src="lodash.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)
          .map('value')
          .first();
      })
      .value();

    console.log(formData);
  });
});