JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<form name="test-form">
  <input id="animal-dog" type="radio" name="animal" value="dog" />
  <label for="animal-dog">Dog</label>
  <br/>
  <input id="animal-cat" type="radio" name="animal" value="cat" />
  <label for="animal-cat">Cat</label>
  <br/>
  <input id="animal-fish" type="radio" name="animal" value="fish" />
  <label for="animal-fish">Fish</label>
  <hr/>
  <input id="color-red" type="checkbox" name="color" value="red" />
  <label for="color-red">Red</label>
  <br/>
  <input id="color-blue" type="checkbox" name="color" value="blue" />
  <label for="color-blue">Blue</label>
  <br/>
  <input id="color-green" type="checkbox" name="color" value="green" />
  <label for="color-green">Green</label>
  <hr/>
  <input type="submit" name="submit" value="Submit" />
</form>

<br/><br/>
<fieldset>
  <legend>Result</legend>
  <p class="js-result"></p>
</fieldset>

JavaScript

(function($, undefined) {
  '$:nomunge'; // Used by YUI compressor.
  $.fn.serializeObject = function() {
    var obj = {};
    $.each(this.serializeArray(), function(i, o) {
      var n = o.name,
        v = o.value;
      obj[n] = obj[n] === undefined ? v : $.isArray(obj[n]) ? obj[n].concat(v) : [obj[n], v];
    });
    return obj;
  };
})(jQuery);

$("form[name='test-form']").on("submit", function(e) {
	e.preventDefault();
  var data = $(this).serializeObject();
  $(".js-result").text(JSON.stringify(data));
});