title: Push values onto an associative array
body: <p>I have the following code I've created for a student I mentor and I'm wondering if anyone can think of an easier way, or method that already exists? I'm also interested in learning how to create plugins in javascript, but forgot how/can't find it on google.</p>
  
  <p>Anyway, here's the code...</p>
  
  <pre><code>window.addEventListener('load', function()
  {
      for(var i = 0; i &lt; document.forms[0].length; i++)
      {
          document.forms[0].elements[i].checked = false;
      }   
  }, false);
  
  function formHandler()
  {
      valArray = new Array();
      toppArray = new Array();
      var theForm = document.forms[0];
  
      for(var i = 0; i &lt; theForm.length; i++)
      {
          theValue = theForm.elements[i].value;
          if(theForm.elements[i].checked == true)
          {
              if(theForm.elements[i].type == 'checkbox' &amp;&amp; theForm.elements[i].name == 'myChBx')
              {
                  appendArr(toppArray, theForm.elements[i].value);
                  appendArr(valArray, toppArray, 'topping');  
              }else
              {
                  appendArr(valArray, theValue);  
              }
          }
      }
  }
  
  function appendArr(array, value, keyVal = '')
  {
      if(keyVal != '')
      {
          array[keyVal] = value;
      }else
          array[array.length] = value;
  }
  </code></pre>
  
  <p>Ok, now a brief explanation on what this code does. In php I know you can append a value onto an array using something like </p>
  
  <pre><code>$array[] = $value;
  </code></pre>
  
  <p>but I've read several places how you must use objects to create an associative array in javascript. In a way I guess I've done that, but I managed, using the array object.</p>
  
  <p>The purpose of this is to take values from a simple radio and checkbox form such as this one...</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript" src="./appendArr.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form action="" method="post"&gt;
          Radio 1:&lt;input type="radio" name="myRdo" id="rdo" value="radio 1" onclick="formHandler();" /&gt;
          Radio 2:&lt;input type="radio" name="myRdo" id="rdo" value="radio 2" onclick="formHandler();" /&gt;
          Radio 3:&lt;input type="radio" name="myRdo" id="rdo" value="radio 3" onclick="formHandler();" /&gt;
          &lt;br /&gt;
          Checkbox 1:&lt;input type="checkbox" name="myChBx" id="myChBx" value="Checkbox 1" onclick="formHandler();" /&gt;
          Checkbox 2:&lt;input type="checkbox" name="myChBx" id="myChbx" value="Checkbox 2" onclick="formHandler();" /&gt;
          Checkbox 3:&lt;input type="checkbox" name="myChBx" id="myChbx" value="Checkbox 3" onclick="formHandler();" /&gt;
          &lt;br /&gt;
          &lt;input type="submit" name="submit" id="button" " value="Button" /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and store them in one array with one of the values of that array being an associative array called toppings; so some values in the array will be single variables, while others will be a collection of single variables.</p>
  
  <p>Anyway... I probably just spent an hour on this for nothing, but I come here to learn, so please don't troll. Thanks</p>