Javascript Radio Button Won't Print Value

March 27, 2022

I have a radio button selection, and I want to print the selected value. Here is my code for that:

function submit() {
  let Q1 = document.querySelector('input[name="question1Selection"]:checked').value;
  console.log(Q1)
}

<div id="QUESTION1" class="questionContainer">
  <h1 class="questionNumTitle">Question 1</h1>
  <h3 class="questionQuery">How old are you?</h3>

  <div class="questionSelection">
    <div class="selectionContainer">
      <input type="radio" id="ageQ1" name="question1Selection">
      <label for="ageQ1">0-18 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ2" name="question1Selection">
      <label for="ageQ2">19-40 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ3" name="question1Selection">
      <label for="ageQ3">41-64 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ4" name="question1Selection">
      <label for="ageQ4">65+ years old</label>
    </div>
  </div>
</div><br><br>

<input type="submit" onclick="submit()" value="Submit"/>

However, when you select a value and press "submit," the console mysteriously just prints "on." What is going on here? Why won’t it print the value?

Thanks for any help.

>Solution :

Your value is stored inside the label not radio button.

The input has not value which is default on

You could try to get index of the checked item and return the label value.

Use + to get sibling label of input button

function submit(){ document.querySelectorAll('input[name="question1Selection"]').forEach((i,index)=>{
if(i.checked) console.log(document.querySelectorAll('input[name="question1Selection"] + label')[index].textContent)
});
}

<div id="QUESTION1" class="questionContainer">
  <h1 class="questionNumTitle">Question 1</h1>
  <h3 class="questionQuery">How old are you?</h3>

  <div class="questionSelection">
    <div class="selectionContainer">
      <input type="radio" id="ageQ1" name="question1Selection">
      <label for="ageQ1">0-18 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ2" name="question1Selection">
      <label for="ageQ2">19-40 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ3" name="question1Selection">
      <label for="ageQ3">41-64 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ4" name="question1Selection">
      <label for="ageQ4">65+ years old</label>
    </div>
  </div>
</div><br><br>

<input type="submit" onclick="submit()" value="Submit"/>