Estoy tratando de hacer un modal en un archivo PHP y estoy administrando el formulario desde el modal en otro archivo javascript.
Mi pregunta es: ¿Cómo puedo acceder a un valor de sesión en ese archivo javascript?
Aquí está mi código HTML en un archivo php:
<dialog class="modal" id="modal"> <div class=modal-header> <h1>Insert a term</h1> </div> <form class="form" method="dialog"> <label>Title</label> <input type="text" id="title"> <label>Description</label> <input type="text" id="description" placeholder="(Max 140 characters)"> <div class="btn2-group"> <button class="button" id="submitForm" type="submit">submit form</button> <button class="close button"><b>Close</b></button> </div> </form> </dialog>Y aquí está mi modal.js:
const modal = document.querySelector("#modal"); const openModal = document.querySelector(".open-button"); const closeModal = document.querySelector(".close"); const submitForm = document.querySelector("#submitForm") openModal.addEventListener("click", () => { modal.showModal(); }); closeModal.addEventListener("click", () => { modal.close(); }); submitForm.addEventListener("click", () => { var title = document.getElementById("title").value; var desc = document.getElementById("description").value; var x = "<?=$_SESSION['user_id']?>"; if (title && desc) { alert(x); } else { print("Please fill everything up!"); } })Genere el archivo JS desde PHP, modal.js.php .
<?php session_start(); header("Content-type: text/javascript"); ?> const modal = document.querySelector("#modal"); const openModal = document.querySelector(".open-button"); const closeModal = document.querySelector(".close"); const submitForm = document.querySelector("#submitForm") openModal.addEventListener("click", () => { modal.showModal(); }); closeModal.addEventListener("click", () => { modal.close(); }); submitForm.addEventListener("click", () => { var title = document.getElementById("title").value; var desc = document.getElementById("description").value; var x = <?= json_encode($_SESSION['user_id']) ?>; if (title && desc) { alert(x); } else { print("Please fill everything up!"); } })Como sugerí en mi comentario, intentaría agregar una entrada oculta al código PHP HTML como esa:
<dialog class="modal" id="modal"> <div class=modal-header> <h1>Insert a term</h1> </div> <form class="form" method="dialog"> <label>Title</label> <input type="text" id="title"> <label>Description</label> <input type="text" id="description" placeholder="(Max 140 characters)"> <input type="hidden" id="user-id" name="userId" value="<?=$_SESSION['user_id']?>"> <div class="btn2-group"> <button class="button" id="submitForm" type="submit">submit form</button> <button class="close button"><b>Close</b></button> </div> </form> </dialog>Y luego obtenga esto por JS así:
const modal = document.querySelector("#modal"); const openModal = document.querySelector(".open-button"); const closeModal = document.querySelector(".close"); const submitForm = document.querySelector("#submitForm"); const userID = document.getElementById("user-id").value; openModal.addEventListener("click", () => { modal.showModal(); }); closeModal.addEventListener("click", () => { modal.close(); }); submitForm.addEventListener("click", () => { var title = document.getElementById("title").value; var desc = document.getElementById("description").value; if (title && desc) { alert(userID); } else { print("Please fill everything up!"); } })Por supuesto, puede obtener el valor de entrada oculto de diferentes maneras, como:
const userID = document.getElementsByName("userId")[0];ACTUALIZAR:
Bueno, estoy de acuerdo con los argumentos de M. Eriksson en los comentarios. Tal vez se deba reconsiderar la lógica detrás de este código.
Aquí está mi sugerencia:
No envíe la identificación de usuario en el JS y elimínela del formulario por completo.
Si sabe que se supone que es el usuario actual, obtenga la identificación del usuario de la sesión en PHP en la página que recibe la solicitud de formulario. No necesita enviarlo al cliente solo para recuperarlo en PHP.
Si lo envía desde el cliente, aún necesita validar/verificar la identificación, ya que nunca debe confiar en los datos de confianza que obtiene del cliente. Cualquiera puede modificar esa ID en su cliente/navegador y enviar lo que quiera.