JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<form class="form" data-form="serialize">
  <input type="text" name="text1" value="1">
  <select name="select">
    <option value="option1">1</option>
    <option value="option2">2</option>
    <option value="option3">3</option>
  </select>
  <textarea name="textarea123">123123123</textarea>
  <input type="text" name="text4" value="4">
  <input type="text" name="text55" value="55">
  <input type="text" name="text66" value="66">
  <button type="submit">Обновить</button>
</form>

CSS

.form input,
.form select,
.form textarea,
.form button {
  box-sizing: border-box;
  display: block;
  margin: 10px 10px 0;
  outline: 0 solid transparent;
  padding: 3px 6px;
  width: 250px;
}

JavaScript

var fn = {
  doc: $(document),
  serializeObject: function(a) {
    var arr = a.serializeArray();
    var tree = {};
    $.each(arr, function(index, object) {
      var node = tree;
      var name = object.name;
      var value = object.value;
      var parts = name.match(/[^\[\]]+(\[\])?|\[[^\]]+\](\[\])?/g);
      if (parts) {
        $.each(parts, function(i, key) {
          var isArray = /\[\]$/.test(key);
          key = key.replace(/(\[|\])/g, '');

          if (!isArray) {
            if (!node[key]) {
              node[key] = (i == (parts.length - 1)) ? value : {};

            }

          } else {
            if (!node[key]) {
              node[key] = [];

            }

            if (typeof value === 'object') {
              node[key] = arrayUnique(node[key].concat(value));

            } else {
              node[key].push(value);

            }

          }
          node = node[key];

        });

      }

    });
    console.log(tree);
    return tree;

  }

}
fn.doc.on('click', '[data-form="serialize"] button', function() {
  var a = $('[data-form="serialize"]');
  fn.serializeObject(a);
  return false;
});