Value of checkbox is [object HTMLInputElement]

Question

I have two forms right next to each other.

This right here is Form one

<form>
    <input type="radio" id="genderOne" name="genderOne" value="Mann"><label for="genderOne">Maennlich</label>
    <input type="radio" id="genderTwo" name="genderOne" value="Frau"><label for="genderTwo">Weiblich</label><br><br>
    <input type="checkbox" id="ageCheck" id="ageCheck" name="ageCheck"><label for="ageCheck">Bist du ueber 18?</label>
</form>

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".

Now I want, if everything is filled in correctly to open up a php.site with the parameters the user typed in.

Everything works, except for the second form, but only the gender.

This is the JavaScript-code for that part

if(document.getElementById('genderOne').checked || document.getElementById('genderTwo').checked)
        {
            if(document.getElementById('genderOne').checked)
            {
                var genderOne = $('#genderOne').val();
                urlString += "&genderOne=" + genderOne;
            }
            if(document.getElementById('genderTwo').checked)
            {
                var genderTwo = $('#genderTwo').val();
                urlString += "&genderOne=" + genderTwo;
            }
        }
        if(document.getElementById('genderThree').checked || document.getElementById('genderFour').checked)
        {
            if(document.getElementById('genderThree').checked)
            {
                var genderOne = $('#genderThree').val();
                urlString += "&genderTwo=" + genderThree;
            }
            if(document.getElementById('genderFour').checked)
            {
                var genderTwo = $('#genderFour').val();
                urlString += "&genderTwo=" + genderFour;
            }
        }

And just to be sure, this is the second form

<form>
                    <input type="radio" id="genderThree" name="genderTwo" value="Mann"><label for="genderThree">Maennlich</label>
                    <input type="radio" id="genderFour" name="genderTwo" value="Frau"><label for="genderFour">Weiblich</label><br><br>
                    <input type="checkbox" id="ageCheckTwo" id="ageCheckTwo" name="ageCheckTwo"><label for="ageCheckTwo">Ist er/sie ueber 18?</label>
                    </form>

But, the URL is now, when I checked all parameters like this:

http://localhost/mojoGerman/questions.php?nameOne=fdgh&nameTwo=hj&genderOne=Mann&genderTwo=[object HTMLInputElement]

While it should display the gender of the second person at the end. What am I doing wrong?

Answer 1

Simple typographic errors here:

        if(document.getElementById('genderThree').checked)
        {
            var genderThree = $('#genderThree').val();
            urlString += "&genderThree=" + genderThree;
        }
        if(document.getElementById('genderFour').checked)
        {
            var genderFour = $('#genderFour').val();
            urlString += "&genderFour=" + genderFour;
        }

This is why cutting and pasting is a bad idea . Make yourself a simple function:

function addIfChecked(name) {
  var val = $('#' + name).val();
  return val ? "&" + name + "=" + encodeURIComponent(val) : '';
}

urlString += addIfChecked("genderOne") + 
  addIfChecked("genderTwo") +
  addIfChecked("genderThree") + 
  addIfChecked("genderFour");

or something like that. Better yet, give the checkboxes a class so that you can find them with a selector and iterate over them via jQuery.

Answer 2

var genderOne = $('#genderThree').val(); // get value in genderThree here
urlString += "&genderTwo=" + genderThree;

Try this -

if(document.getElementById('genderThree').checked) {
         var genderThree = $('#genderThree').val();
         urlString += "&genderTwo=" + genderThree;
 }
if(document.getElementById('genderFour').checked) {
         var genderFour = $('#genderFour').val();
         urlString += "&genderTwo=" + genderFour;
 }

Answer 3

The issue is using the wrong variable names for genderThree and genderFour

But you could simplify the whole thing to

$('input[type="radio"][name^="gender"]:checked').each(function(){
   urlString += '&' + this.name + '=' + this.value;
});

Answer 4

I have not understood completely what are you trying to do , but seeing at your code, I think It can be optimised by using different practice

<form>
    <input type="radio" id="genderOne" name="genderOne[]" value="Mann"><label for="genderOne">Maennlich</label>
    <input type="radio" id="genderTwo" name="genderOne[]" value="Frau"><label for="genderTwo">Weiblich</label><br><br>
    <input type="checkbox" id="ageCheck" id="ageCheck" name="ageCheck"><label for="ageCheck">Bist du ueber 18?</label>
</form>

If you want to have same key on your query string genderOne , you can explicity declare your name as array in the name attribute. On your php script you can get this value using GET method to obtain those values

//php
echo $_GET['genderOne'][0];//returns first checked gender value
echo $_GET['genderOne'][1];//returns 2nd checked gender value 

You don't even need the javascript for this if I understood what you are trying to achieve.