title: Convert dynamic list object in form to JSON with javascript
body: <p>I have a form submission script that converts form inputs to JSON and submits with ajax. It works for the simple forms that I have used it for previously, but when I try to use it for lists it is not read correctly.</p>
  
  <p>Inside the form there is a dynamic list of inputs that is generated by another script. The list items look like this:</p>
  
  <pre><code>&lt;li&gt;&lt;input type="checkbox" name="skill_list[]" value="10155"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The function that reads the form looks like this:</p>
  
  <pre><code>var formToJSON = elements =&gt; [].reduce.call(elements, (data, element) =&gt; {
  
    data[element.name] = element.value;
    return data;
  
  }, {});
  </code></pre>
  
  <p>Inside the event listener for the submit button, the function is called:</p>
  
  <pre><code>var data = formToJSON(this.elements);
  </code></pre>
  
  <p>And finally, before submission, the data is stringified:</p>
  
  <pre><code>var data = JSON.stringify(data);
  </code></pre>
  
  <p>The error occurs in the formToJSON function. Instead of creating an object with the name skill_list and a value like {10155, 10288, 10240} it creates an object with the name skill_list[] and the value is whatever the first value in the list is.</p>
  
  <p>I've been trying to rewrite the function to recognize a list but I haven't been able to and I'm running out of ideas. Can someone please help guide me in the right direction?</p>
  
  <p>PS. I would prefer to write this without jQuery.</p>