Please forgive any misunderstanding; I am fairly new to HTML/Bootstrap.
I have a group of radio buttons each with their own label that a user can select. The label itself (which Bootstrap treats as a button?) is clickable, however, the radio button is not clickable, but still highlights the corresponding label. Would anyone have a fix for this? I need to be able to click anywhere on the answer (label or radio button) and show the radio button and label as selected. I've tried everything I can think of...
Here is some example code of what I'm doing:
<div class="col-sm-12">
<div class="btn-group btn-group-toggle btn-group-lg btn-group-justified" data-toggle="buttons">
<div class="form-group">
<label class="btn btn-default btn-lg btn-block" style="text-align:left; white-space:normal;">
<input type="radio" name="Q1" id="A1"
value="TEST TEXT."
style="margin-left:10px;" required/> TEST TEXT
</label>
</div>
<div class="form-group">
<label for="Q1A2" class="btn btn-default btn-lg btn-block" style="text-align:left; white-space:normal;">
<input type="radio" name="Q1" id="A2"
value="TEXT TBD"
style="margin-left:10px;" required /> TEXT TBD
</label>
</div>
for="Q1A2"
This shouldn't be a combination of the name and the id. Make the name unique and apply the label's for attribute.
<label for="item1">Item1</label><input type="radio" name="item1" style="margin-left:10px;" required />
<label for="item2">Item2</label><input type="radio" name="item2" style="margin-left:10px;" required />
this is it. the for attribute of the label should be equal to the id attribute of input.
also btn classes are for buttons not radio and checkbox
label {
padding: 5px;
cursor: pointer;
border-radius: 5px;
}
label:hover {
background-color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<div class="form-group">
<label for="A1">
<input type="radio" name="Q1" id="A1" value="1" required checked/> TEST TEXT
</label>
</div>
<div class="form-group">
<label for="A2">
<input type="radio" name="Q1" id="A2" value="2" required/> TEXT TBD
</label>
</div>
</div>
</div>
Related
I have a visually designed form for calculating the amount of training and a plugin for sending the form to the mail.
I need to figure out how to transfer information about what the user has selected on the radio created by me and the amount in the WPForm form in order to submit a request.
In wpform radio, you need to specify class .wpforms-selected for radio, then they are activated.
I understand that it can be done much easier and better, but in this case we are working with what we have, unfortunately.
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" value="0" class="btn-check" name="wpforms[fields][19]" id="wpforms-320-field_19_1" autocomplete="off" checked>
<label style="border-bottom: 0px;" class="btn btn-outline-primary w-50" for="wpforms-320-field_19_1">Онлайн</label>
<input type="radio" value="3000" class="btn-check" name="wpforms[fields][19]" id="wpforms-320-field_19_2" autocomplete="off">
<label style="border-bottom: 0px;" class="btn btn-outline-primary w-50" for="wpforms-320-field_19_2">В классе</label>
</div>
<ul id="wpforms-320-field_19">
<li class="choice-1 depth-1 wpforms-selected">
<input type="radio" id="wpforms-320-field_19_1" name="wpforms[fields][19]" value="Онлайн" class="wpforms-valid" aria-invalid="false">
<label class="wpforms-field-label-inline" for="wpforms-320-field_19_1">Онлайн</label>
</li>
<li class="choice-2 depth-1">
<input type="radio" id="wpforms-320-field_19_2" name="wpforms[fields][19]" value="В классе" class="wpforms-valid" aria-invalid="false">
<label class="wpforms-field-label-inline" for="wpforms-320-field_19_2">В классе</label>
</li>
</ul>
when i click the active button a box should appear in the page , and when i click closed it should hide from page
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>
Use change event of radio button
$("input[name='options']").on('change',function(){
if($(this).attr('id') == 'option1'){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px" id="myDiv">MY DIV WILL BE HERE</div>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>
is that what you want ?
$(document).ready(function() {
$('input[name=options]').change(function(e) {
var isOpen = $(this).val() == "Open";
$('#box').toggle(isOpen);
});
});
#box {
padding-top: 15px;
}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" value="Open" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" value="Closed" id="option2" autocomplete="off"> Closed
</label>
</div>
<div id="box">More Info</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use a bootstrap modal and modal button to open a box on a button click. if you want to make a custom button then here is the code for in jquery.
$(document).ready(function()
{
$("button.active").on("click",function()
{
$(".page-box").toggle();
//page-box is the box container which you want to open
})
});
When I click option1, the showcontent will show hello 1, When I click option2, the showcontent will show hi 2, and more actions.I use JQuery to do this
$(document).ready(function() {
$("#option1").click(function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
However this code can't run, when I click the button, I should not use $(".option1").click(function(){, any ideas?
Updates: typo $(".option1").click(function(){ should be $("#option1").click(function(){
Alright, you're attempting to refer to the Options as .option1 and .option2. However, the dot there actually means a class such as if you defined
<input type="radio" name="options"class="option1" autocomplete="off" checked>
So, replace your .option1 or whatever with #option1. That should fix your problem.
However, the class .showcontent doesn't exist within your code. Maybe you would like to add a blank div with the class showcontent
The event handler doesn't work because you're selecting by class, yet the each radio control has an id.
To fix this, and make the code simpler, put a common class on all the radio buttons and change their value attributes to the text you want to show in showcontent. Then you can simply set the text() of that element, like this:
$(".option").click(function() {
$(".showcontent").text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" class="option" autocomplete="off" value="hello 1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" class="option" autocomplete="off" value="hi 2" /> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" class="option" autocomplete="off" value="foo 3" /> Radio
</label>
<div class="showcontent"></div>
Because you are selecting a class not an id here: $(".option1").click(function() {. but you don't have any element contain class call .option1. so try something like this:
$(document).ready(function() {
$("#option1").click(function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
<div class="showcontent"></div>
try using on click
$(document).ready(function() {
$(".option1").on("click",function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
Also if you want to attach it to the first option then use its ID in the selector
$(document).ready(function() {
$("#option1").on("click",function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
Also in html add the following in the html section inside body. This is because you are appending it to element with class showcontent on click
<div class="showcontent"></div>
I am building a simple vehicle inspection form and I would like to use checkboxes as buttons to capture true/false values.
This is supposed to be trivial using Bootstrap 4.
I would however like to adjust the default behaviour of the buttons; to toggle between the success and danger classes to denote true/false. And also in some cases to change the text of the button, eg. "Leaks" -> "No Leaks".
I have got the toggle working with the help of #Yass but I am not getting the correct true/false values when I submit the form. Even though the checkboxes are checked (true), the values are coming through as if they are false.
I'm not sure how to handle the change in text when toggling between the two states.
Checkbox Buttons
HTML
<div class="row">
<div class="col-sm-4 col-xs-12">
<p class="font-weight-bold">Bonnet</p>
<div data-toggle="buttons">
<label class="btn btn-block btn-success">
<input type="checkbox" name="oil" checked="checked" autocomplete="off"> Oil
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="coolant" checked="checked" autocomplete="off"> Coolant
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="breakfluid" checked="checked" autocomplete="off"> Break Fluid
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="screenwash" checked="checked" autocomplete="off"> Screen Wash
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="noleaks" checked="checked" autocomplete="off"> No Leaks
</label>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<p class="font-weight-bold">Outside</p>
<div data-toggle="buttons">
<label class="btn btn-block btn-success">
<input type="checkbox" name="tyres" checked="checked" autocomplete="off">
Tyres
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="wiperblades" checked="checked" autocomplete="off">
Wiper Blades
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="lights" checked="checked" autocomplete="off">
Lights
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="indicators" checked="checked" autocomplete="off">
Indicators
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="outcleanliness" checked="checked" autocomplete="off">
Cleanliness
</label>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<p class="font-weight-bold">Inside</p>
<div data-toggle="buttons">
<label class="btn btn-block btn-success">
<input type="checkbox" name="horn" checked="checked" autocomplete="off">
Horn
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="breaks" checked="checked" autocomplete="off">
Breaks/Handbrake
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="seatbelt" checked="checked" autocomplete="off">
Seatbelt
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="windscreen" checked="checked" autocomplete="off">
Windscreen
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="incleanliness" checked="checked" autocomplete="off">
Cleanliness
</label>
</div>
</div>
</div>
JavaScript
$('label.btn').on('click', function() {
//Find the child check box.
var $input = $(this).find('input');
$(this).toggleClass('btn-danger btn-success');
//Remove the attribute if the button is "disabled"
if ($(this).hasClass('btn-danger')) {
$input.removeAttr('checked');
} else {
$input.attr('checked', '');
}
return false; //Click event is triggered twice and this prevents re-toggling of classes
});
https://jsfiddle.net/mstnorris/9fyzfu8w/
Here is an alternative solution with pure Javascript. Add a hidden input associated to each button, and update hidden values each time the button is clicked.
HTML :
<!-- Visible button -->
<input onclick="toogleButton(this,'hiddenButton')" class="btn btn-secondary" type="button" value="Toogle">
<!-- Hidden input -->
<input name="FM_city" id="hiddenButton" type="hidden" value="0"></input>
Javascript :
// Called when the button is clicked
function toogleButton(callingElement,hiddenElement)
{
// Check the color of the button
if (callingElement.classList.contains('btn-secondary'))
{
// If the button is 'unset'; change color and update hidden element to 1
callingElement.classList.remove('btn-secondary');
callingElement.classList.add('btn-success');
document.getElementById(hiddenElement).value="1";
}
else
{
// If the button is 'set'; change color and update hidden element to 0
callingElement.classList.remove('btn-success');
callingElement.classList.add('btn-secondary');
document.getElementById(hiddenElement).value="0";
}
}
When the form is submitted, process value of the hidden input. Note that you can easily change the text of the button with : callingElement.value="New text here"
Last remark : initial value of hidden elements must be in accordance with the initial color of the associated button.
Handle the click event of the buttons, and toggle the checked value of the input using jQuery .prop() like this..
var $chk = $(this).find('[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
Demo: http://codeply.com/go/IeuO1fPf7H
I'm using the javascipt radio button from Bootstrap 3
http://getbootstrap.com/javascript/#buttons
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Javascript:
$('.btn').button()
I need to append this only when ".btn" has class "active":
<span class="glyphicon glyphicon-ok"></span>
to obtain
<label class="btn btn-primary active">
<span class="glyphicon glyphicon-ok"></span><!-- appended markup -->
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
Can anyone help?
Thank you
How about just do it in plain 'ole CSS like this:
CSS:
.add-check .active:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e013";
}
HTML: (I only added a class .add-check to the button group so you can target specific ones).
<div class="btn-group add-check" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
DEMO
You know, just to throw a pure CSS solution into the mix for the heck of it:
.active-display-only { display:none; }
.active > .active-display-only { display:inline-block; }
Then, put the glyphicon in each button:
<label class="btn btn-primary">
<span class="glyphicon glyphicon-ok active-display-only"></span>
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
You can add in some jQuery magic to make this do what you want it to do. I did this by just adding the below element in your HTML, but with the hide class to keep it hidden until it is needed.
HTML:
<label id="tester" class="btn btn-primary active">
<span id="test" class="glyphicon glyphicon-ok hide"></span>
<input type="radio" name="options" class="option1" checked>Option 1 (preselected)
</label>
jQuery:
$('#tester').on('click', function () {
$('#test').removeClass('hide');
$('#test2').addClass('hide');
$('#test3').addClass('hide');
});
Where, on click the label, the span will remove the hide class, thus showing the check mark while adding the class to the other two inputs. This should work for you, and I would advise changing the name scheme around as well. An example is found below.
DEMO
EDIT
I updated the fiddle so that the pre-selected option will automatically start with a check mark, hopefully creating the experience you are looking for.