title: JavaScript - Iterate over form inputs and collect values as key value pairs in object
body: <p>I am trying to collect values from a number of input fields in a form by iterating of the inputs and then storing them as key/value pairs in a array of objects. However i am struggling to find an efficient way of doing this that does not involve a long set if if else or switch statement.</p>
  
  <p><strong>Concept:</strong></p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>What i would like to avoid:</strong></p>
  
  <pre><code>var inputs = document.querySelectorAll('input');    
  
  for (var i = 0; i &lt; inputs.length; i++) {
    var myObject = {};
  
    if (i = 0) {
      myObject.val0 = inputs[i];
    } else if (i = 1) {
      myObject.val1 = inputs[i];
    } else if (i = 2) {
      myObject.val2 = inputs[i];
    } else if (i = 3) {
      myObject.val3 = inputs[i];
    } 
  
  }
  </code></pre>
  
  <p>Any suggestions on how this may be done more efficiently? One idea i have is using bracket notation to dynamically set the key values based on a existing html element attribute maybe id, name or a custom data attribute.</p>