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>
Related
I am trying to change the Bootstrap v5 class of the buttons when they are clicked. They all have a same background-color constant (#cd6133). However when clicked i'd like then to have the following colors; and also radio button to be hidden and bootstrap button to be visible with provided colors
btn-default (#cd6133)
Entry (#05c46b)
Proffessional (#2c2c54)
Excutive (#227093)
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="change" id="entry" value="1" autocomplete="off">Entry
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="proffessional" value="2" autocomplete="off">Proffessional
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="excutive" value="3" autocomplete="off">Excutive
</label>
</div>
<script>
$("#cd6133").on("click", function() {
var classArr = ["#05c46b", "#2c2c54", "#227093"];
$("#cd6133").removeClass(classArr.toString().replace(/,/g," "));
var value = $(this).find("input[name='change']").val();
$(this).addClass(classArr[value - 1]);
});
</script>
Here is the code I'm using to try to render a group of button elements vertically.
<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 1
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
The trouble is the buttons are rendered side-by-side, instead. Am using bootstrap3.
The only way I have managed to get them to render vertically, is by including radio styles, which I want to avoid. And I want to use input fields so I can dynamically set/reset checked values. I will be using dom-selectors to alter the state of the radio group elements.
Can anyone offer some idea as to how to do this?
According to the docs on https://getbootstrap.com/docs/3.3/components/#btn-groups you should change your first line from
<div class="btn-group" ...
to
<div class="btn-group-vertical" ...
put the buttons inside a div block they will get vertically align
<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
</div>
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>
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'm trying to make a work a simple task without lucky, I'm trying to check an input radio by clicking on a button. Each input radio as their button. How do you achieve that in angular way?
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="1">
</button>
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="2">
</button>
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="3">
</button>
How you can see I put the input inside the element button, if you have different thoughts please correct me.
Set the associated ng-model equal to the value of the radio you want selected:
<button class="btn btn-primary" ng-click="color = 1">
<input type="radio" name="radioGroup" ng-model="color" value="1">
</button>
Use <label> and style it as button:
<label class="btn btn-default"> Button 1
<input type="radio" ng-model="color" value="1">
</label>
<label class="btn btn-default"> Button 2
<input type="radio" ng-model="color" value="2">
</label>
and add css to hide the input[type="radio"].
Not everything needs Angular.