Pass jquery consult to variable php

Question

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?

Why are you using both `onclick="checker()"` and `$(".chair").on("click", ...)`? Do everything in the `.on()`. Then you can put the chair number in the element, and get that in the function. — Barmar, Mar 24 '22 at 23:48
i changed it to this now ``` $(".chair").on("click",function realtek(){ var chimba = $(this).attr("class"); let letter1= chimba.charAt(9); let letter2 = chimba.charAt(10); var amazing = letter1+letter2; var plis = document.getElementById("so"); plis.setAttribute("name", amazing); var some = plis.getAttribute("name") //window.location.href="paymethod.php"; });```it attaches the numbers into a name variable but i don't know how to move it to php from there — Scrab, Mar 25 '22 at 10:14

E-telier · Answer 1 · 2022-03-25T11:56:26.970

0

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/

edited Mar 25 '22 at 11:56

answered Mar 25 '22 at 08:14

E-telier

766
5
15

can you help me a little bit more with the syntaxis of the code pls? – Scrab Mar 25 '22 at 10:13
@Scrab Here is a link that explain how to use the **Fetch API** to send a **POST** request : https://stackoverflow.com/questions/39565706/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/ – E-telier Mar 25 '22 at 11:54
1

@E-telier Since they're already using jQuery, they can also use `$.ajax()`. – Barmar Mar 25 '22 at 14:25
I didn't interpret the question as asking how to post to PHP, but how to get the chair number when they click on a chair. – Barmar Mar 25 '22 at 14:26

score 0 · Answer 2 · answered Mar 25 '22 at 14:32

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>

Pass jquery consult to variable php

2 Answers2