Showing the chosen value using JavaScript

Question

Showing the chosen value using JavaScript

Using the Bootstrap btn-group to select a single value, how can I display the selected value? Here is an example of my code:

<div class="input-group">
    <div id="radioBtn" class="btn-group">
        <a class="btn btn-primary btn-sm active" data-toggle="fun" data-title="Y">YES</a>
        <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
        <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
    </div>
    <input type="hidden" name="fun" id="fun">
</div>

And here is the corresponding JavaScript:

$('#radioBtn a').on('click', function(){
  var selected = $(this).data('title');
  var toggle = $(this).data('toggle');
  $('#'+toggle).prop('value', selected);

 $('a[data-toggle="'+toggle+'"]').not('[data-title="'+selected+'"]').removeClass('active').addClass('notActive');
 $('a[data-toggle="'+toggle+'"][data-title="'+selected+'"]').removeClass('notActive').addClass('active');
})

javascript twitter-bootstrap-3

Answer 1

Answer №1

Clean up your code by eliminating the spaces in your data- title attribute in both the HTML and JS, as these are causing errors.
Insert a
```
<div id="display"></div>
```
somewhere in your HTML and customize its style to your liking.
Include this line in your JavaScript click handler: $('#display').html(sel);

Check out a demo here.

If you would rather display the text of the radio button instead of the value, use

$('#display').html($(this).html());

instead of step 3.

Task completed.

Answer 2

Clean up your code by eliminating the spaces in your data- title attribute in both the HTML and JS, as these are causing errors.
Insert a
```
<div id="display"></div>
```
somewhere in your HTML and customize its style to your liking.
Include this line in your JavaScript click handler: $('#display').html(sel);

Check out a demo here.

If you would rather display the text of the radio button instead of the value, use

$('#display').html($(this).html());

instead of step 3.

Task completed.

Answer 3

Answer №2

If you're looking to retrieve the value or text from a clicked button in a button group, here's an example of how I achieve this:

HTML

  <div id="aBtnGroup" class="btn-group">
    <button type="button" value="A" class="btn btn-default">Option A</button>
    <button type="button" value="B" class="btn btn-default">Option B</button>
    <button type="button" value="C" class="btn btn-default">Option C</button>
  </div>
  <p>
  <div>Selected Value:  <span id="selectedValue"></span></div>

JS

$(document).ready(function() {

  // Capture click event, store button in variable, and retrieve values from that variable
  $('#aBtnGroup button').on('click', function() {
    var selectedBtn = $(this);

    selectedBtn.addClass('active').siblings().removeClass('active');
    var buttonText = selectedBtn.text();
    var buttonValue = selectedBtn.val();
    console.log(buttonText + ' - ' + buttonValue);

    $('#selectedValue').text(buttonValue);
  });

  // Use this to set default value upon document load
  // It will trigger the above click event to update accordingly
  $('#aBtnGroup button[value="B"]').click();
});

CONSOLE OUTPUT

Option A - A
Option B - B
Option C - C

I hope this explanation is helpful!

Sample Link

Answer 4

If you're looking to retrieve the value or text from a clicked button in a button group, here's an example of how I achieve this:

HTML

  <div id="aBtnGroup" class="btn-group">
    <button type="button" value="A" class="btn btn-default">Option A</button>
    <button type="button" value="B" class="btn btn-default">Option B</button>
    <button type="button" value="C" class="btn btn-default">Option C</button>
  </div>
  <p>
  <div>Selected Value:  <span id="selectedValue"></span></div>

JS

$(document).ready(function() {

  // Capture click event, store button in variable, and retrieve values from that variable
  $('#aBtnGroup button').on('click', function() {
    var selectedBtn = $(this);

    selectedBtn.addClass('active').siblings().removeClass('active');
    var buttonText = selectedBtn.text();
    var buttonValue = selectedBtn.val();
    console.log(buttonText + ' - ' + buttonValue);

    $('#selectedValue').text(buttonValue);
  });

  // Use this to set default value upon document load
  // It will trigger the above click event to update accordingly
  $('#aBtnGroup button[value="B"]').click();
});

CONSOLE OUTPUT

Option A - A
Option B - B
Option C - C

I hope this explanation is helpful!

Sample Link

Showing the chosen value using JavaScript

Answer №1

Answer №2

Similar questions

Error: Variable 'err' is undefined in Node.js

Creating a route-guard in a Vue.js/Firebase authentication system for secure navigation

"Getting an 'Undefined index' error while accessing a JavaScript variable in PHP

Troubles with Angular elements not aligning correctly when using the "display: block" property

Access a dynamic link through JavaScript after receiving it from an AJAX response

Aligning the text vertically in the center while also rotating it 90 degrees to the right, alongside blocking the image and icon elements

Arrange the objects in an array using a priority array as a guideline

Sending JavaScript variables to an external CSS file

Include a suffix after the user's input in a Material UI TextField

What is the method for adding <option> tags to a <select> statement using a for loop?

Prevent selection, enable copying and pasting

"Sorry, but there seems to be an issue with

Guide on setting up and duplicating a template in Vue.js

Mongoose failing to persist subdocument

Troubleshooting: Issues with jQuery's add/removeClass function and AJAX functionality

Enable hyperlink to open in a new browser tab after user clicks on button embedded inside an iFrame

Tips for updating a specific portion of a component in react.js

javascript utilize function parameters to pass control names

Retrieve the content of all textareas in a specific order that can be

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template