access PHP session value in other file's javascript

Question

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 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>

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

Could this work with an hidden input inside your HTML in PHP, where you put your <?=$_SESSION['user_id']?> as a value and then get the hidden input value with JS? — Kurt Lagerbier
– Kurt Lagerbier, Commented Mar 25, 2022 at 15:41
@KurtLagerbier It isn't ideal, but I can make that happen. You recommend me getting that hidden value by document.getElementById as well? — Miguel Rodrigues
– Miguel Rodrigues, Commented Mar 25, 2022 at 15:48
Let me try to put my idea into an answer. Give me a sec. please... — Kurt Lagerbier
– Kurt Lagerbier, Commented Mar 25, 2022 at 15:56
Why do you need this var x = "<?=$_SESSION['user_id']?>"; at all in your JS? If you need to call the back end, you can get that value there instead. — M. Eriksson
– M. Eriksson, Commented Mar 25, 2022 at 15:58
@M.Eriksson I was going to process the form in JS, do you recommend I manage it in PHP? I'm still a student that's why I'm asking for opinions — Miguel Rodrigues
– Miguel Rodrigues, Commented Mar 25, 2022 at 16:02

M. Eriksson · Accepted Answer · 2022-03-25 16:10:40Z

1

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.

answered Mar 25, 2022 at 16:10

M. Eriksson

13.7k4 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter · Accepted Answer · 2022-03-25 15:46:09Z

1

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

edited Mar 25, 2022 at 15:46

Peter

32.1k6 gold badges57 silver badges68 bronze badges

answered Mar 25, 2022 at 15:40

Barmar

789k57 gold badges554 silver badges669 bronze badges

10 Comments

Miguel Rodrigues Over a year ago

I tried your answer, but now my modal just doesn't open and yes I changed my file to modal.js.php

Peter Over a year ago

I took the liberty to fix the XSS vulnerabilty. All output must be escaped manually for the context it's used in (here JavaScript) when using plain PHP for templating.

Barmar Over a year ago

@MiguelRodrigues Are you loading this script after logging in? It won't work if modal.js.php is loaded on the login page itself, since the session variable won't be set yet.

Barmar Over a year ago

@Peter Thanks. I was fixated on the issue of getting the PHP to execute, not the design of the PHP.

Miguel Rodrigues Over a year ago

Thank you, do you know how should I "call" this file in my php file? I guess <script src="modal.js.php"></script> won't work

|

Kurt Lagerbier · Accepted Answer · 2022-03-25 16:10:30Z

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

<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>

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.

Collectives™ on Stack Overflow

access PHP session value in other file's javascript

3 Answers 3

Comments

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related