Javascript Radio Button Won't Print Value

Question

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.

None of the ``s have a `value` attribute. `"on"` is the default value. Read the [documentation](//developer.mozilla.org/en/docs/Web/HTML/Element/input/radio#additional_attributes). — Sebastian Simon, Mar 27 '22 at 18:33
Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Mar 27 '22 at 18:39

score 1 · Accepted Answer · answered Mar 27 '22 at 18:37

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

If you just want the text content of the label, a much easier solution would be to remove all `for` attributes from ``s and all `id` attributes from ``s and nest each `` inside their respective ``. Then it’s just `theSubmitButton.addEventListener("click", () => console.log(document.querySelector("#QUESTION1 input[name='question1Selection']:checked")?.closest("label").textContent.trim() ?? "No selection."))`. — Sebastian Simon, Mar 27 '22 at 18:42

Javascript Radio Button Won't Print Value

1 Answers1