Form Serialize

Serializes a form with js

by denniswaltermartinez

HTML

<form action="">
  <div><input type="text" name="first.name"></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 camelCase(string) {
	let lowerStirng = string.toLowerCase()
  
  let camelWord = lowerStirng.replace(/[^A-Za-z0-9]/g, ' ').split(' ').reduce((piece, word) => piece + word, '')
  
  console.log(camelWord)
}

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)]

    if (values.length <= 1) values = values[0]
    
    return {
      [camelCase(name)]: 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())