Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <form id='myForm'>

    <label for="name">
      Name <input id='name' name='name' type="text">
    </label><br/><br/>


    <label for="sex">
      Gender <br />
      <input  name='sex' type="radio" value='male' /> Male
      <input  name='sex' type="radio" value='female' /> Female
    </label><br/><br/>


    <label for="hobby">
      Hobby <br/>
      <input type='checkbox' name='hobby' value='football' /> Football <br/>
      <input type='checkbox' name='hobby' value='coding' /> Coding <br/>
      <input type='checkbox' name='hobby' value='movies' /> Movies <br/>

    </label><br/>

    <input type="submit" value="Submit">


  </form>

<script id="jsbin-javascript">
console.clear()


document.querySelector('form')
  .addEventListener('submit',handleSubmit)


function handleSubmit (e){

  e.preventDefault()

  let arr = []

  var myForm = document.getElementById('myForm')

  formData = new FormData(myForm)

  Array.from(new Set(Array.from(formData.keys())))
    .forEach((n,i)=>{
      valueArr = formData.getAll(n)
      obj = {}
      if(valueArr.length === 1){
        obj[n] = valueArr[0]
        arr.push(obj)
      }
      if(valueArr.length>1){
        obj[n] = valueArr
        arr.push(obj)
      }
  })

  console.log(arr)

  document.querySelector('form').reset()

}
</script>


<script id="jsbin-source-javascript" type="text/javascript">console.clear()


document.querySelector('form')
  .addEventListener('submit',handleSubmit)


function handleSubmit (e){

  e.preventDefault()

  let arr = []

  var myForm = document.getElementById('myForm')

  formData = new FormData(myForm)

  Array.from(new Set(Array.from(formData.keys())))
    .forEach((n,i)=>{
      valueArr = formData.getAll(n)
      obj = {}
      if(valueArr.length === 1){
        obj[n] = valueArr[0]
        arr.push(obj)
      }
      if(valueArr.length>1){
        obj[n] = valueArr
        arr.push(obj)
      }
  })

  console.log(arr)

  document.querySelector('form').reset()

}</script></body>
</html>