Is there a way for me to obtain the present value of the chosen button in the list below?

Question

Is there a way for me to obtain the present value of the chosen button in the list below?

I am working with a group of three buttons labeled English, Hindi, and Urdu. How can I retrieve the value of the selected button in a JavaScript function?

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> English
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Hindi
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Urdu
  </label>
</div>

javascript html css

Answer 1

Answer №1

To start, assign values to your radio buttons and then select the buttons to add an event listener. You can retrieve the value of the button from the event target like this:

let buttons = document.getElementsByName("options");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click",function(event) {         
       console.log(event.target.value);
    });
}

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked value="English">English
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"value="Hindi">Hindi
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" value="Urdu">Urdu
  </label>
</div>

Answer 2

To start, assign values to your radio buttons and then select the buttons to add an event listener. You can retrieve the value of the button from the event target like this:

let buttons = document.getElementsByName("options");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click",function(event) {         
       console.log(event.target.value);
    });
}

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked value="English">English
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"value="Hindi">Hindi
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" value="Urdu">Urdu
  </label>
</div>

Answer 3

Answer №2

You should give this a shot: https://jsfiddle.net/3tazs5h9/

 $('input[name="choices"]').change(function(){
   alert($(this).val());
   $(this).parents('.btn-group').find('input[type="radio"]').attr('disabled', 
   'disabled');
 });

Answer 4

You should give this a shot: https://jsfiddle.net/3tazs5h9/

 $('input[name="choices"]').change(function(){
   alert($(this).val());
   $(this).parents('.btn-group').find('input[type="radio"]').attr('disabled', 
   'disabled');
 });

Is there a way for me to obtain the present value of the chosen button in the list below?

Answer №1

Answer №2

Similar questions

Guide to uploading a file into a MongoDB database with the help of Mongoose

Utilize generated styling data bindings when referencing assets

Selecting the first child within a table using the first-child

Delete one item from a group of objects[]

The powerful combination of Ajax and Django creates a dynamic Like button

Ways to retrieve a specific value in an array of objects

Leveraging IPFS to host a CSS stylesheet

Attempting to incorporate a new CSS sub menu alongside the current one

Having trouble loading image on web application

Ways to change the visibility of a view depending on a state in vuex?

Tips for customizing the color of pagination in bootstrap

Enhance the functionality of NodeJS core applications

Alert-Enabled Random Number Generation Tool

Using Javascript Timers in an ASP.NET AJAX application with the pageLoad() function

Personalized service implemented in Angular's .config settings

What causes the failure of $event binding when using RowGroup tables with PrimeNG?

What is the best way to generate a div with a dynamically changing variable as its ID?

What could be causing my webpage to freeze every time a filter button is selected?

JavaScript source control tool

What's the best way to enable touch scrolling for items within a div container?