Pass jquery consult to variable php-CodePudding

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 > Choose your seat</p>
<div >
    <section >
        <section >
            <img onclick="checker()" src="img/table.png" alt="table" >
            <img onclick="checker()" src="img/chair-available.png" alt="chair" >
            <img onclick="checker()" src="img/chair-available.png" alt="chair" >
            <img onclick="checker()" src="img/chair-available.png" alt="chair" >
            <img onclick="checker()" src="img/chair-available.png" alt="chair" >
            <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?

CodePudding user response：

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/

CodePudding user response：

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 >
  <img src="img/table.png" alt="table" >
  <img src="img/chair-available.png" alt="chair"  data-chair="1">
  <img src="img/chair-available.png" alt="chair"  data-chair="2">
  <img src="img/chair-available.png" alt="chair"  data-chair="3">
  <img src="img/chair-available.png" alt="chair"  data-chair="4">
</section>