CODEWITHSUNDEEP
javascripthtml
Chris Ho
Chris Ho

Reputation: 27

Get the text from label of Radiobutton

I have a couple of radio button below. I want to get the text from the radio button I have chosen. For example: House Espresso or Guest Espresso. I have tried to use getElementsByName and for loop to get the checked value but it seems to return nothing. Here is my HTML code:

<div class="type">
                        <p>Type<p>
                        <input type="radio" id="houseEspresso" name="singleEspresso" checked="checked"onclick="addProduct(this)">
                        <label for="houseEspresso">House Espresso</label><br>
                        <input type="radio" id="guestEspresso" name="singleEspresso" onclick="addProduct(this)">
                        <label for="guestEspresso">Guest Espresso</label><br> 
                    </div>

And here is my Javascript code:

var type = document.getElementsByName("singleEspresso")
    for (var i=0; i<type.length; i++){
        if(type[i].checked){ 
            var title_type=type[i].innerText
            console.log(title_type)
        }
    }

Can anyone give me an idea to fix it? Thank you!

Upvotes: 0

Views: 1246

Answers (3)

tromgy
tromgy

Reputation: 5833

The problem is that you're trying to get innerText from the <input>, which has none. You need to get the <label>'s text:

for (var i=0; i<type.length; i++){
      if(type[i].checked){ 
            var title_type=type[i].nextElementSibling.innerText
            console.log(title_type)
        }
    }

Upvotes: 1

Anderson Vanzo
Anderson Vanzo

Reputation: 30

You can set a value to input radio: <input type="radio" value="1">
Then just get the buttons and see which one is checked, like this:

let house = document.getElementById('houseEspresso');
let guest = document.getElementById('guestEspresso');
if (house.checked) {
  console.log(house.value);
} else if (guest.checked) {
  console.log(guest.value);
}

However, I would recommend that you take a look at jQuery so you can make it easier:

$("input[name='singleEspresso']:checked").val();

Upvotes: 0

Yuriy Yakym
Yuriy Yakym

Reputation: 3921

You need to find a checked input, for that you can use :checked css selector. Then you can pick any value from input DOM element which ties it to label (in your case it's id). And basing on the id you can find corresponding label.

  const selectedRadioInput = document.querySelector('[name=singleEspresso]:checked');
  const inputId = selectedRadioInput.id;
  const label = document.querySelector(`[for=${inputId}]`);
  console.log(label.innerText);

Working demo: https://jsfiddle.net/yo18mx9k/2/

Upvotes: 0

Related Questions