Cannot retrieve value of selected radio button

Question

I used Bootstrap to create the radio buttons:

<div id="heightForm">
  <legend class="h">
    Height:
    <div class="form-check form-check-inline weightChoose commonRadio">
      <div class="form-check form-check-inline kg">
        <input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="METER" id="h1"/>
        <label class="form-check-label lbl" for="h1">Meter</label>
      </div>
      <div class="form-check form-check-inline pound">
        <input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="FEET" id="h2"/>
        <label class="form-check-label lbl" for="h2">Feet</label>
      </div>
    </div>
  </legend>
</div>

i wanted to console.log(heightIn);

where

var heightIn = $('input[name="heightButtonS"]:checked').val();

but it gives undefined.

i also tried:

var heightIn = $('input[name=heightButtonS]:checked').val();
var heightIn = $('input[name="heightButtonS"]:checked').value();

This does return the value when there is an attribute "checked" in one of the buttons. Even on selecting the other button it returns the value of that assigned button. I want it to retrieve value for the button which is selected.

Does this not work anymore?

When are you assigning the variable? You need to wait for the user to select one of the buttons. Please post a minimal reproducible example. — Barmar
– Barmar, Commented May 15 at 16:46
Are you including jquery? You didn't tag it in your question. — mykaf
– mykaf, Commented May 15 at 17:00
It will be undefined when $('input[name="heightButtonS"]:checked').length === 0 - ie before the user has selected one of the radios (as noted above, just adding the .length confirmation) — fdomn-m
– fdomn-m, Commented May 15 at 17:00
@MisterJojo, a form is only necessary if submitting it traditionally. If you're using ajax or not submitting, a form is not necessary. — mykaf
– mykaf, Commented May 15 at 17:11

Mister Jojo · Accepted Answer · 2025-05-15 17:26:42Z

1

A simple way to code this

const myForm = document.querySelector('#my-form');

myForm.oninput = e =>
  {
  console.clear();
  console.log( myForm.heightButtonS.value );
  }

label { display: block; }

<form id="my-form">
  <fieldset>
    <legend> Height: </legend>
    <label>
      <input type="radio" name="heightButtonS" value="METER">
      Meter
    </label>
    <label>
      <input type="radio" name="heightButtonS" value="FEET" >
      Feet
    </label>
  </fieldset>
</form>

answered May 15 at 17:26

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lajos Arpad · Accepted Answer · 2025-05-15 17:20:27Z

You need to make sure you included jQuery and Bootstrap as well as create a change event for the elements whose value you want to track and get the value inside the event handler.

$('input[name="heightButtonS"]').change(function() {
    console.log(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
<div id="heightForm">
  <legend class="h">
    Height:
    <div class="form-check form-check-inline weightChoose commonRadio">
      <div class="form-check form-check-inline kg">
        <input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="METER" id="h1"/>
        <label class="form-check-label lbl" for="h1">Meter</label>
      </div>
      <div class="form-check form-check-inline pound">
        <input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="FEET" id="h2"/>
        <label class="form-check-label lbl" for="h2">Feet</label>
      </div>
    </div>
  </legend>
</div>

chrwahl · Accepted Answer · 2025-05-16 17:34:38Z

You get the value of a radiolist by it's value property. Don't use a queryselector (jQuery etc.) for this.

In the case of the radio buttons, the queryselector will just get one of the elements, whereas form.heightButtonS is the collection aka. a radioList, and the radioList has the selected value. Actually (in the following example), you can also get the value with e.target.value now that the input element that was selecte is tied to the change event.

document.forms.form01.addEventListener('change', e => {
  let form = e.target.form;
  console.log(form.heightButtonS.value, e.target.value);
});

<form name="form01">
  <div id="heightForm">
    <legend class="h">
      Height:
      <div class="form-check form-check-inline weightChoose commonRadio">
        <div class="form-check form-check-inline kg">
          <input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="METER" id="h1"/>
          <label class="form-check-label lbl" for="h1">Meter</label>
        </div>
        <div class="form-check form-check-inline pound">
          <input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="FEET" id="h2"/>
          <label class="form-check-label lbl" for="h2">Feet</label>
        </div>
      </div>
    </legend>
  </div>
</form>

Collectives™ on Stack Overflow

Cannot retrieve value of selected radio button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related