Use Buttons As A Switch Or Checkbox
I try to explain quickly and in detail what I plan to do. I have a table, where each cell is placed a button CSS like this:
<input type="button" class="AreaFree" id="#"> //a different id for each button
My intention is to select (to click) many different buttons; each time a button is selected it has to change color (or to change the class of the button); if is pressed again, it must return to its original state. Next, I want a submit button that invokes a servlet and sends which buttons have been selected and which are not. Now my question: Is it possible to do with JavaScript? If yes, could you kindly share the code necessary to do this? If no, what do you suggest?
Now I share a piece of code involved for this purpose. I'm sorry in advance if I wasn't not much detailed.
HTML
<form action="myServlet" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" class="AreaFree" id="11"/></td>
<td><input type="button" class="AreaFree" id="12"/></td>
<td><input type="button" class="AreaFree" id="13"/></td>
<td><input type="button" class="AreaFree" id="14"/></td>
<td><input type="button" class="AreaFree" id="15"/></td>
</tr>
<tr>
<td><input type="button" class="AreaFree" id="21"/></td>
<td><input type="button" class="AreaFree" id="22"/></td>
<td><input type="button" class="AreaFree" id="23"/></td>
<td><input type="button" class="AreaFree" id="24"/></td>
<td><input type="button" class="AreaFree" id="25"/></td>
</tr>
</table>
<input type="submit" value="submit">
</form>
CSS
.AreaFree{
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#44c767;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:15px 21px;
text-decoration:none;
}
.AreaFree:hover {
background-color:#5cbf2a;
}
.AreaFree:active {
position:relative;
}
.AreaOccupated{
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#E00000;
border:1px solid #B00000;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:15px 21px;
text-decoration:none;
}
.AreaOccupated:hover {
background-color:#D00000;
}
.AreaOccupated:active {
position:relative;
}
.AreaBlocked{
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#A8A8A8;
border:1px solid #808080;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:15px 21px;
text-decoration:none;
}
.AreaBlocked:hover {
background-color:#989898;
}
.AreaBlocked:active {
position:relative;
}
Answer
Add this to bottom of your html:
$('input[type="button"]').on('click', function(evt) {
var ary = $(this).attr('class').split(' ');
if (ary.indexOf('clicked') === -1) {
$(this).addClass('clicked');
}
else {
$(this).removeClass('clicked');
}
});
Also add this class:
input.clicked {
background-color: red;
}
Now, you have to handle the hover color issue, but the code should give you a good start.
UPDATE: (This code works for me)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.AreaFree{
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#44c767;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:15px 21px;
text-decoration:none;
}
.AreaFree:hover {
background-color:#5cbf2a;
}
.AreaFree:active {
position:relative;
}
.AreaOccupated{
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#E00000;
border:1px solid #B00000;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:15px 21px;
text-decoration:none;
}
.AreaOccupated:hover {
background-color:#D00000;
}
.AreaOccupated:active {
position:relative;
}
.AreaBlocked{
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#A8A8A8;
border:1px solid #808080;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:15px 21px;
text-decoration:none;
}
.AreaBlocked:hover {
background-color:#989898;
}
.AreaBlocked:active {
position:relative;
}
input.clicked {
background-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<form action="myServlet" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" class="AreaFree" id="11"/></td>
<td><input type="button" class="AreaFree" id="12"/></td>
<td><input type="button" class="AreaFree" id="13"/></td>
<td><input type="button" class="AreaFree" id="14"/></td>
<td><input type="button" class="AreaFree" id="15"/></td>
</tr>
<tr>
<td><input type="button" class="AreaFree" id="21"/></td>
<td><input type="button" class="AreaFree" id="22"/></td>
<td><input type="button" class="AreaFree" id="23"/></td>
<td><input type="button" class="AreaFree" id="24"/></td>
<td><input type="button" class="AreaFree" id="25"/></td>
</tr>
<input type="submit" value="submit">
</form>
<script>
$('input[type="button"]').on('click', function(evt) {
var ary = $(this).attr('class').split(' ');
if (ary.indexOf('clicked') === -1) {
$(this).addClass('clicked');
}
else {
$(this).removeClass('clicked');
}
});
</script>
</body>
</html>
UPDATE:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.AreaFree {
-moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
background-color: #44c767;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 15px 21px;
text-decoration: none;
}
.AreaFree:hover {
background-color: #5cbf2a;
}
.AreaFree:active {
position: relative;
}
.AreaOccupated {
-moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
background-color: #E00000;
border: 1px solid #B00000;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 15px 21px;
text-decoration: none;
}
.AreaOccupated:hover {
background-color: #D00000;
}
.AreaOccupated:active {
position: relative;
}
.AreaBlocked {
-moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
background-color: #A8A8A8;
border: 1px solid #808080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 15px 21px;
text-decoration: none;
}
.AreaBlocked:hover {
background-color: #989898;
}
.AreaBlocked:active {
position: relative;
}
input.clicked {
background-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<form action="myServlet" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="button" class="AreaFree" id="0" />
</td>
<td>
<input type="button" class="AreaFree" id="1" />
</td>
<td>
<input type="button" class="AreaFree" id="2" />
</td>
<td>
<input type="button" class="AreaFree" id="3" />
</td>
<td>
<input type="button" class="AreaFree" id="4" />
</td>
</tr>
<tr>
<td>
<input type="button" class="AreaFree" id="5" />
</td>
<td>
<input type="button" class="AreaFree" id="6" />
</td>
<td>
<input type="button" class="AreaFree" id="7" />
</td>
<td>
<input type="button" class="AreaFree" id="8" />
</td>
<td>
<input type="button" class="AreaFree" id="9" />
</td>
</tr>
<input type="hidden" id="matrix" value="" />
<input type="submit" value="submit">
</form>
<script>
var matrix = [];
for (var i = 0; i < 10; i++) {
matrix.push(0);
}
// set the hidden field on init
$('#matrix').val(matrix);
$('input[type="button"]').on('click', function(evt) {
var me = $(this);
var idx = +me.attr('id'); // the + sign turns this value to a number
if (matrix[idx] === 0) {
matrix[idx] = 1;
me.addClass('clicked');
} else {
matrix[idx] = 0;
me.removeClass('clicked');
}
// update the hidden field every time a user clicks something
$('#matrix').val(matrix);
});
</script>
</body>
</html>
I did a few things in the latest code. Since we are tracking the states in a matrix array, no need to get look at the class. Use the state in matrix to determine. Comparing 0 and 1 are quicker than strings and array.
I also changed the button ID's to help update the matrix.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM