JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<form>
<p><textarea name="text">text</textarea></p>
<p><input name="check" type="checkbox" checked value="on1" /> check</p>
<p><input name="check" type="checkbox" checked value="on2" /> check</p>
<p><select name="select">
    <option>val1</option>
    <option>val2</option>
    <option>val3</option>
    </select>
</p>
<p><button>click to serialize</button></p>
</form>
<textarea id="result" rows="5"></textarea>

JavaScript

$.fn.serializeObject = function() {
  var $form = this.is("form") ? this : this.find("form"),
    obj = {};
  
  $.each($form.serializeArray(), function() {
    
    if (this.name in obj) {
      // Should be array
      if (!$.isArray(obj[this.name])) {
        obj[this.name] = [obj[this.name]];
      }
      // Push value
      obj[this.name].push(this.value);
    } else {
      // Set value
      obj[this.name] = this.value;
    }

  });
  
  return obj;
};

$("form").submit(function(e){
  var $form = $(this);
  e.preventDefault();
  $("#result").val(JSON.stringify($form.serializeObject()));
});