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
Related
We have three buttons(English, Hindi & Urdu). How I can get the value of Selected button in JavaScript function?
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Urdu
</label>
</div>
Firstly set value to your radio buttons then get buttons and bind event listener.
and you can get value of button from event target as following:
let btns= document.getElementsByName("options");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",function(e) {
console.log(e.target.value);
});
}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked value="English">English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"value="Hindi">Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="Urdu">Urdu
</label>
</div>
Try This:
https://jsfiddle.net/f7ed1o0n/
$('input[name="options"]').change(function(){
alert($(this).val());
$(this).parents('.btn-group').find('input[type="radio"]').attr('disabled',
'disabled');
});
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
})
});
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)
}
}
I am using knockout binding for radio button with bootstrap.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="true" name="daysradio" >{{texts.showAll}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="30" name="daysradio" >{{texts.showOnly30Days}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="60" name="daysradio" >{{texts.showOnly60Days}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="90" name="daysradio" >{{texts.showOnly90Days}}
</label>
<!--
<label class="btn btn-default">
<span style="cursor:pointer" data-bind="click: function(){ filterClick(30) } ,css: { 'selectedFilter' : filterValue == 30 }"><u>30 </u></span>
</label>
-->
</div>
the probelm is when i use data-toggle=buttons then data-bind is not working
but if i remove this then data-binding works.
but in that case radio button style comes but i need button styles.
Could you please suggest any solution?
I used the mentioned custom binding and it worked for me. The deatails custom binding will be found on this custom biding by Roy J
<div class="btn-group" data-bind="radio: userType">
<button type="button" class="btn btn-primary" data-value="company">Main User</button>
<button type="button" class="btn btn-primary" data-value="person">Dummy user</button>
I need help with the validation.
That's my code:
HTML:
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
And the result:
Question: I wanna check if the user clicked on one of the buttons.
I tried to do:
if (calss10 === null)
I want to do this with: onekeyup=" "
This will solve your problem.
You need to create a function that runs when the user submit the form (onsubmit)
this is a form example:
P.S you need to add an id to every radio button id="class"
<form onsubmit="return Validate()">
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
</form>
function Validate() {
if (!Validate_Class())
return false;
}
function Validate_Class() {
if (!document.getElementById("class").checked) {
alert("אתה חייב לבחור כיתה!");
return false;
}
}
Wouldn't this get the job done?
var myClickedElement;
$('input[name="class"]').click(function(e) {
myClickedElement = $(this);
});