I'm doing a page where you can choose the chair you seat on, sort of like a bus seat system, I did a JQuery sentence in order to identify the chair, and i want to pass the identifier to PHP as a dynamic value. is there a way to do it?
My partyroom code:
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p class="instructions"> Choose your seat</p>
<div class="hipermain">
<section class="party">
<section class="table-container">
<img onclick="checker()" src="img/table.png" alt="table" class="table">
<img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos1">
<img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos2">
<img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos3">
<img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos4">
<img onclick="checker()" src="img/chair-available.png" alt="chair"
</div>
<script>
async function getChairs(){
let url = "code/chairs.php";
await fetch(url)
.then(response=>response.json())
.then(data=>{
console.log();
data.forEach(chair=>{
console.log(".pos"+chair.id);
var $refChair=$(".pos" + chair.id);
$refChair.attr("src","img/chair-occupied.png");
$refChair.attr("data-bs-toggle",".popover");
$refChair.attr("title","This chair is occupied by: ");
$refChair.attr("data-bs-content", chair.name);
new bootstrap.Popover($refChair);
console.log(chair.id)
});
})
}
getChairs()
</script>
<script>
$(".chair").on("click",function(){
console.log($(this).attr("class"))
});
function checker(){
var result = confirm('You have chosen a chair you want to proceed to check out? ');
if (result == true){
window.location.href = "paymethod.php";
}
}
</script>
</body>
</html>
As i said, is there a way to just take the number of the chair being selected and take it to a variable to use it as a chair identifier?
You are already using the Fetch API with fetch() so simply use it again to post the selected chair to your PHP script?
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Here is another link that explain how to use the Fetch API to send a POST request: POST Request with Fetch API?
If you don't want to use the Fetch API, you could still use XMLHttpRequest as described here: http://vanilla-js.com/
Add the chair number as a data attribute of the element. Then you can get it with .data() and use this in the click handler.
$(".chair").on("click", function() {
console.log($(this).data("chair"))
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="table-container">
<img src="img/table.png" alt="table" class="table">
<img src="img/chair-available.png" alt="chair" class="chair" data-chair="1">
<img src="img/chair-available.png" alt="chair" class="chair" data-chair="2">
<img src="img/chair-available.png" alt="chair" class="chair" data-chair="3">
<img src="img/chair-available.png" alt="chair" class="chair" data-chair="4">
</section>