title: Value of checkbox is [object HTMLInputElement]
body: <p>I have two forms right next to each other. </p>
  
  <p>This right here is Form one</p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="radio" id="genderOne" name="genderOne" value="Mann"&gt;&lt;label for="genderOne"&gt;Maennlich&lt;/label&gt;
      &lt;input type="radio" id="genderTwo" name="genderOne" value="Frau"&gt;&lt;label for="genderTwo"&gt;Weiblich&lt;/label&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="checkbox" id="ageCheck" id="ageCheck" name="ageCheck"&gt;&lt;label for="ageCheck"&gt;Bist du ueber 18?&lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Form 2 is simply the same, with the difference that the IDs of the checkboxes are genderThree and genderFour and the name is genderTwo. The checkbox has also another name "ageCheckTwo".</p>
  
  <p>Now I want, if everything is filled in correctly to open up a php.site with the parameters the user typed in.</p>
  
  <p>Everything works, except for the second form, but only the gender. </p>
  
  <p>This is the JavaScript-code for that part</p>
  
  <pre><code>if(document.getElementById('genderOne').checked || document.getElementById('genderTwo').checked)
          {
              if(document.getElementById('genderOne').checked)
              {
                  var genderOne = $('#genderOne').val();
                  urlString += "&amp;genderOne=" + genderOne;
              }
              if(document.getElementById('genderTwo').checked)
              {
                  var genderTwo = $('#genderTwo').val();
                  urlString += "&amp;genderOne=" + genderTwo;
              }
          }
          if(document.getElementById('genderThree').checked || document.getElementById('genderFour').checked)
          {
              if(document.getElementById('genderThree').checked)
              {
                  var genderOne = $('#genderThree').val();
                  urlString += "&amp;genderTwo=" + genderThree;
              }
              if(document.getElementById('genderFour').checked)
              {
                  var genderTwo = $('#genderFour').val();
                  urlString += "&amp;genderTwo=" + genderFour;
              }
          }
  </code></pre>
  
  <p>And just to be sure, this is the second form</p>
  
  <pre><code>&lt;form&gt;
                      &lt;input type="radio" id="genderThree" name="genderTwo" value="Mann"&gt;&lt;label for="genderThree"&gt;Maennlich&lt;/label&gt;
                      &lt;input type="radio" id="genderFour" name="genderTwo" value="Frau"&gt;&lt;label for="genderFour"&gt;Weiblich&lt;/label&gt;&lt;br&gt;&lt;br&gt;
                      &lt;input type="checkbox" id="ageCheckTwo" id="ageCheckTwo" name="ageCheckTwo"&gt;&lt;label for="ageCheckTwo"&gt;Ist er/sie ueber 18?&lt;/label&gt;
                      &lt;/form&gt;
  </code></pre>
  
  <p>But, the URL is now, when I checked all parameters like this:</p>
  
  <pre><code>http://localhost/mojoGerman/questions.php?nameOne=fdgh&amp;nameTwo=hj&amp;genderOne=Mann&amp;genderTwo=[object HTMLInputElement]
  </code></pre>
  
  <p>While it should display the gender of the second person at the end. What am I doing wrong?</p>