I have these buttons inside a form. How can I know which ones were selected when the user submits the form?
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<input type="submit value="submit"></input>
</form>
Your button group is a bootstrap style group and means nothing on the server side.
Your inputs will need to be named in order to produce a value from the form's postback.
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input name="check1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input name="check2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input name="check3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
Related
I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/
Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
I'm trying to get the attribute value in jQuery, but isn't working, My code reports undefined. Here is an example:
console.log($(".btn-causas input").find(".active input").attr('d'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert">Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike">Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow">I DON'T
</label>
</div>
The selector could be simply done like :
$(".btn-causas .active input").attr('d');
Hope this helps.
console.log( $(".btn-causas .active input").attr('d') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
The best way to do that is that you rename the attribute d for data-name and you can get very easy that value with this code:
Html:
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" data-name="dontknow">
Jquery:
var value = $('input[name="options"]:checked').data('name');
alert(value);
This is the best way to do that, this code retrieve the value of a checked input radio with the attribute data-name
Regards!
You don't have active class but as per my understanding you are trying to get selected radio buttons' attribute so try :checked on input
You're specifying wrong selector .btn-causas input, instead use this .btn-causas, See the code below:
Make jQuery find the inputs inside div - .btn-causas instead of finding it inside inputs, as you've done. Inputs doesn't contains a child elements, so you can't find elements inside it.
$(function() {
console.log($(".btn-causas").find(".active input").attr('d'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
Hope this helps!
My goal is to run a function depending upon what radio button in a group is selected. Using other posts I was able to implement the bellow scripts. Here are the errors I am encountering:
1) The initial button that I declare to be checked by default does not call a function. If I remove the checked attribute from the button it functions as the others do.
2) Each button works only once. For example if I click button two, it fires the appropriate function. Then when button 3 is clicked, it too functions successfully. The problem is when I then try to go back to button 2. It will not fire a second time.
JQUERY
$("#btn-group-data :input").on("change",function () {
switch (this.value) {
case "radar":
console.log(this.value);
//do stuff...
break;
case "watches":
console.log(this.value);
//do stuff...
break;
case "warnings":
console.log(this.value);
//do stuff...
break;
case "temp":
console.log(this.value); // points to the clicked input button
//do stuff...
break;
case "precip":
console.log(this.value); // points to the clicked input button
//do stuff...
break;
case "snow":
console.log(this.value); // points to the clicked input button
//do stuff...
break;
}
});
BUTTON-HTML
<div id="map-container" class="container-fluid">
<div id="map-div">
<div id="btn-group-data" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="radar" value="radar" id="radar" autocomplete="off" checked="" > Radar
</label>
<label class="btn btn-primary ">
<input type="radio" name="watches" value="watches" id="watches" autocomplete="off"> Watches
</label>
<label class="btn btn-primary">
<input type="radio" name="warnings" value="warnings" id="warnings" autocomplete="off"> Warnings
</label>
<label class="btn btn-primary">
<input type="radio" name="temp" value="temp" id="temp" autocomplete="off"> Temperature
</label>
<label class="btn btn-primary">
<input type="radio" name="precip" value="precip" id="precip" autocomplete="off"> Precipitation
</label>
<label class="btn btn-primary">
<input type="radio" name="snow" value="snow" id="snow" autocomplete="off"> Snow
</label>
</div>
</div>
</div>
You should give the same name to all your inputs like this
<div id="map-div">
<div id="btn-group-data" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="radar" value="radar" id="radar" autocomplete="off" checked="" > Radar
</label>
<label class="btn btn-primary ">
<input type="radio" name="radar" value="watches" id="watches" autocomplete="off"> Watches
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="warnings" id="warnings" autocomplete="off"> Warnings
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="temp" id="temp" autocomplete="off"> Temperature
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="precip" id="precip" autocomplete="off"> Precipitation
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="snow" id="snow" autocomplete="off"> Snow
</label>
</div>
</div>
<?php echo $form->field($model, 'status')->radioButtonGroup($model->getStatusList(), ['disabledItems'=>['APPROVED','DIGITAL','CDP']],
[
'class' => 'btn-group-sm',
'itemOptions' => ['labelOptions' => ['class' => 'btn btn-warning']]
]);
?>
I want to disable all previous radio buttons from currently checked.
As I showed in image status 'APPROVED','DIGITAL','CDP' are disabled because status print is selected. I have put these three status in disabled function but how to achieve this using jQuery.
PS- Using Yii2
HTML Code-
<div class="form-group field-status-status required">
<label class="control-label" for="status-status">Status</label>
<input type="hidden" name="Status[status]" value="">
<div id="status-status" class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="APPROVED" disabled> Approved</label>
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="DIGITAL" disabled> Digital</label>
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="CDP" disabled> CDP</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PRINT"> Print</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="OTHERPROCESS"> OtherProcess</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PACKING"> Packing</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DISPATCH"> Dispatch</label>
</div>
You can use prop to disable radio buttons.
$(':radio:checked').closest('label').prevAll('label :radio').prop('disabled', true);
Demo:
$(':radio').on('change', function() {
$(':radio:checked').closest('label').prevAll('label').addClass('disabled').children(':radio').prop('disabled', true);
}).trigger('change');
.disabled {
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group field-status-status required">
<label class="control-label" for="status-status">Status</label>
<input type="hidden" name="Status[status]" value="">
<div id="status-status" class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="APPROVED">Approved</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DIGITAL">Digital</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="CDP" checked>CDP</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PRINT">Print</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="OTHERPROCESS">OtherProcess</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PACKING">Packing</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DISPATCH">Dispatch</label>
</div>
This question already has answers here:
In jQuery, how do I select an element by its name attribute?
(18 answers)
Closed 7 years ago.
How do I get the radio button that is checked from inside my div
Here is my jquery but c is returning undefined
$('#SpaceType').change(function () {
var kids = $(this).children();
$(kids).each(function() {
var c = $(this).data('id');
});
});
Here is my div
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
Use the :checked selector
$('#SpaceType').change(function () {
var c = $(this).find(':checked').attr('id');
alert(c)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
In your case you are iterating over the children of SpaceType which are the label elements and they don't have an id, also you are reading the data called id not the id attribute.