Deactivate Toggle Buttons

Deactivate Toggle Buttons - javascript

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.

Related

Is there any way to refresh div when clicked on bootstrap tab in jQuery?

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>

Change background when select

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 :)

On click of button group how to identify which button is clicked

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>

swap div when click button jquery

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>

Best way to get value of an button with JavaScript

I need to get the value of the value attribute of the button element and write this value into another modal.
I have a loop in my PHP which writes the following HTML:
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>
When I click on a button it shows a modal with two buttons, one to continue and one to cancel. I want store the value of the value attribute of the first button in the href attribute of the "continue" button in the second modal.
My modal:
<div class="modal-body">
<div class="text-center">
<div class="i-circle danger"><i class="fa fa-times"></i></div>
<h4>Are you sure?!</h4>
<p>If yes click on Continue!</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="IWANTGETIDHERE">
<button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
</a>
</div>
</div>
</div>
Here is a demo of my modal.

Using jQuery:
$(document).ready(function() {
$('.btn').click(function() {
alert($(this).attr("value"));
});
});
Instead of alert, use:
$('.modal-footer a').attr("href", $(this).attr("value"));
See the JSFiddle
Using Pure Javascript
document.getElementById('btn').onclick = function() {
document.getElementById('link').setAttribute('href', this.value);
}
See the JSFiddle

button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href = document.getElementById("buttonID").value
}
If you are looking for no dependancies.

You may try this, add a data-customId attribute and remove the value from all of your buttons:
<button data-customId="1" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>
Also, add an id to your modal div like:
<div id='confirmAction' class="modal-body">
<!-- Markup -->
</div>
Then register a handler for bootstrap show event:
$('#confirmAction').on('show.bs.modal', function (e) {
$id = $(e.relatedTarget).attr('data-customId'); // Get the customId
$(this).find('a:first').attr('href', $id);
});

Develop Reference

JavaScript is the programming language of the Web.

Deactivate Toggle Buttons - javascript

Related

Is there any way to refresh div when clicked on bootstrap tab in jQuery?

Change background when select

On click of button group how to identify which button is clicked

swap div when click button jquery

Best way to get value of an button with JavaScript

Categories

Resources