Develop Reference

Having table <td> as checkbox, how to implement click and drag multiple selection on <td>

I do have a code which changes checkbox state when <td> is clicked
$(document).ready(function() {
$("td").click(function(e) {
var chk = $(this).closest("td").find("input:checkbox").get(0);
if (e.target != chk) {
chk.checked = !chk.checked;
if ($(this).closest("td").find("input:checkbox").prop("checked") == true) {
$(this).closest("td").css("background-color", "red");
console.log($(this).closest("td").find("input:checkbox").prop("checked"));
console.log($(this).closest("td").find("input:checkbox").prop("value"));
} else {
$(this).closest("td").css("background-color", "white");
console.log($(this).closest("label").find("input:checkbox").prop("checked"));
console.log($(this).closest("label").find("input:checkbox").prop("value"));
}
}
});
});
table,
th,
td {
border: 1px solid black;
}
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I need to implement click and drag across multiple <td> which will also check the checkboxes. I do saw this implementation, but I'm still can't get to have this work with my existing code.

your reference is very helpfull, Hopefully my snippet can help you in any ways.. have a nice day :)
$(document).ready(function() {
var isMouseDown = false,
isHighlighted;
$("#sample input:checkbox").click(function() {
return false;
})
$("#sample td:not(:first-child)")
.mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
$(this).find("input:checkbox").prop("checked", isHighlighted);
return false; // prevent text selection
})
.mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
$(this).find("input:checkbox").prop("checked", isHighlighted);
}
})
.bind("selectstart", function() {
return false;
})
$(document)
.mouseup(function() {
isMouseDown = false;
});
});
table,
th,
td {
border: 1px solid black;
}
https: //stackoverflow.com/questions/58418830/having-table-td-as-checkbox-how-to-implement-click-and-drag-multiple-selectio#
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
table td.highlighted {
background-color: #999;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

When you press mousedown we toggle a boolean to indicate that the mouse is down on. On mouseover a TD we check if the mouse is down and then check it. We prevent default behavior on mousedown to avoid text selection.
$(document).ready(function() {
// one click
$('td').on( 'click', function(){
var $checkbox = $(this).find('input:checkbox')
$checkbox.click()
if ( $checkbox[0].checked ) {
$checkbox.parent().css("background-color", "red");
} else {
$checkbox.parent().css("background-color", "white");
}
})
var mouseDown = false;
$('td').on('mousedown touchstart', function(event) {
// Disable text selection
event.preventDefault();
// set boolean
mouseDown = true;
});
$(window.document).on('mouseup touchend', function(event) {
mouseDown = false;
});
$('td').on('mouseover', function(event) {
if (mouseDown) {
var $checkbox = $(this).find('input:checkbox')
if ( !$checkbox[0].checked ) {
$checkbox.click()
}
}
});
});
table,
th,
td {
border: 1px solid black;
}
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Passing value to another jsp from dynamic table using javascript

Am working on project where i need to display dynamic table using database. Am able to display table but while passing values to another page for editing table am getting problem. Am able to pass only first row of the table. Am using javascript for passing value. Please help me. This is what I have tried till now
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<%
if(rs != null){
while(rs.next()){
%>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" id="dd" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(3)%>" name="two" id="two"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(4)%>" name="thr" id="thr"/></td>
<td><input style="border:0px; width:90px" type="text" value="<%=rs.getString(5)%>" name="fr" id="fr"/></td>
<td><input style="border:0px; width:100px" type="text" value="<%=rs.getString(6)%>" name="fve" id="fve"/></td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun()" value="Update"></td>
</tr>
<% } }
else { out.println("No Record Found"); } %>
</tbody>
</table>
This is my Jscript function
<script>
function myFun(){
var v1 = document.getElementById("one").value;
var v2 = document.getElementById("two").value;
var v3 = document.getElementById("thr").value;
var v4 = document.getElementById("fr").value;
var v5 = document.getElementById("fve").value;
var dd = document.getElementById("dd").value;
window.location.href='DCM_UsrShiftUpdt.jsp?v1='+v1+'&v2='+v2+'&v3='+v3+'&v4='+v4+'&v5='+v5+'&dd='+dd;
}
</script>
Kindly response. Thanks in advance.

Problem with your code is duplicate ids, use dynamic ids, lets take row id:
if(rs != null){
int rowId = 1;
while(rs.next()){ %>
<tr>
<td style="font-weight: bold;"><input style="border:0px; width:100px" name="dd" id="dd<%=rowId%>" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one<%=rowId%>"/></td>
.... so on for other <td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun(<%=rowId%>)" value="Update"></td>
</tr>
<%
rowId++;
}
}
JS
function myFun(rowId){
var v1 = document.getElementById("one"+rowId).value;
//so on for the rest
}
P.S. avoid using JSP scriptlets and use JSTL instead.

IDs need to be UNIQUE. Use parentNode's siblings to gather the input values for the row the button is in
var buts = document.querySelectorAll("[value=Update]");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
var cells = this.parentNode.parentNode.cells, parms = [];
for (var i=0;i<cells.length-1;i++) { // stop at the button
var input = cells[i].querySelector("input");
parms.push(input.name+"="+input.value)
}
console.log(parms.join("&"));
}
}
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
</tbody>
</table>

Checkbox colors based on mySQL

Very new to coding and had to build a reservation app over the last few weeks. I am trying to get results back if the seats are already booked and:
prevent the seat from being booked again (error message)
change the checkbox color to red
I chose to use checkboxes but if you have a beautiful array or table I could use I'm open to suggestions. The seats are supposed to be red if booked, green if booked by current active user, and white if not booked.
Currently the flow is seats.html -> cart.php -> reserve.php (the order is different, I mostly need help with reserve.php and seats.html.
Thanks for taking the time to read this.
--reserve.php--
<?php session_start();
include 'dbh.php';
$seat = $_GET['seat'];
$id = $_SESSION['id'];
//this was supposed to check for seats already booked but I couldn't get it to work :[
$checkseat = "SELECT * FROM reservations WHERE seat = '$_GET[seat]'";
$rs = mysqli_query($connection,$checkseat);
$data = mysqli_fetch_row($rs);
if($data[0] > 1) {
echo "Seat is already reserved<br/>";
}
else
{
$newSeat="INSERT INTO reservations (id, seat)
VALUES ('$id','$seat')";
if (mysqli_query($connection,$newSeat))
{
echo "$seat is booked for user: $id";
}
else
{
echo "Error: Seat already booked.<br/>";
}
}
--seats.html--
<?php session_start(); include 'dbh.php'; $seat=$ _GET[ 'seat']; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Seats</title>
</head>
<body>
<div id="mycounter2"></div>
<!--script for timer on page load-->
<script>
i = 60;
function onTimer2() {
document.getElementById('mycounter2').innerHTML = i;
i--;
onclick = function() {
i = 60;
}
if (i < 0) {
alert('Your seat selection has been reset.');
window.location.reload();
} else {
setTimeout(onTimer2, 1000);
}
}
window.onload = onTimer2;
</script> seconds until seats are cleared.
<br />
<br />
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
border-color: #999;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #999;
color: #444;
background-color: #F7FDFA;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #999;
color: #fff;
background-color: #26ADE4;
}
.tg .tg-yw4l {
vertical-align: top
}
#media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
<h1>Reserve Seats</h1>
<!--script for timer on page load-->
<script>
i = 60;
function onTimer() {
alert("test");
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('No activity, seats not held.');
} else {
setTimeout(onTimer, 1000);
}
}
</script>
<!--the below script prevents users from selecting more than 4 seats-->
<script type="text/javascript">
function checkboxlimit(checkgroup, limit) {
var checkgroup = checkgroup
var limit = limit
for (var i = 0; i < checkgroup.length; i++) {
checkgroup[i].onclick = function() {
var checkedcount = 0
for (var i = 0; i < checkgroup.length; i++)
checkedcount += (checkgroup[i].checked) ? 1 : 0
if (checkedcount > limit) {
alert("You can select a maximum of " + limit + " seats")
this.checked = false
}
}
}
}
</script>
<div class="tg-wrap">
<table class="tg">
<form id="reserve" name="reserve" action="cart.php" method="post">
<tr>
<th class="tg-yw4l"></th>
<th class="tg-yw4l">1</th>
<th class="tg-yw4l">2</th>
<th class="tg-yw4l">3</th>
<th class="tg-yw4l">4</th>
<th class="tg-yw4l">5</th>
<th class="tg-yw4l">6</th>
<th class="tg-yw4l">7</th>
<th class="tg-yw4l">8</th>
<th class="tg-yw4l">9</th>
<th class="tg-yw4l">10</th>
<th class="tg-yw4l">11</th>
<th class="tg-yw4l">12</th>
<th class="tg-yw4l">13</th>
<th class="tg-yw4l">14</th>
<th class="tg-yw4l">15</th>
<th class="tg-yw4l">16</th>
<th class="tg-yw4l">17</th>
<th class="tg-yw4l">18</th>
<th class="tg-yw4l">19</th>
<th class="tg-yw4l">20</th>
</tr>
<tr>
<td>A</td>
<td><input type="checkbox" name="seat[]" value="A1">A1</td>
<td><input type="checkbox" name="seat[]" value="A2">A2</td>
<td><input type="checkbox" name="seat[]" value="A3">A3</td>
<td><input type="checkbox" name="seat[]" value="A4">A4</td>
<td><input type="checkbox" name="seat[]" value="A5">A5</td>
<td><input type="checkbox" name="seat[]" value="A6">A6</td>
<td><input type="checkbox" name="seat[]" value="A7">A7</td>
<td><input type="checkbox" name="seat[]" value="A8">A8</td>
<td><input type="checkbox" name="seat[]" value="A9">A9</td>
<td><input type="checkbox" name="seat[]" value="A10">A10</td>
<td><input type="checkbox" name="seat[]" value="A11">A11</td>
<td><input type="checkbox" name="seat[]" value="A12">A12</td>
<td><input type="checkbox" name="seat[]" value="A13">A13</td>
<td><input type="checkbox" name="seat[]" value="A14">A14</td>
<td><input type="checkbox" name="seat[]" value="A15">A15</td>
<td><input type="checkbox" name="seat[]" value="A16">A16</td>
<td><input type="checkbox" name="seat[]" value="A17">A17</td>
<td><input type="checkbox" name="seat[]" value="A18">A18</td>
<td><input type="checkbox" name="seat[]" value="A19">A19</td>
<td><input type="checkbox" name="seat[]" value="A20">A20</td>
</tr>
<tr>
<td>B</td>
<td><input type="checkbox" name="seat[]" value="B1">B1</td>
<td><input type="checkbox" name="seat[]" value="B2">B2</td>
<td><input type="checkbox" name="seat[]" value="B3">B3</td>
<td><input type="checkbox" name="seat[]" value="B4">B4</td>
<td><input type="checkbox" name="seat[]" value="B5">B5</td>
<td><input type="checkbox" name="seat[]" value="B6">B6</td>
<td><input type="checkbox" name="seat[]" value="B7">B7</td>
<td><input type="checkbox" name="seat[]" value="B8">B8</td>
<td><input type="checkbox" name="seat[]" value="B9">B9</td>
<td><input type="checkbox" name="seat[]" value="B10">B10</td>
<td><input type="checkbox" name="seat[]" value="B11">B11</td>
<td><input type="checkbox" name="seat[]" value="B12">B12</td>
<td><input type="checkbox" name="seat[]" value="B13">B13</td>
<td><input type="checkbox" name="seat[]" value="B14">B14</td>
<td><input type="checkbox" name="seat[]" value="B15">B15</td>
<td><input type="checkbox" name="seat[]" value="B16">B16</td>
<td><input type="checkbox" name="seat[]" value="B17">B17</td>
<td><input type="checkbox" name="seat[]" value="B18">B18</td>
<td><input type="checkbox" name="seat[]" value="B19">B19</td>
<td><input type="checkbox" name="seat[]" value="B20">B20</td>
</tr>
<tr>
<td>C</td>
<td><input type="checkbox" name="seat[]" value="C1">C1</td>
<td><input type="checkbox" name="seat[]" value="C2">C2</td>
<td><input type="checkbox" name="seat[]" value="C3">C3</td>
<td><input type="checkbox" name="seat[]" value="C4">C4</td>
<td><input type="checkbox" name="seat[]" value="C5">C5</td>
<td><input type="checkbox" name="seat[]" value="C6">C6</td>
<td><input type="checkbox" name="seat[]" value="C7">C7</td>
<td><input type="checkbox" name="seat[]" value="C8">C8</td>
<td><input type="checkbox" name="seat[]" value="C9">C9</td>
<td><input type="checkbox" name="seat[]" value="C10">C10</td>
<td><input type="checkbox" name="seat[]" value="C11">C11</td>
<td><input type="checkbox" name="seat[]" value="C12">C12</td>
<td><input type="checkbox" name="seat[]" value="C13">C13</td>
<td><input type="checkbox" name="seat[]" value="C14">C14</td>
<td><input type="checkbox" name="seat[]" value="C15">C15</td>
<td><input type="checkbox" name="seat[]" value="C16">C16</td>
<td><input type="checkbox" name="seat[]" value="C17">C17</td>
<td><input type="checkbox" name="seat[]" value="C18">C18</td>
<td><input type="checkbox" name="seat[]" value="C19">C19</td>
<td><input type="checkbox" name="seat[]" value="C20">C20</td>
</tr>
<tr>
<td>D</td>
<td><input type="checkbox" name="seat[]" value="D1">D1</td>
<td><input type="checkbox" name="seat[]" value="D2">D2</td>
<td><input type="checkbox" name="seat[]" value="D3">D3</td>
<td><input type="checkbox" name="seat[]" value="D4">D4</td>
<td><input type="checkbox" name="seat[]" value="D5">D5</td>
<td><input type="checkbox" name="seat[]" value="D6">D6</td>
<td><input type="checkbox" name="seat[]" value="D7">D7</td>
<td><input type="checkbox" name="seat[]" value="D8">D8</td>
<td><input type="checkbox" name="seat[]" value="D9">D9</td>
<td><input type="checkbox" name="seat[]" value="D10">D10</td>
<td><input type="checkbox" name="seat[]" value="D11">D11</td>
<td><input type="checkbox" name="seat[]" value="D12">D12</td>
<td><input type="checkbox" name="seat[]" value="D13">D13</td>
<td><input type="checkbox" name="seat[]" value="D14">D14</td>
<td><input type="checkbox" name="seat[]" value="D15">D15</td>
<td><input type="checkbox" name="seat[]" value="D16">D16</td>
<td><input type="checkbox" name="seat[]" value="D17">D17</td>
<td><input type="checkbox" name="seat[]" value="D18">D18</td>
<td><input type="checkbox" name="seat[]" value="D19">D19</td>
<td><input type="checkbox" name="seat[]" value="D20">D20</td>
</tr>
<tr>
<td>E</td>
<td><input type="checkbox" name="seat[]" value="E1">E1</td>
<td><input type="checkbox" name="seat[]" value="E2">E2</td>
<td><input type="checkbox" name="seat[]" value="E3">E3</td>
<td><input type="checkbox" name="seat[]" value="E4">E4</td>
<td><input type="checkbox" name="seat[]" value="E5">E5</td>
<td><input type="checkbox" name="seat[]" value="E6">E6</td>
<td><input type="checkbox" name="seat[]" value="E7">E7</td>
<td><input type="checkbox" name="seat[]" value="E8">E8</td>
<td><input type="checkbox" name="seat[]" value="E9">E9</td>
<td><input type="checkbox" name="seat[]" value="E10">E10</td>
<td><input type="checkbox" name="seat[]" value="E11">E11</td>
<td><input type="checkbox" name="seat[]" value="E12">E12</td>
<td><input type="checkbox" name="seat[]" value="E13">E13</td>
<td><input type="checkbox" name="seat[]" value="E14">E14</td>
<td><input type="checkbox" name="seat[]" value="E15">E15</td>
<td><input type="checkbox" name="seat[]" value="E16">E16</td>
<td><input type="checkbox" name="seat[]" value="E17">E17</td>
<td><input type="checkbox" name="seat[]" value="E18">E18</td>
<td><input type="checkbox" name="seat[]" value="E19">E19</td>
<td><input type="checkbox" name="seat[]" value="E20">E20</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
checkboxlimit(document.forms.reserve["seat[]"], 4)
</script>
<!--timer script below resets page after 60 seconds of no clicks-->
<div id="mycounter"></div>
<script>
i = 60;
function onTimer() {
$("submit").show(1000);
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('Your reservation has timed out.');
} else {
setTimeout(onTimer, 1000);
}
}
</script>
<button type="submit" class="button button-block" />Log Out
</button>
<?php echo "string"; </body>
</html>
--cart.php--
<?php session_start();
include 'dbh.php';
//seat from previous page selection
$seat = implode(', ', $_POST['seat']);
$id = $_SESSION['id'];
?>
<html>
<head>
<title>Shopping Cart</title>
</head>
<body>
<?php
echo "Shopping Cart <br /><br /> $id's Seats: $seat <br /><br /> Please confirm within 60 seconds.<br /><br />";
?>
<div id="mycounter"></div>
<!--script for timer on page load-->
<script>
i = 60;
function onTimer() {
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('Your reservation has timed out.');
window.history.back();
}
else {
setTimeout(onTimer, 1000);
}
}
window.onload = onTimer;
</script>
<br />
<br />
<?php
echo '<button>Confirm</button>';?>
<button type="submit" class="button button-block"/>Cancel</button>
</body>
</html>

if ($data[0] > 1) translates to 'if the first row from result array is greater than 1', instead of checking if the first row is greater than 1, check if the query returns more than 0 rows.
<?php
$checkseat = "SELECT * FROM reservations WHERE seat = '$_GET[seat]'";
$rs = mysqli_query($connection,$checkseat);
// get the row count of the result
$row_count = mysqli_num_rows($rs);
$data = mysqli_fetch_row($rs);
if ($row_count > 0) {
echo 'Seat is already reserved<br/>';
}
?>
As for any other issues with your code you will need to provide more specific questions. If you're not sure what parts aren't working I suggest enabling error reporting and looking at the browsers console for any error messages.
<?php
// this goes at the top of the php page
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>

How can I create checkbox validation that only allows a user to Select a checkbox if a previous checkbox is selected?

// What I want to do is allow the user to select many checkboxes. In order to make a booking the user must select atleast one seat number checkbox(this checkbox has to be one or many of the seat number checkboxes). They can also select child,wheelchair or special diet, but in order to do so, the checkbox that belongs to the corresponding seat number must be checked. If it isnt a validation or popup must occur stating that the seat number must be checked. Meaning that if a user wants to check either special diet, wheelchair or child the seat number must be checked. If the user clicks the submit button without any checkboxes selected than a validation should occur or popup stating that atleast one checkbox must be selected.THis is my current page layout
this is my nextpage.php
<!DOCTYPE html>
<head>
<style>
td{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
p{
font-size: 16px;
}
</style>
<body>
<?php
// Start the session
session_start();
?>
<?php
$str = $_GET['Confirm'];
$array = (explode(",",$str));
?>
<h1>Booking Details</h1>
Flight Details:
<table>
<tr>
<td> Route_no
</td>
<td><?php echo $array[0] ?>
</td>
</tr>
<tr>
<td>
To_city</td>
<td> <?php echo $array[1] ?>
</td>
</tr>
<tr>
<td>
From_city</td>
<td> <?php echo $array[2] ?>
</td>
</tr>
<tr>
<td>
Price</td>
<td> $<?php echo $array[3] ?>
</td>
</tr>
</table>
<?php
// Set session variables
$_SESSION["route_no"] = $array[0];
$_SESSION["to_city"] = $array[1];
$_SESSION["from_city"] = $array[2];
$_SESSION["price"] = $array[3];
echo "Session variables for this booking have been set.";
?>
<form action="Yourbookings.php" method="get">
<table>
<tr>
<td>Seat #</td>
<td>Child </td>
<td>WheelChair</td>
<td>Special Diet</td>
</tr>
<tr>
<td>Seat 1 <input type="checkbox" name="seat1" value="2"> </td>
<td> <input type="checkbox" name="Child" value="Child1"> </td>
<td> <input type="checkbox" name="WheelChair" value="WheelChair1"> </td>
<td> <input type="checkbox" name="Special Diet" value="SpecialDiet1"> </td>
</tr>
<tr>
<td>Seat 2 <input type="checkbox" name="seat2" value="1"> </td>
<td> <input type="checkbox" name="Child2" value="Child2"> </td>
<td> <input type="checkbox" name="WheelChair2" value="WheelChair2"> </td>
<td> <input type="checkbox" name="Special Diet2" value="SpecialDiet2"> </td>
</tr>
<tr>
<td>Seat 3 <input type="checkbox" name="seat3" value="seat3"> </td>
<td> <input type="checkbox" name="Child3" value="Child3"> </td>
<td> <input type="checkbox" name="WheelChair3" value="WheelChair3"> </td>
<td> <input type="checkbox" name="Special Diet3" value="SpecialDiet3"> </td>
</tr>
<tr>
<td>Seat 4 <input type="checkbox" name="seat4" value="seat4"> </td>
<td> <input type="checkbox" name="Child4" value="Child14"> </td>
<td> <input type="checkbox" name="WheelChair4" value="WheelChair4"> </td>
<td> <input type="checkbox" name="Special Diet4" value="SpecialDiet4"> </td>
</tr>
<tr>
<td>Seat 5 <input type="checkbox" name="seat5" value="seat5"> </td>
<td> <input type="checkbox" name="Child5" value="Child5"> </td>
<td> <input type="checkbox" name="WheelChair5" value="WheelChair5"> </td>
<td> <input type="checkbox" name="Special Diet5" value="SpecialDiet5"> </td>
</tr>
</table>
<?php
$_SESSION["price"] = $array[3];
?>
Total = $variable??
<input type="submit" name="Add booking" value="Add_booking">
</form>
</body>
</head>
</html>

In my opinion, forget about all the alerts and such, just use arrayed check box keys:
<tr>
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[child]" value="1"></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[child]" value="1"></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[child]" value="1"></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[child]" value="1"></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1"></td>
</tr>
Upon submission your array will look like this:
Array
(
[seat1] => Array
(
[child] => 1
[wheelchair] => 1
)
[seat2] => Array
(
[wheelchair] => 1
)
[seat3] => Array
(
[wheelchair] => 1
[specialdiet] => 1
)
[seat4] => Array
(
[child] => 1
[wheelchair] => 1
[specialdiet] => 1
)
[Add_booking] => Add_booking
)
EDIT:
Based on your clarification, you need some javascript (jQuery):
Demo:
https://jsfiddle.net/9e9embjt/
JavaScript:
$(document).ready(function(){
$(this).on('click',".seat_selector",function() {
var thisBtn = $(this);
var isChk = thisBtn.is(":checked");
var thisWrap = thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
if(isChk)
thisWrap.attr("disabled",false);
else {
thisWrap.attr("disabled",true);
thisBtn.attr("disabled",false);
}
var allSeats = $(".seat_selector");
var disable = true;
$.each(allSeats, function(k,v) {
if($(v).is(":checked")) {
disable = false;
return false;
}
});
$("#submitter").attr('disabled',disable);
});
});
HTML:
<table>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />

Javascript Select-all checkbox suddenly not working

I have 60 checkboxes with the name "AG[]" and i was using a check-all function to do the job, combined with an eventlistener on buttons that were named CheckAll. Suddenly the buttons stopped working..
The select-all function is
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
which works, because I tried onloading one run of this function.
This is the full script onload that adds the event listener on the buttons.
function script1() {
var el = document.getElementsByName('CheckAll');
el1 = el[0];
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];
el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);
}
If i run the function by itself like
SelectAll(0,8);
it works, but if I do it through addeventlistener it does not.
The code was working well and I was able to check-all with buttons but i dont get what happened..
Here's the jsfiddle jsfiddle
*Okay new problem. * the code that Andreas posted is still not working for me which probably means its because im running it from IE7, which does not support addeventlistener. So how do i make my code support firefox/chrome(Addeventlistener) and

Keeping addEventListener vs onclick in mind, the pragmatic and simple version is the following since it works in all browsers - downside as mentioned in the link is onlick supports only one event handler, while attachevent/addEventListener will fire all registered callbacks.
DEMO
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !checkies[i].checked;
}
}
function script1(){
var el = document.getElementsByName('CheckAll'); // get all elements with that name="" attribute
el[0].onclick=function() { selectAll(0,8) }
el[1].onclick=function() { selectAll(8,16)}
el[2].onclick=function() { selectAll(16,26)}
el[3].onclick=function() { selectAll(26,34)}
el[4].onclick=function() { selectAll(34,44)}
el[5].onclick=function() { selectAll(44,52)}
el[6].onclick=function() { selectAll(52,60)}
}

I've made some changes to work in IE < 9, i.e.
addEvent(el1, 'click', function(){selectAll(0,8)},false);
function addEvent(el, event, callback, bubble){
if(el.addEventListener) el.addEventListener(event, callback, bubble);
else if(el.attachEvent) el.attachEvent('on'+event, callback, bubble);
}
Complete Demo.

You forgot to put the word function before script1() so you got an error because it didn't know what script1() was on your body onload. I tried this code out (pretty much a copy and paste (I don't like JS fiddle all the time) and it seems to work.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<body onload="script1();">
Please check the box if you took a course in the respective subject in that semester.
<table width="200" border="1">
<tr>
<th scope="col"></th>
<th scope="col">8th Sem 1</th>
<th scope="col">8th Sem 2</th>
<th scope="col">9th Sem 1</th>
<th scope="col">9th Sem 2</th>
<th scope="col">10th Sem 1</th>
<th scope="col">10th Sem 2</th>
<th scope="col">11th Sem 1</th>
<th scope="col">11th Sem 2</th>
<th scope="col">12th Sem 1</th>
<th scope="col">12th Sem 2</th>
<th scope="col">Select All Semesters</th>
</tr>
<tr>
<th scope="row">History</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="A9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A12Sem2"></td>
<td><input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">English</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="B9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Mathematics</th>
<td><input name="AG[]" type="checkbox" value="C8Sem1">*</td>
<td><input name="AG[]" type="checkbox" value="C8Sem2">*</td>
<td><input name="AG[]" type="checkbox" value="C9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Science</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="D9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Foreign Language</th>
<td><input name="AG[]" type="checkbox" value="E8Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E8Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Visual and Performing Arts</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="F9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Electives</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="G9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
</table>
</body>
<script>
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
function script1(){
var el = document.getElementsByName('CheckAll'); // get all elements with that name="" attribute
el1 = el[0]; // get the first element (in this case, being the only one)
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];
// now we have an element to call the method on
el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);
}
</script>
</html>