I'm creating radio buttons and I'd like to be able to set the contents of results to the selected button. WITHOUT a submit button.
document.getElementById("results").innerHTML = NONE or A or B
I see a lot of posts on how to do this with a SUBMIT button but I want this to be automatically detected and have struggled to find a relating post. Any help appreciated!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="NONE" autocomplete="off">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="A" autocomplete="off">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="B" autocomplete="off">B
</label>
</div>
<div id="results"></div>
$( document ).ready(function() {
console.log( "ready!" );
$("input[name='test']").change(function(){
$("#results").text($("input[name='test']:checked").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testA" autocomplete="off" value="A">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testB" autocomplete="off" value="B">B
</label>
</div>
<div id="results"></div>
Just set up click events for the buttons and populate the results area in the event callback. No JQuery or Bootstrap is required.
But, radio buttons need to have their value attribute configured so that clicking one has meaning over the others. Also, autocomplete is irrelevant with radio buttons.
// Get a reference to the result area element
let results = document.getElementById("results");
// Set up a click handler on the parent of the radio buttons so that
// any clicks to the descendants will bubble up to the parent
document.querySelector("div.btn-group").addEventListener("click", function(evt){
// Check if a radio button triggered the event
if(evt.target.type === "radio"){
// Populate the results area with the value of the clicked element
results.textContent = evt.target.value;
}
});
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" value="NONE">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" value="A">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" value="B">B
</label>
</div>
<div id="results"></div>
Here, I added a button so you can get the status when clicked. You should add a value attribute to your input fields.
$(document).ready(function(){
$(".detect").click(function(){
var radioValue = $("input[name='test']:checked").val();
if(radioValue){
$(".results").text(radioValue);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="NONE" autocomplete="off">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="A" value="A" autocomplete="off">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="B" value="B" autocomplete="off">B
</label>
</div>
<div class="results"></div>
<button class="detect">Detect</button>
If you want to use the jQuery, you can take advantage of the delegate method.
https://api.jquery.com/delegate/#delegate-selector-eventType-handler
Using the delegate, you'll set just one handler that will deal with the value change inside the radio button group. This way the event will be handled even if the value inside the radio buttons group will change "programmatically", that is as a result of another code running on your website as long as that code will dispatch the "change" event.
Remember to add the id on the radio buttons container and value attributes to the HTML structure (you will need the value attribute anyway on the server-side).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
$("#option").delegate("[type=radio]", "change", function(event) {
$("#results").text( $(event.target).val() );
});
});
</script>
<div id="option" class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="NONE" value="NONE" autocomplete="off">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="A" value="A" autocomplete="off">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="B" value="B" autocomplete="off">B
</label>
</div>
<div id="results"></div>
Related
I wish to emulate the behaviour of radio buttons withing a bootstrap form-group so a line in a form has several buttons ("btn btn-success" for example), with the buttons being able to be "selected", but only one of them can be selected at a given moment.
I want a Output like this:
But I am getting this:
Also I am not able to select the Smoking button
The Code for the Following is :
<div class="form-group row">
<label for="section" class="col-12 col-md-2">Section</label>
<div class="col-md-10">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Non-
Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off">Smoking
</label>
</div>
</div>
</div>
Adding btn-group-toggleto your btn-group div will solve the issue.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="form-group row">
<label for="section" class="col-12 col-md-2">Section</label>
<div class="col-md-10">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Non-
Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off">Smoking
</label>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</html>
try this
input[type="radio"] {
visibility:hidden;
}
https://jsfiddle.net/auo9Ly54/
remove autocomplete="off" checked in:
<input type="radio" name="options" id="option1" autocomplete="off" checked>
I have this (bootstrap 4) button group as follows:
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>
I want to add a JS onchange listener and find out which one was pressed (e.g. Second, Minute, or Hour). I don't want to add a listener to each button because there are a lot of buttons like these on my page.
I've tried adding something like this:
$('#timeselector').on("change", function() {
alert(this)
});
But that doesn't work. If I change "change" to "click", it does alert, but it doesn't give me which was selected.
Can someone help with this? Thank you!
You need to use click instead an to attach the event to the input's inside your div :
$('#timeselector input')
$('#timeselector input').on("click", function() {
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>
I've got 4 labels that act as radio buttons. When a label is active it will have the class active. I want to find out which label has the active class when one of the labels is clicked. I've tried hasClass(), but that is executed before the classes are changed. Can someone tell me how I can solve this problem? Should I create a seperate method for every label?
$("#elements").click(function() {
if ($("#eventelement").hasClass("active")) {
console.log("event activated")
}
if ($("#roleelement").hasClass("active")) {
console.log("role activated")
}
// [...]
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>
You dont need a class to find active option. You can just use :checked selector.
Here is working example.
$("#elements label").click(function () {
var currentValue = $("input[name=type]:checked").val();
$(this).addClass("active");
$(this).siblings().removeClass("active");
})
label {
color: blue;
}
label.active {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off"> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>
Code to check both previous-active-label and current-active-label
Working snippet:-
$(document).ready(function(){
$('#elements label').on('click',function(){
var prev = $('label.active').children('input[type="radio"]').val();
var current = $(this).children('input[type="radio"]').val();
$('#elements label').removeClass('active');
$(this).addClass('active');
alert("previous active label is "+prev);
alert("current active label is "+current);
});
});
.active{
color:green;
font-size:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>
Found a solution inadvertently, wrapping the label selection in setTimeout delays it just enough to return the proper one.
$("#elements").on("click", function() {
setTimeout(function() {
var l = $("#elements label.active");
console.log(l.get()[0].id);
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>
Bind to radio input change and check which one is selected:
$("#elements input").on("change", function() {
var activeLabel = $("#elements input:checked").parent();
console.log(activeLabel.attr('id') + ' activated');
});
Please note, one can change the selection using keyboard as well, therefor click is not enough.
Also on JS Fiddle.
I'm sure what I'm trying to do is quite simple however I require some help.
I have three radio buttons;
active
inactive
not found
Id like to change the (Bootstrap v3) class of the buttons when they are clicked. They all have a default class of btn-default. However when clicked i'd like then to have the following classes;
active (btn-success)
inactive (btn-warning)
not found (btn-danger)
Only one should be selected at any one time, and only one should be coloured at any one time.
My code so far is below, I think I'm nearly there. If somebody could offer some advice that would be great.
Here is a link to my jsfiddle.
$(document).ready(function() {
$('#option1').change(function() {
$(this).removeClass("btn-default").addClass("btn-success");
});
$('#option2').change(function() {
$(this).removeClass("btn-default").addClass("btn-warning");
});
$('#option3').change(function() {
$(this).removeClass("btn-default").addClass("btn-danger");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
</label>
</div>
You can have a click event on btn-default instead and have only one handler:
JSFiddle
$(".btn-default").on("click", function() {
var classArr = ["btn-success", "btn-warning", "btn-danger"];
$(".btn-default").removeClass(classArr.toString().replace(/,/g," "));
var value = $(this).find("input[name='options']").val();
$(this).addClass(classArr[value - 1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
</label>
</div>
The code you have is not changing the classes because you are targetting the wrong elements. However, the other answers failed to take into account that you want only one to be coloured at any one time. Simply include the removing classes and adding the default classes back on changes of each.
Try this:
$(document).ready(function() {
$('#option1').change(function() {
$(this).parent().removeClass("btn-default").addClass("btn-success");
$('#option2').parent().removeClass("btn-warning").addClass("btn-default");
$('#option3').parent().removeClass("btn-danger").addClass("btn-default");
});
$('#option2').change(function() {
$(this).parent().removeClass("btn-default").addClass("btn-warning");
$('#option1').parent().removeClass("btn-success").addClass("btn-default");
$('#option3').parent().removeClass("btn-danger").addClass("btn-default");
});
$('#option3').change(function() {
$(this).parent().removeClass("btn-default").addClass("btn-danger");
$('#option1').parent().removeClass("btn-success").addClass("btn-default");
$('#option2').parent().removeClass("btn-warning").addClass("btn-default");
});
});
Man, first of all, you should include bootstrap.js after jquery.js
Second, your selector selects child element, but you need to change class of parent. So you need to use parent() here
Code snippet below:
$(document).ready(function() {
$('[id^="option"]').change(function() {
$('.btn-group > label').removeClass().addClass('btn btn-default');
});
$('#option1').change(function(){
$(this).parent().removeClass('btn-default').addClass("btn-success");
});
$('#option2').change(function(){
$(this).parent().removeClass('btn-default').addClass("btn-warning");
});
$('#option3').change(function(){
$(this).parent().removeClass('btn-default').addClass("btn-danger");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
</label>
</div>
$(document).ready(function() {
$('#option1 ,#option2, #option3').change(function() {
$('#option1').parent().removeClass('btn-success').addClass("btn-default")
$('#option2').parent().removeClass('btn-warning').addClass("btn-default")
$('#option3').parent().removeClass(' btn-danger').addClass("btn-default");
if($(this).attr('id') == 'option1')
$(this).parent().removeClass("btn-default").addClass("btn-success");
else if($(this).attr('id') == 'option2')
$(this).parent().removeClass("btn-default").addClass("btn-warning");
else
$(this).parent().removeClass("btn-default").addClass("btn-danger");
});
});
Remove all classes currently applied, once that's done, figure out which button has been clicked and apply that options CSS. In regards to why the CSS wasn't changing, you was not targeting the labels in where the btn-"insert bootstrap button styling here" was applied, by calling parent(), you go up to the level which controlled the CSS.
In addition, generalise the removal:
$(document).ready(function() {
$('#option1 ,#option2, #option3').change(function() {
removeAll()
});
$('#option1').change(function() {
$(this).parent().removeClass("btn-default").addClass("btn-success");
});
$('#option2').change(function() {
$(this).parent().removeClass("btn-default").addClass("btn-warning");
});
$('#option3').change(function() {
$(this).parent().removeClass("btn-default").addClass("btn-danger");
});
});
function removeAll()
{
$('#option1').parent().removeClass('btn-success').addClass("btn-default");
$('#option2').parent().removeClass('btn-warning').addClass("btn-default");
$('#option3').parent().removeClass(' btn-danger').addClass("btn-default");
};
You could use Custom Data Attribute like this
$('.btn').click(function() {
var btn = $(this).data('btn');
$(this).addClass(btn).removeClass('btn-default');
$(this).siblings().each(function() {
$(this).removeClass($(this).data('btn')).addClass('btn-default');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" data-btn="btn-success">
<input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
</label>
<label class="btn btn-default" data-btn="btn-warning">
<input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
</label>
<label class="btn btn-default" data-btn="btn-danger">
<input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
</label>
</div>
The issue is you'r binding your change event handler to the input's, but the <label>'s are the ones that are styled with btn-default.
Change the references to $(this) to $(this).parent() and it will work as intended.
Second, your selector selects child element, but you need to change class of parent. So you need to use parent() here
To get only one to be activate, you must remove class from other button. this is the code
$('.btn').removeClass().addClass('btn').addClass('btn-default');
$(document).ready(function () {
$('#option1').change(function () {
$('.btn').removeClass().addClass('btn').addClass('btn-default');
$(this).parent().removeClass("btn-default").addClass("btn-success");
});
$('#option2').change(function () {
$('.btn').removeClass().addClass('btn').addClass('btn-default');
$(this).parent().removeClass("btn-default").addClass("btn-warning");
});
$('#option3').change(function () {
$('.btn').removeClass().addClass('btn').addClass('btn-default');
$(this).parent().removeClass("btn-default").addClass("btn-danger");
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
</label>
</div>
I am have some trouble with setting the value of a hiddenfield with a boostrap radio button. here is the button group with the radio buttons and the hiddenfield.
<div class="myRow">
<div class="smallCol">
<div class="btn-group hiddenRFIDValue" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="alwaysRFID" autocomplete="off">
Always
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="neverRFID" autocomplete="off">
Never
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="sometimesRFID" autocomplete="off">
Sometimes
</label>
</div>
</div>
</div>
</div>
<asp:HiddenField ID="hiddenRFIDValue" runat="server" />
Here is the script that i am trying to set the value with.
<script>
$(".hiddenRFIDValue .btn").click(function () {
// whenever a button is clicked, set the hidden helper
$("#hiddenRFIDValue").val($(this).text());
});
</script>
Hope one of you can help with it. Thanks
I fixed it! when the html is generated it changed the id of the hidden field so the scipt needed to look like this.
<script>
$(".hiddenRFIDValue .btn").click(function () {
$("#MainContent_hiddenRFIDValue").val($(this).text());
});
</script>