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>
Related
I have created a HTML form with checkbox like this, but I am struggle to turn them into two dimensional
<input type="checkbox" id="orange" name="fruit1" value="orange">
<input type="checkbox" id="banana" name="fruit2" value="banana">
<input type="checkbox" id="apple" name="fruit3" value="apple">
<input type="checkbox" id="pear" name="fruit4" value="pear">
<input type="checkbox" id="ripe" name="feature1" value="ripe">
<input type="checkbox" id="price" name="feature2" value="price">
<input type="checkbox" id="quantity" name="feature3" value="quantity">
<input type="checkbox" id="cost" name="feature4" value="cost">
What I want is something like this
orange
banana
apple
pear
ripe
Tick
price
Tick
Tick
Tick
quantity
Tick
Tick
cost
Tick
Any method to achieve this?
You can build an table like below
<form method="POST">
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
<th>orange</th>
<th>banana</th>
<th>apple</th>
<th>pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" name="matrix[ripe][]" value="orange"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="banana"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="apple"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="pear"></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" name="matrix[price][]" value="orange"></td>
<td><input type="checkbox" name="matrix[price][]" value="banana"></td>
<td><input type="checkbox" name="matrix[price][]" value="apple"></td>
<td><input type="checkbox" name="matrix[price][]" value="pear"></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" name="matrix[quantity][]" value="orange"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="banana"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="apple"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="pear"></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" name="matrix[cost][]" value="orange"></td>
<td><input type="checkbox" name="matrix[cost][]" value="banana"></td>
<td><input type="checkbox" name="matrix[cost][]" value="apple"></td>
<td><input type="checkbox" name="matrix[cost][]" value="pear"></td>
</tr>
</tbody>
</table>
<button type="submit">sub</button>
</form>
if you submit form like below
Output of the form like below
Updated :if you are using Laravel
#php
$fruits=[
'orange',
'banana',
'apple',
'pear'
];
$features=['ripe','price','quantity','cost'];
#endphp
<form method="POST">
#csrf
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
#foreach($fruits as $fruit)
<th>{{$fruit}}</th>
#endforeach
</tr>
</thead>
<tbody>
#foreach($features as $value)
<tr>
<td>{{$value}}</td>
#foreach($fruits as $fruit)
<td><input type="checkbox" name="matrix[{{$value}}][]" value="{{$fruit}}"></td>
#endforeach
</tr>
#endforeach
</tbody>
</table>
<button type="submit">sub</button>
</form>
using jquery
<div id="dynamic-content"></div>
<script>
let fruits=[
'orange',
'banana',
'apple',
'pear'
];
let features=['ripe','price','quantity','cost'];
$.each(features , function(index, val) {
console.log(index, val)
});
let html=`<table class="table table-bordered ">
<thead>
<tr>
<th></th>`;
$.each(features , function(index, val) {
html += ` <tr>
<td>${val}</td>`;
$.each(fruits, function (index, val) {
html += `<td><input type="checkbox" name="matrix[${val}][]" value="${val}"></td>`;
})
})
html+=`</tr></tbody>
</table>`;
$('#dynamic-content').html(html)
</script>
I don't fully understand what you want to do. Maybe this works?
<table>
<thead>
<tr>
<th></th>
<th>Orange</th>
<th>Banana</th>
<th>Apple</th>
<th>Pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" id="orange_ripe" /></td>
<td><input type="checkbox" id="Banana_ripe" /></td>
<td><input type="checkbox" id="Apple_ripe" /></td>
<td><input type="checkbox" id="Pear_ripe" /></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" id="orange_price" /></td>
<td><input type="checkbox" id="Banana_price" /></td>
<td><input type="checkbox" id="Apple_price" /></td>
<td><input type="checkbox" id="Pear_price" /></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" id="orange_quantity" /></td>
<td><input type="checkbox" id="Banana_quantity" /></td>
<td><input type="checkbox" id="Apple_quantity" /></td>
<td><input type="checkbox" id="Pear_quantity" /></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" id="orange_cost" /></td>
<td><input type="checkbox" id="Banana_cost" /></td>
<td><input type="checkbox" id="Apple_cost" /></td>
<td><input type="checkbox" id="Pear_cost" /></td>
</tr>
</tbody>
</table>
One way would be to build a table and input in every cell a inputfield with the value x/y.
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>
I have a table which has a checkbox in the first column (in a <td> element) of every row. When this is checked, the rest of the columns in that row will be displayed.
I have read several articles on this topic with some great examples but can't achieve exactly what I want. I had been able to hide the rest of the <td> elements using css but not been able to make it visible.
I understand this is possible with JavaScript but I am not well versed in it. Any help is highly appreciated.
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using jQuery:
$(document).ready(function() {
$("tr td:first-child :checkbox").change(function() {
var checkboxes = $(this).parent().siblings("td").children(":checkbox");
var containers = $(this).parent().siblings("td:not(first-child)");
if (this.checked) {
containers.css('visibility', 'visible');
checkboxes.prop("checked", true);
} else {
containers.css('visibility', 'hidden');
checkboxes.prop("checked", false);
}
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using only JS:
var primaryCheckboxes = document.querySelectorAll("tr td:first-child input[type=checkbox]");
Array.from(primaryCheckboxes).forEach(checkbox => {
checkbox.addEventListener("click", function(event) {
var secondaryCheckboxes = this.parentElement.parentElement.querySelectorAll("input[type=checkbox]");
var checkedSatus = false,
visibilityStatus = "hidden";
if (this.checked) {
checkedSatus = true;
visibilityStatus = "visible";
}
Array.from(secondaryCheckboxes).forEach(checkbox => {
if (checkbox !== this) {
checkbox.checked = checkedSatus;
checkbox.parentElement.style.visibility = visibilityStatus;
}
});
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable>
<input type="checkbox" name="level3" value="3" />
</td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable>
<input type="checkbox" name="level4" value="4" />
</td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Here is my code:
$(".all_checkboxes").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
My question is almost clear in the fiddle above. As you can see, currently all checkboxes will be selected in both sections. All I need to do is define a scope for jQuery selector. How can I do that?
$('input:checkbox') will search for all the checkboxes. You will have to navigate to closest table and search checkboxes in it.
$(".all_checkboxes").click(function () {
$(this)
.closest('table')
.find('input:checkbox')
.not(this)
.prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
If you want with in table. Use closest() to get the checkbox with in table
Use change event instead of click.
$(".all_checkboxes").change(function () {
$(this).closest('table').find(':checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
Looks like this is going to be a repeated action so you should consider having a faster solution than the ones available with jQuery.
Also your markup is not very well prepared for these kinds of actions. If updating the markup is an option. You can go as follows:
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="names" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="section" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>547498</td>
</tr>
</table>
Native JS version (fastest performance):
function checkAllHandler(e){
var state = this.checked;
Array.prototype.forEach.call(
document.querySelectorAll("[data-rel=" + this.dataset.checkall+"]"),
function(x){
x.checked = state;
}
)
}
Array.prototype.forEach.call(document.querySelectorAll(".all_checkboxes"), function(x){
x.addEventListener("click", checkAllHandler);
})
Codepen: https://codepen.io/Mchaov/pen/vexprr?editors=1010
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);
?>