i have a button group consist of four buttons,what i am trying to do is whenever user clicks on any button i want fetch its text
I am doing something like this
$(".btn").click(function() {
var button_text = $('#oneMonth').text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
I am doing something like this but its not the right way as i have to put each and every id of button to get the text
I want to do like if user clicks on any button just get the text of that button only
Use this keyword instead of specific selector in alert to get the text of the clicked button
var button_text = $(this).text();
This will always give the text of the button with id oneMonth
$('#oneMonth').text();
$(".btn").click(function() {
var button_text = $(this).text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
You can do this by adding the this jQuery to your code. Here is a working snippet:
var buttons = $("button");
buttons.click(function() {
$(".display__text").text($(this).text());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
<div class="display__text"></div>
Related
I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.
User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.
The onclick call need to be here <div class="btn-group"> because I already have onclick on my button<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
I have tried :focus in CSS but only 1 button can be select.
This is my code, I take out the onclick in button for test purposes.
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary">Tuesday</button>
<button type="button" class="btn btn-primary">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary">8 pm</button>
</div>
</div>
</div>
function switch_to_green(el){
//Check clicked button is on the same group
if(el.parentElement.getAttribute("data-group") == 1){
//Get all buttons of group 1
let g1_buttons = document.querySelectorAll('#group1 .btn');
for(let i =0; i<g1_buttons.length;i++){
//Remove green color from unselected buttons
g1_buttons[i].classList.remove('green');
}
}else{
//Get all buttons of group 2
let g2_buttons = document.querySelectorAll('#group2 .btn');
for(let i =0; i<g2_buttons.length;i++){
//Remove green color from unselected buttons
g2_buttons[i].classList.remove('green');
}
}
//Add green color to the only selected one
el.classList.add('green');
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn.green{
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button>
</div>
</div>
</div>
I have problem as below:
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
$("#active-all").click(function(){
$('.btn').toggleClass('active');
});
I have added active class to button whenever I click active-all button. I found this active class still exist to every tab that I have those HTML button. So that I want refresh that div every time I clicked tab.
I try with jQuery load() and reload() but this seems not solving my problem.
UDATE
I have added active class to button when I clicked active-all button. I found this active class still exist even I go forward or backward to another page. So that I want to find a way refresh that div every time I go forward or backward to another page.
Need something like this?
$(".btn").click(function(){
if (this.id === 'active-all') {
$(".btn", $(this).parent()).toggleClass('active');
}
});
.active {
background-color: #4CAF50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
<div id="secondTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.
I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
}
.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
See these two answers for more information on binding events without a framework and changing the class of elements.
An alternative
If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:
$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });
See the jQuery documentation for more information on .click().
var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].onmouseover = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
button[i].onmouseout = function() {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-secondary');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="caontainer">
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope it'll help :)
How can I use jquery to swap div , I want to if i click botton it'll desplay lay-out-sw and if I click en it should swap
In my html
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>
I use this jquery but i got some error
<script type="text/javascript">
$(function() {
$('.layout-en').hide();
$('.btn-language').on('click',function(e){
$('.btn-language').removeClass('btn-info').addClass('btn-default');
$(this).removeClass('btn-default').addClass('btn-info');
$('.layout-sw,.layout-en').hide();
($(this).text()=='SW') ? $('.layout-sw').show() : $('.layout-en').show();
})
$('.btn-on-off').on('click',function(e){
$(this).closest('.btn-on-off-widget').find('.btn-value').val($(this).attr('value'));
$(this).next('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
$(this).prev('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
if($(this).attr('value')==0){
$(this).removeClass('btn-default').addClass('btn-gray');
}else{
$(this).removeClass('btn-default').addClass('btn-primary');
}
})
});
</script>
You can simply use show() and hide() function of jQuery as below.
$(document).ready(function() {
$('.layout-en').hide();
$('.btn-sw').click(function() {
$('.layout-sw').show();
$('.layout-en').hide();
});
$('.btn-en').click(function() {
$('.layout-en').show();
$('.layout-sw').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>
Very simple I just need a quick pointer,
Bootstrap Button Group (for a 1-in-3 toggle button) defined as:
<!-- Twitter Bootstrap Button Group -->
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>
On clicking a button I select it to keep it active/pressed: that's my current tab, but I need to unselect all others. Only 1 toggle button at a time.
$('.btn').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})
// this never unselects other toggle buttons
Also, how would I define the content under each toggle button?
You have to remove active class from previous button(which was selected previous) using removeClass() method.
$('.btn').click(function(e) {
e.preventDefault();
$('.btn-group > button.active').removeClass('active');
$(this).addClass('active');
})
$('.btn').click(function(e) {
e.preventDefault();
$('.btn-group > button.active').removeClass('active');
$(this).addClass('active');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>
Additionally to #Alexandru-IonutMihai answer, if you want to do it one line you could select the active button and the just-clicked button and toggle their classes.
var $btn = $('.btn-group .btn');
$btn.click(function(e) {
e.preventDefault();
$(this).add($btn.filter('.active')).toggleClass('active');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Tab 4</button>
<button type="button" class="btn btn-primary">Tab 5</button>
<button type="button" class="btn btn-primary">Tab 6</button>
</div>
Just adding one small tweak to Alexandru's original answer...
In case there were multiple button groups within the page, then to isolate the select / deselect events, and to ascertain that those button groups don't interfere with each other, we could modify the code slightly as follows:
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
The only new line added here is: $(this).siblings().removeClass('active') such that it removes any of the previously added active class from the current button group only.