i'm trying to loading data to a page,
server send a value to browser, for example "male". i did try
$("#optGender").val("male");
to activated/checked radio button I am Male, but it doesnt works
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-danger active">
<input type="radio" name="optGender" value="male" checked=""> I am MALE
</label>
<label class="btn btn-danger">
<input type="radio" name="optGender" value="female"> I am FEMALE
</label>
</div>
</div>
$("#optGender").prop('checked',"male");
You have no id attribute. Try this
$("input[name=optGender][value=male]").prop("checked", true)
or
$('input[name=opt_gender]').val(['male']);
http://jsfiddle.net/Stafox/8qhfnrxe/1/
Related
I am trying to created a filter component, but first I would like to be able to console.log() the value of the filter model base on the selected radio button.
<template>
<Section>
<h5>Filter</h5>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="filter" id="all" v-model="filter" value="all" />All
</label>
<label class="btn btn-primary">
<input type="radio" name="filter" id="completed" v-model="filter" value="completed" />Completed
</label>
<label class="btn btn-primary">
<input type="radio" name="filter" id="notcompleted" v-model="filter" value="notcompleted" />Not Completed
</label>
<button class="btn btn-primary" #click="consoleFilter">console the value</button>
</div>
</Section>
</template>
if the radio "all" is check, and I click the button the console_log value I want must also be "all"
<script>
export default {
name: "Filter",
data() {
return { filter: null };
},
methods: {
consoleFilter() {
console.log(this.filter);
}
}
};
</script>
anyone know how I can do this?
Well, so far I get the point that you are trying to get the value of checked button when it's clicked. Simply you can add onChange event to input tag as follows
<Section>
<h5>Filter</h5>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="filter" #change="consoleFilter" id="all" v-model="filter" value="all" />All
</label>
<label class="btn btn-primary">
<input type="radio" name="filter" #change="consoleFilter" id="completed" v-model="filter" value="completed" />Completed
</label>
<label class="btn btn-primary">
<input type="radio" name="filter" #change="consoleFilter" id="notcompleted" v-model="filter" value="notcompleted" />Not Completed
</label>
<button class="btn btn-primary" #click="consoleFilter">console the value</button>
</div>
</Section>
and if you don't want to do this you can add a watcher too as
watch:{
filter(value){
console.log(value)
}
}
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>
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
In my html form I have two different types of input with same $scope variable as model.
I have 3 radio buttons and a number input field
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="16" name="options" id="option1" > 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="32" name="options" id="option2" > 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="64" name="options" id="option3" > 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
But if I select one of the radio button inputs, it doesn't set the value.
Having two different inputs for the same scope variable causes conflicts?
Use ng-value instead of value
Like this
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="16" name="options" id="option1"> 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="32" name="options" id="option2"> 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="64" name="options" id="option3"> 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
DEMO