access PHP session value in other file's javascript-CodePudding

I'm trying to do a modal on a PHP file and I'm managing the form from the modal on another javascript file.

My question is: How can I access a session value in that javascript file.

Here is my HTML code on a php file:

<dialog  id="modal">
        <div class=modal-header>
            <h1>Insert a term</h1>
        </div>
        <form  method="dialog">
            <label>Title</label>
            <input type="text" id="title">
            <label>Description</label>
            <input type="text" id="description" placeholder="(Max 140 characters)">
            <div >
                <button  id="submitForm" type="submit">submit form</button>
                <button ><b>Close</b></button>
            </div>
        </form>
    </dialog>

And here is my 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!");
    }
 })

CodePudding user response：

Here's my sggestion:

Don't output the user id in the JS and remove it from the form altogether.

If you know it suppose to be the current user, then fetch the user id from the session in PHP on the page that receives the form request instead. You don't need to send it to the client just to get it back in PHP.

If you do send it from the client, you still need to validate/verify the id since you should never ever trust trust data you get from the client. Anyone can modify that ID in their client/browser and send what ever they want.

CodePudding user response：

Generate the JS file from PHP, call it 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!");
    }
 })

CodePudding user response：

As I suggested in my comment, I would try to add a hidden input to PHP HTML code like that:

<dialog  id="modal">
    <div class=modal-header>
        <h1>Insert a term</h1>
    </div>
    <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 >
            <button  id="submitForm" type="submit">submit form</button>
            <button ><b>Close</b></button>
        </div>
    </form>
</dialog>

And then get this by JS like that:

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!");
    }
})

Of course you could get the hidden input value in different ways, like:

const userID = document.getElementsByName("userId")[0];

UPDATE:

Well, I agree with the arguments of M. Eriksson in the comments. Maybe the logic behind this code may should be reconsidered.