Form Serialize

Serializes a form with js

by denniswaltermartinez

HTML

<form action="">
  <div><input type="text" name="first.name-12-asd-34-asd-asd"></div>
  <div><input type="text" name="middle.name" value="ds"></div>
  <div><input type="text" name="last.name"></div>
  <div><label><input type="checkbox" name="language" value="english" checked> English</label></div>
  <div><label><input type="checkbox" name="language" value="russian" checked> Russian</label></div>
  <div>Gender:</div>
  <div><label><input type="radio" name="gender" value="male" checked> Male</label></div>
  <div><label><input type="radio" name="gender" value="female"> Female</label></div>
</form>

JavaScript

function serialize(form) {
  const formData = new FormData(form)
  let formKeys = [...formData.keys()]

  // Let's remove duplicates
  formKeys = [...new Set(formKeys)]

  return formKeys.map(name => {
    let values = [...formData.getAll(name)]
    let camelName = name.toLowerCase()
      .replace(/[^A-Za-z0-9]/g, ' ').split(' ')
      .reduce((piece, word) => piece + (word.charAt(0).toUpperCase() + word.slice(1)))

    if (values.length <= 1) values = values[0]

    return {
      [camelName]: name,
      value: values
    }
  })
}

// Not required but may be useful. Generally bad practice to prototype
// from native methods.
//
// To use: document.querySelector('your-form').serialize()
HTMLElement.prototype.serialize = function() {
  return serialize(this)
}

console.log(serialize(document.querySelector('form')))
console.log(document.querySelector('form').serialize())