title: "sending" data from html to javascript for a random name generator
body: <p>I'm building a random name generator that pulls from an array depending what checkboxes are checked. I'm having trouble connecting the html form to the js document and I'm pretty new to this so I have no idea what I'm doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var arrayFemme = ["Guinevere", "Luna", "Florence", "Caitlin", "Alexandria",      "Charlie"];
      var arrayMasc = ["Flynn", "Darren", "Alexander", "Charles"];
      var arrayUni = ["London", "Paris", "Alex", "Charlie"];
      var arrayAll = arrayFemme.concat(arrayMasc).concat(arrayUni);
  
      var arrayFirstLetters = [];
  
      //Selecting Name's Gender and preffered first letter
      var arrayGenders = ["a", "m", "f", "u"];
      // ------------------------------------------------------
      function generator(){
          
          function formInput() {
              var selected = document.getElementById("genderForm").gender; 
              
              for(var i = 0; i&lt;selected.length; i++){
                  if(selected[i].checked == true){
                      alert (arrayGenders[i])
                  }
                  else{
                      document.getElementById("pickGender").focus
                  }
              };
              
          };
           function test(){
             document.getElementById('submit').submit();
             alert("why does nothing work?!");
         };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!-- FORM --&gt;
              &lt;div id="form"&gt;
                  &lt;form name="genderForm" method="get" id="genderForm"&gt;
                      &lt;h1&gt;Name Generator&lt;/h1&gt;
                      &lt;p id="pickGender"&gt;Preffered Name's Gender:&lt;/br&gt;
                          (Please select atleast one option)
                      &lt;/p&gt;
  
                      &lt;input type="checkbox" name="Gender" value="All"&gt; All the names!
                      &lt;input type="checkbox" name="Gender" value="Masculine"&gt; Masculine
                      &lt;input type="checkbox" name="Gender" value="Feminine"&gt; Feminine
                      &lt;input type="checkbox" name="Gender" value="Unisex"&gt; Unisex&lt;/br&gt;
  
                      &lt;p&gt;Preferred First Letter: (If applicable) &lt;input type="text" name="firstLetter" maxlength="1" size="1"&gt;
                      &lt;/p&gt;
          
                     
                          &lt;button class="optionsButtonMore"&gt;Advanced Options&lt;/button&gt;&lt;br&gt;
                          &lt;input type=submit value="Gimme a name!" class="submit" id="submit" onclick="generator();"&gt;
                  &lt;/form&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>I have literally no idea what's wrong and any help would be appreciated! Thank you!</p>