test.html

<form id="form1">
  <input type="text" name="name">
  <br>
  <br>
  <input type="text" name="age">
  <br>
  <br>
  <input type="password" name="password">
  <br>
  <input type="hidden" name="uid" value="12345">
  <br>
  <input type="radio" name="sex" value="male">
  <input type="radio" name="sex" value="famale">
  <input type="radio" name="sex" value="nil">
  <br>
  <br>
  <input type="checkbox" name="fruit" value="apple">
  <input type="checkbox" name="fruit" value="orange">
  <input type="checkbox" name="fruit" value="grape">
  <br>
  <br>
  <select name="area" multiple>
    <option value="cn">china</option>
    <option value="jp">japan</option>
    <option value="us">USA</option>
    <option value="uk">england</option>
    <option value="ca">canada</option>
  </select>
  <br>
  <br>
  <select name="country">
    <option value="cn">china</option>
    <option value="jp">japan</option>
    <option value="us">USA</option>
    <option value="uk">england</option>
    <option value="ca">canada</option>
  </select>
  <br><br>
  <textarea name="summary" rows="8" cols="40"></textarea>
  <br>
  <input type="submit" value="submit">
</form>
<script src="./dist/bundle.js"></script>
<script>
function serializeArray(form) {
  var field, l, s = [];
  if (typeof form == 'object' && form.nodeName == "FORM") {
      var len = form.elements.length;
      for (i=0; i<len; i++) {
          field = form.elements[i];
          if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
              if (field.type == 'select-multiple') {
                  l = form.elements[i].options.length;
                  for (j=0; j<l; j++) {
                      if(field.options[j].selected)
                          s[s.length] = { name: field.name, value: field.options[j].value };
                  }
              } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
                  s[s.length] = { name: field.name, value: field.value };
              }
          }
      }
  }
  return s;
}

  function fillForm(form, obj) {
  var isArray = function(o) { return Object.prototype.toString.call(o) == '[object Array]' };
  [].forEach.call(form.querySelectorAll('input,select,textarea'), function(el) {
    var name = el.name,
        val = el.value,
        validElem;
    console.log('enter elem: ', el.name);
    Object.keys(obj).forEach(function(item) {
      // omit empty object.
      if (!obj[item]) delete obj[item];
      if (item == name) {
        debugger;
        // checked to checkbox & radio.
        if (el.hasAttribute('type') && (el.getAttribute('type').toLowerCase() == 'checkbox' || el.getAttribute('type').toLowerCase() == 'radio')) {
          // console.log('match type: ', el.getAttribute('type'))
          [].forEach.call(form.querySelectorAll('[name='+ item +']'), function(c) {
            if (isArray(obj[item]) && c.value == obj[item]) {
              c.checked = true;
            } else if (c.value == obj[item]) {
              c.checked = true;
            }
          })
        } else if (el.nodeName.toLowerCase() == 'select') {

          // console.log('match type: ', el.nodeName);
          [].forEach.call(el.options, function(op) {
            if (isArray(obj[item]) && op.value == obj[item]) {
              op.seleccted = true;
            } else if (op.value == obj[item]) {
              op.selected = true;
            }
          })
        } else {
          el.value = obj[item];
        }
      }
    })

  })
}

  var f1 = document.getElementById('form1');
  f1.addEventListener('submit', function(ev) {
    ev.preventDefault();
    var data = serializeJSON(this);
    console.log(data);
  }, false)

</script>