This article explains a method on how to pass variables between web programming languages javascript and php.

Many times we need to pass variables from one programming language to an other. A common practice is to affect a JavaScript variable with a php variable. This is easily done since you know that php code runs first on server and php variable is available at the time JavaScript gets to run. You just need to echo the php data directly to JavaScript. However, the inverse is a little more complicated and the way you should do it is using ajax, but in this tutorial we will pass a JavaScript variable to php using cookies.

This example will first display the content of a directory and is going to display it in a select html tag generated with php. Then using the onChange event we will call a JavaScript method that will set the cookie. After, we will verify our result in a small php file that will read the cookie set by the javascript function. In short, the JavaScript code set a variable (in a cookie) and php will read it.

Display cookie

Let’s start by creating the small file to display the cookie. You can call it display.php

<?php
var_dump($_COOKIE['name']);
echo $_COOKIE['name'];
?>

The var_dump() returns the data type and the data value. The second line is a standard display of what is set on the super-global variable $_COOKIE[]

Set cookie

The following file will set the cookie. The value of the cookie will be the name of the chosen file. You may want to undo comment the alert(item); instruction in order to see the selected id. Don’t forget this examples uses jquery.

<?php
 
// change the directory path to your folder path
$dir = "../uploads/";
// this is the current directory
$dir = ".";
 
$arrayOfFiles = new ArrayObject();
 
// Open a directory, and read all files in it
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            $arrayOfFiles[] = $file;
        }
        closedir($dh);
    }
}
$arraySize = count($arrayOfFiles);
?>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
  // set cookie
  function setCookie()
  {
  var index;
  index = $("select[name='listOfFiles'] option:selected").index();
  var item = "item" + index;
  // alert(item);
  document.cookie = 'name=' + document.getElementById(item).value;
  }
  </script>
 </head> 
 <body>
 <select name ="listOfFiles" onChange="setCookie()">
 <?PHP
 for ($c = 0; $c < $arraySize; $c++) {
  // creates the id
  $item = "item" . $c;
  echo '<option id=' . $item . '>' . $arrayOfFiles[$c] . '</option>';
 }
 ?>
 </select> 
 </body>
</html>

At the beginning of the script you need to set your path.

$dir = “.”; // this is the current directory

Download projet:

Test the project:

  • open php server like wamp
  • visit http://localhost/javascript2php/index.php
  • choose a file
  • visit http://localhost/javascript2php/display.php

dropbox

displaycookie

PHP generates a list with the files names inside the dropbox. When we choose a file (onChange event) we call a JavaScript function called setCookie. The following line is responsible of the writing of the cookie.

document.cookie = ‘name=’ + document.getElementById(item).value;

display.php display the value of the cookie

Note: don’t use this method if you are working with sensitive data…