m4tt1mus/index.html

## index.html
<html>
  <head>
    <title>json serialize form</title>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script type="javascript/text">
      $.fn.serializeForm = function () {
        var serializedObject = {};
        var inputsArray = this.serializeArray();
        for (var i = inputsArray.length - 1; i >= 0; i--) {
          var input = inputsArray[i];
          if (input.value !== '') {
            var $ele = this.find('[name=\'' + input.name + '\']');
            var tagType = $ele.prop('type');
            if (tagType === 'select-multiple' || tagType === 'checkbox') {
              if (typeof (serializedObject[input.name]) === 'undefined') {
                serializedObject[input.name] = [];
              }
              serializedObject[input.name].push(input.value);
            } else {
              serializedObject[input.name] = input.value;
            }
          }
        }
        return serializedObject;
      };

      $( document ).ready(function() {
        var serialized = $('#form').serializeForm();
        var jsonString = JSON.stringify(serialized, null, 4);
        $('#result').text(jsonString);
      });
    </script>
  </head>
  <body>
    <div>Remove empties, always makes items that are possibly multiples into arrays.</div>
    <form id="form">
      <div>text:
        <input name="text" type="text" value="text test" />
      </div>
      <div>select:
        <select name="selectone">
          <option value="1">select one option 1</option>
          <option value="2">select one option 2</option>
          <option value="3">select one option 3</option>
          <option value="4" selected="selected">select one option 4</option>
        </select>
      </div>
      <div>multiselect:
        <select name="multiselect" multiple="multiple">
          <option value="1">multiselect option 1</option>
          <option value="2">multiselect option 2</option>
          <option value="3" selected="selected">multiselect option 3</option>
          <option value="4" selected="selected">multiselect option 4</option>
        </select>
      </div>
      <div>multiselect single:
        <select name="multiselectsingle" multiple="multiple">
          <option value="1">multiselect single option 1</option>
          <option value="2">multiselect single option 2</option>
          <option value="3">multiselect single option 3</option>
          <option value="4" selected="selected">multiselect single option 4</option>
        </select>
      </div>
      <div>checkbox:
        <input type="checkbox" name="checkbox" value="1" />
        <input type="checkbox" name="checkbox" value="2" checked="checked" />
      </div>
      <div>checkboxes:
        <input type="checkbox" name="checkboxes" value="1" checked="checked" />
        <input type="checkbox" name="checkboxes" value="2" checked="checked" />
      </div>
      <div>textarea:
        <textarea name="textarea">text in text area</textarea>
      </div>
      <div>radio:
        <input name="radio" type="radio" value="1" checked="checked" />
        <input name="radio" type="radio" value="2" />
      </div>
      <div>text none:
        <input name="textNone" type="text" />
      </div>
      <div>multiselect none:
        <select name="multiselectNone" multiple="multiple">
          <option value="1">multiselect option 1</option>
          <option value="2">multiselect option 2</option>
          <option value="3">multiselect option 3</option>
          <option value="4">multiselect option 4</option>
        </select>
      </div>
      <div>checkbox none:
        <input type="checkbox" name="checkboxNone" value="1" />
        <input type="checkbox" name="checkboxNone" value="2" />
      </div>
      <div>textarea:
        <textarea name="textareaNone"></textarea>
      </div>
      <div>radio none:
        <input name="radioNone" type="radio" value="1" />
        <input name="radioNone" type="radio" value="2" />
      </div>
    </form>
    <br />
    <br />
    <div id="result"></div>
  </body>
</html>
	<html>
	<head>
	<title>json serialize form</title>
	<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
	<script type="javascript/text">
	$.fn.serializeForm = function () {
	var serializedObject = {};
	var inputsArray = this.serializeArray();
	for (var i = inputsArray.length - 1; i >= 0; i--) {
	var input = inputsArray[i];
	if (input.value !== '') {
	var $ele = this.find('[name=\'' + input.name + '\']');
	var tagType = $ele.prop('type');
	if (tagType === 'select-multiple' \|\| tagType === 'checkbox') {
	if (typeof (serializedObject[input.name]) === 'undefined') {
	serializedObject[input.name] = [];
	}
	serializedObject[input.name].push(input.value);
	} else {
	serializedObject[input.name] = input.value;
	}
	}
	}
	return serializedObject;
	};

	$( document ).ready(function() {
	var serialized = $('#form').serializeForm();
	var jsonString = JSON.stringify(serialized, null, 4);
	$('#result').text(jsonString);
	});
	</script>
	</head>
	<body>
	<div>Remove empties, always makes items that are possibly multiples into arrays.</div>
	<form id="form">
	<div>text:
	<input name="text" type="text" value="text test" />
	</div>
	<div>select:
	<select name="selectone">
	<option value="1">select one option 1</option>
	<option value="2">select one option 2</option>
	<option value="3">select one option 3</option>
	<option value="4" selected="selected">select one option 4</option>
	</select>
	</div>
	<div>multiselect:
	<select name="multiselect" multiple="multiple">
	<option value="1">multiselect option 1</option>
	<option value="2">multiselect option 2</option>
	<option value="3" selected="selected">multiselect option 3</option>
	<option value="4" selected="selected">multiselect option 4</option>
	</select>
	</div>
	<div>multiselect single:
	<select name="multiselectsingle" multiple="multiple">
	<option value="1">multiselect single option 1</option>
	<option value="2">multiselect single option 2</option>
	<option value="3">multiselect single option 3</option>
	<option value="4" selected="selected">multiselect single option 4</option>
	</select>
	</div>
	<div>checkbox:
	<input type="checkbox" name="checkbox" value="1" />
	<input type="checkbox" name="checkbox" value="2" checked="checked" />
	</div>
	<div>checkboxes:
	<input type="checkbox" name="checkboxes" value="1" checked="checked" />
	<input type="checkbox" name="checkboxes" value="2" checked="checked" />
	</div>
	<div>textarea:
	<textarea name="textarea">text in text area</textarea>
	</div>
	<div>radio:
	<input name="radio" type="radio" value="1" checked="checked" />
	<input name="radio" type="radio" value="2" />
	</div>
	<div>text none:
	<input name="textNone" type="text" />
	</div>
	<div>multiselect none:
	<select name="multiselectNone" multiple="multiple">
	<option value="1">multiselect option 1</option>
	<option value="2">multiselect option 2</option>
	<option value="3">multiselect option 3</option>
	<option value="4">multiselect option 4</option>
	</select>
	</div>
	<div>checkbox none:
	<input type="checkbox" name="checkboxNone" value="1" />
	<input type="checkbox" name="checkboxNone" value="2" />
	</div>
	<div>textarea:
	<textarea name="textareaNone"></textarea>
	</div>
	<div>radio none:
	<input name="radioNone" type="radio" value="1" />
	<input name="radioNone" type="radio" value="2" />
	</div>
	</form>
	<br />
	<br />
	<div id="result"></div>
	</body>
	</html>