JSFiddle - React, Tailwind, and code Playground

by insin

HTML

<form id="testForm">
    <input type="hidden" name="testHidden" value="1">
    <input type="hidden" name="prefix1:testHidden" value="2">
    <input type="hidden" name="prefix2:testHidden" value="1">
</form>

JavaScript

document.write(JSON.stringify(prefixedFormData(document.getElementById("testForm"), ":")))

function prefixedFormData(form, prefixSeparator) {
  var prefixedData = {};

  for (var i = 0, l = form.elements.length; i < l; i++) {
    var element = form.elements[i]
      , type = element.type
      , value = null
      , prefix = '__noprefix__'
      , name = element.name;

    if (prefixSeparator && name.indexOf(prefixSeparator) != -1) {
      var nameParts = element.name.split(prefixSeparator)
      prefix = nameParts[0]
      name = nameParts[1]
    }

    // Retrieve the element's value (or values)
    if (type == 'hidden' || type == 'password' || type == 'text' ||
        type == 'textarea' || ((type == 'checkbox' ||
                                type == 'radio') && element.checked)) {
      value = element.value;
    }
    else if (type == 'select-one') {
      value = element.options[element.selectedIndex].value;
    }
    else if (type == 'select-multiple') {
      value = [];
      for (var j = 0, m = element.options.length; j < m; j++) {
        if (element.options[j].selected) {
          value[value.length] = element.options[j].value;
        }
      }
      if (value.length == 0) {
        value = null;
      }
    }

    // Add any value obtained to the data object
    if (value !== null) {
      if (!prefixedData.hasOwnProperty[prefix]) {
        prefixedData[prefix] = {}
      }
      var data = prefixedData[prefix]
      if (data.hasOwnProperty(name)) {
        if (data[name] instanceof Array) {
          data[name] = data[name].concat(value);
        }
        else {
          data[name] = [data[name], value];
        }
      }
      else {
        data[name] = value;
      }
    }
  }

  return prefixedData;
}