How to disable a button after clicking another button (Web Boot Boot)
I have a registration page with two buttons. Pressing one button displays the corresponding container. When a button is clicked, the bg color changes and sticks, even after I select another button. Then, if I press the button again, it goes back to its unselected / inactive color.
I want the pressed button to keep the active color, but only if the other button is not pressed. If another button is clicked, I want the first button to go back to its original bg color.
Here is the js:
<script type = "text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("container1").style.display = 'inline';
document.getElementById("container2").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("container1").style.display = 'none';
document.getElementById("container2").style.display = 'inline';
} else {}
}
</script>
And here are the buttons (sorry for the formatting issues):
<!--SELECTION BUTTONS-->
<form>
<div class="control-group">
<label class="control-label">Are you a:</label>
<div class="controls">
<p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">
<button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
Buttons1</button>
<button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>
</div></p>
</div>
</div>
</form>
Here is the CSS (using Bootstrap):
/* SWITCH BUTTONS */
.selection-buttons button{
width: 140px;
height: 60px;
color: #FFF;
background-color: #FFB10D;
border-color: #fff; /* e59f0b */
}
.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #FFF;
background-color: #00CC66;
border-color: #fff; /* 00b75b */
}
Thank!
source to share
Pretty simple potential solution. In JS, just add the following lines:
function displayForm(c) {
for (var i = 1; i <= number_of_buttons; i++) {
if (document.getElementById("button"+i) {
document.getElementById("button"+i).className = "active";
} else {
document.getElementById("button"+i).className = "inactive";
}
}
}
Then just use your CSS file to set the formatting you want for the classes active
and inactive
. If you don't have more than 1000 buttons, this will be effective enough for your needs.
source to share