Estoy creando una página donde puedes elegir la silla en la que te sientas, algo así como un sistema de asiento de autobús, hice una oración de JQuery para identificar la silla y quiero pasar el identificador a PHP como un valor dinámico. ¿Hay una manera de hacerlo?
Mi código de salón de fiestas:
<?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>Como dije, ¿hay alguna manera de simplemente tomar el número de la silla que se está seleccionando y llevarlo a una variable para usarlo como identificador de silla?
¿Ya está utilizando Fetch API con fetch() , así que simplemente utilícelo de nuevo para publicar la silla seleccionada en su script PHP?
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Aquí hay otro enlace que explica cómo usar Fetch API para enviar una solicitud POST : ¿Solicitud POST con Fetch API?
Si no desea utilizar la API Fetch, aún puede utilizar XMLHttpRequest como se describe aquí: http://vanilla-js.com/
Agregue el número de silla como un atributo de datos del elemento. Luego puede obtenerlo con .data() y usarlo en el controlador de clics.
$(".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>