How to make name of an image a session variable?

Question

<!--images acting as buttons-->
<form>
    <img src="tree_nuts.jpg" class="qac left" onclick="qac_search()" name="Tree Nuts">
    <img src="gluten.jpg" class="qac" onclick="qac_search()" name="Gluten">
</form>

<!--function-->
<script>
function qac_search(){
   <?php  $_SESSION['variable'] = //name of which image i clicked on;?>
    window.open("trial.php");
}
</script>

Here is my code. 2 buttons which, once clicked on, activate the function below in the code.

My aim is to make the $_SESSION['variable'] store the name of which image was clicked on (e.g.Tree Nuts or Gluten).

How do I do this?

You can't set a PHP variable from within a JavaScript function. PHP and JavaScript exist on different computers at different times. If you need to do this you will need to send the information to the server with an AJAX call. — Tangentially Perpendicular, Dec 24 '20 at 16:16
Does this answer your question? [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming). When reading this, remember that PHP is server side and JS is client side — M. Eriksson, Dec 24 '20 at 16:32

score 2 · Answer 1 · answered Dec 24 '20 at 16:19

/!\ The php code always get executed on the web server before the JS code. So you can't update a php variable without posting data to the server.

Putting that aside, I suggest that you set the variable $_SESSION['variable'] on the trial.php file, like this :

HTML :

<img src="tree_nuts.jpg" class="qac left" onclick="qac_search(this)" name="Tree Nuts">
//Pass a reference to the element into the function ------------^

JS :

function qac_search(element){
    // Get the name of the element (picture) that called the function
    var pictureName = element.name;
    // Send the pictureName to the php destination file
    window.open("trial.php?picture="+pictureName);
}

PHP : trial.php

<?php
   session_start();
   // Get the passed parameter
   if(isset($_GET['picture'])
       // Store the picture name on the session variable
       $_SESSION['variable'] = $_GET['picture'];

score 2 · Answer 2 · answered Dec 24 '20 at 16:28

You are mixing PHP and Javascript, this will not work. PHP is interpreted by the server, Javascript is interpreted by your browser. You could do this asynchronously using AJAX, you can make an HTTP Request to a PHP file when you click on an image.

Like this:

<img src="tree_nuts.jpg" class="qac left" onclick="qac_search(this)" name="Tree Nuts">
<img src="gluten.jpg" class="qac" onclick="qac_search(this)" name="Gluten">


<script>
    function qac_search(event) {
        let request = new XMLHttpRequest()

        request.addEventListener('load', () => {
            // what when the request is finished
            window.open("trial.php");
        })

        request.open('GET', 'yourfile.php?image=' + event.target.getAttribute('name'))
        request.send()
    }
</script>

youfile.php wold look like:

<?php

$_SESSION['variable'] = $_GET['image'];

Anyway I suggest you take a look to the security vulnerabilities you can have if you use insecure code like this.

score 0 · Answer 3 · answered Dec 25 '20 at 13:51

Pass the name in the event:

<!--images acting as buttons-->
<form>
    <img src="tree_nuts.jpg" class="qac left" onclick="qac_search('Tree Nuts')" name="Tree Nuts">
    <img src="gluten.jpg" class="qac" onclick="qac_search('Gluten')" name="Gluten">
</form>

So far, so good.

function qac_search(name) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      window.open("trial.php");
    }
  };
  xhttp.open("GET", "yourpage.php?name=" + name, true);
  xhttp.send();
}

And in your PHP code on the server you can do something like

$_SESSION["name"] = $_POST["name"];

but make sure that your session is started.

How to make name of an image a session variable?

3 Answers3