How do i pass a data from a piece of js code to php session?

Question

I have a question regarding passing data to a php session when an the element is clicked. the data that needs to be passed is looped in a foreach loop which is what i am having difficulty with.

I want the page to refresh in order to change the language on the entire page. I have ajax examples below which arent the logical solution to my problem(as pointed out by a few users)

<?php foreach($languages as $single_language){?>
    <li>
        <a class="d-flex align-items-center <?php if($_SESSION['languages_id'] ==     $single_language["id"]){ echo "disabled"; }?>" data-id="<?php echo $single_language["id"]?>" data-direct="<?php echo $single_language["directory"]?>" id="language_selection_<?php echo $single_language["id"]?>" href="#">
            <img src="<?php echo $single_language['short_name']. '.png' ?>" />
            <span class="ps-2"><?php echo $single_language["name"]; ?></span>
        </a>
    </li>
<?php } ?>

Data stored in languages that i need to pass is id and directory. E.g. $single_language["id"] = 4 and $single_language["directory"] = dutch. There are 3 'languages' that are selectable and when selected should display the according flag.

Ive tried using ajax:

$('[id^=language_selection_]').click(function(){
    var Lid = $(this).data('id');
    var direct = $(this).data('direct');

    $.ajax({
        type: 'post',
        success: function(response){
            <?php 
                $_SESSION['languages_id'] = $_POST['Lid'] ;
                $_SESSION['language'] = $_POST['direct'];
            ?>
        }
     });       

which did not store any data into my session. the second option of ajax i used was:

$('[id^=language_selection_]').click(function(){
    var Lid = $(this).data('id');
    var direct = $(this).data('direct');
    $.ajax({url: "ajax_sidebar.php?Lid="+Lid+"&direct="+direct, success: function(result){
        alert('test');
    }
});

and ajax_sidebar.php has

<?php 
session_start();
$_SESSION['languages_id'] = $_GET['Lid'];
$_SESSION['language'] = $_GET['direct'];
?>

which also did not seem to work, it did not change the session at all and never reached the alert.

when i put this within the foreach the code does work and the last value out of the 3 gets saved, not the one that gets clicked: $_SESSION['languages_id'] = $single_language["id"] ; $_SESSION['language'] = $single_language["directory"];

Ive seen a few other options online which all seemed to give me an error one way or another so im hoping that someone can help me out.

Answer 1

First of all make it clear that you want to do it with a page refresh or without a page refresh, as Ajax is irrelevant in the case of page refresh.

Now Ajax way: The alert is not working because of an empty response as you haven't set any response in your PHP code to send to your Ajax code

You can do it in multiple ways but here is the POST method way:

a) post method with string response

$('[id^=language_selection_]').click(function(){     
    var Lid = $(this).data('id');
    var direct = $(this).data('direct');
    $.ajax({
        url: "ajax_sidebar.php",
        data:{"Lid": Lid, "direct": direct},
        success: function(result){
            console.log(result);        
        }   
    }); 
}); 

And then php code (ajax_sidebar.php):

<?php  
session_start(); 
$_SESSION['languages_id'] = $_POST['Lid']; 
$_SESSION['language'] = $_POST['direct']; 
echo "done"; 
exit; 
?>

b) post method with JSON response:

$('[id^=language_selection_]').click(function(){     
    var Lid = $(this).data('id');
    var direct = $(this).data('direct');
    $.ajax({
        url: "ajax_sidebar.php",
        dataType:'json',
        data:{"Lid": Lid, "direct": direct},
        success: function(result){
            alert($.parseJson(result.msg));         
        }   
    }); 
}); 

And then php code (ajax_sidebar.php):

<?php  
session_start(); 
$_SESSION['languages_id'] = $_POST['Lid']; 
$_SESSION['language'] = $_POST['direct']; 
echo json_encode(['status'=>1,'msg'=>'successfully updated']); 
exit; 
?>

Now with page refresh, Single page PHP code (no Ajax/jQuery code required):

<?php

session_start();
<?php foreach($languages as $single_language){?>
    <li>
        <a class="d-flex align-items-center <?php if($_SESSION['languages_id'] == $single_language["id"]){ echo "disabled"; }?>" id="language_selection_<?php echo $single_language["id"]?>" 
        href="<same page url>?Lid=<?php echo $single_language["id"]?>&direct="<?php echo $single_language["directory"]?>">
            <img src="<?php echo $single_language['short_name']. '.png' ?>" />
            <span class="ps-2"><?php echo $single_language["name"]; ?></span>
        </a>
    </li>
<?php } ?>

<?php
if(!empty($_GET['Lid']) && !empty($_GET['direct'])){
    $_SESSION['languages_id'] = $_GET['Lid'];
    $_SESSION['language'] = $_GET['direct'];
}

Note: on this single php code file make sure session_start(); will be on top of the file.

Answer 2

In this code:

<?php 
                $_SESSION['languages_id'] = $_POST['Lid'] ;
                $_SESSION['language'] = $_POST['direct'];
 ?>

you just setted once session keys by data taken from the post and then send all html with this code to client side. You do this on server side and that operations just creating empty js function because nothing will be returned by above or returned undefined.

You must write on js language something like this:

$.ajax({
        type: 'post',
        data: { lid: Lid, direct },
        url: '/save-something-on-server-side.php',
        dataType: 'json',
        success: function(response){
           console.log('success')
        }
     });     

And on php server route, e.g. file save-something-on-server-side.php you should save data to session:

$_SESSION['languages_id'] = $_POST['Lid'];
$_SESSION['language'] = $_POST['direct'];

Answer 3

On the page with the for loop add this in the top.

session_start();

if(isset($_GET['LID'])){
    $_SESSION['languages_id'] = $_GET['Lid'];
}
if(isset($_GET['direct'])){
    $_SESSION['language'] = $_GET['direct'];
}

Add make the changes in the forloop creating the hyperlinks

    <?php 
if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on'){
    $url = "https://";   
}else{
    $url = "http://";   
}  
    $url.= $_SERVER['HTTP_HOST'];   

    $url.= $_SERVER['REQUEST_URI'];    
    
    $content = '';
foreach($languages as $single_language){
    $content .= 
    '<li>
        <a 
            class="d-flex align-items-center '. ($_SESSION['languages_id'] == $single_language["id"] ?  "disabled" : '') .' " 
            data-id="'.$single_language["id"].'" 
            data-direct="'. $single_language["directory"].'" 
            id="language_selection_'.$single_language["id"].'" 
            href="'.$url . '?LID=' . $single_language["id"] . '&direct=' . $single_language["directory"].'"
        >
            <img src="' . $single_language['short_name'] . '.png" />
            <span class="ps-2">'. $single_language["name"].'</span>
        </a>
    </li>';

} 
echo $content;
?>

Then you can remove the event listerner from javascript entirely.

This code is untested so there might be minor typos.

Edited to use direct hyperlinks proposed by @ADyson

Answer 4

You cannot run PHP code in JavaScript, that's not how the relationship between JavaScript and PHP works. PHP generates html and JavaScript code, which will then be run on the client side. If you want your JavaScript to modify something in you PHP (the session in your case) you will have to do an http post request with that data, then do something with that data in PHP.

Do a POST request and send the Lid and direct values

$('[id^=language_selection_]').click(function (event) {
    event.preventDefault(); //prevent the page from reloading when clicking on the anchor tag
    var Lid = $(this).data('id');
    var direct = $(this).data('direct');

    $.ajax({
        type: 'post',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: "Lid=" + Lid + "&direct=" + direct,
        success: function() {location.reload();} //reload the page after a successfull POST request
    });
});

in PHP, check if the request is a POST request, then check if Lid and direct are set in the $_POST superglobal, if they are then you can change the session values with the ones posted from the client.

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if(!isset($_POST['Lid']) || !isset($_POST['direct'])) {
       die("Missing Lid and/or direct");
    }
    
    session_start();
    $_SESSION['languages_id'] = $_POST['Lid'];
    $_SESSION['language'] = $_POST['direct'];
}