How to Include PHP Variables in JavaScript

PHP

Combining PHP and JavaScript shouldn't scare you, because in some cases you may need to pass PHP variables to JavaScript in order to accomplish certain tasks in your applications. In this tutorial, I will show you how to include PHP variables in JavaScript by giving some examples.

PHP Variables in JavaScript

In another post, I talked about how to use PHP variables in CSS where we used the dynamic behavior of PHP in order to control the CSS styles on our pages dynamically. Using the same concept, we can pass PHP variables to the JavaScript code in order to control the JS scripts dynamically from the server side.

There a number of scenarios where you may need to include PHP variables in your JavaScript code. For example, when a page on your website is requested by the user, the PHP module on the server generates the page by executing all calculations and displaying all final variables on the page inside the user's browser window. Once the loading of the page is complete, you have no further control over the displayed page (except if you have server-based timed operations). However, if you pass PHP variables to the JavaScript code on your page during the page load, you can then continue to use those variables inside your JS scripts and control how your page is displayed and how it functions dynamically.

We will now see how we can pass PHP variables to JavaScript.

How to Pass PHP Variables to Inline JavaScript

As you may already know, there are basically two methods for including JavaScript code in your HTML pages. In the first method, the JS code is included on the same page, either in the <head> section or in the <body> section. Let's say we have our inline JS code in the head section and we want to pass the username PHP variable to JavaScript. In this case, we can use the following code:

<!doctype html>
<html>
<head>
  <script>
  var username = "<?php echo $username ?>";
  alert(username);
  </script>
</head>
<body>
  ...
</body>
</html>

In the above code, we simply defined a new variable in JS and named it as username. We then assigned the PHP variable $username to that JS variable by echoing it. Naturally, the $username variable should be defined previously in your page, above this line.

Note that we used quotes (") around the PHP code that outputs the $username, since using quotes around strings is required when declaring a variable in JS. If the PHP output is a number, you don't need to use quotes. But make sure to use the quotes correctly in case the output string may also contain quotes inside it, hence break the JS code.

How to Pass PHP Variables to External JavaScript

In the second method, the JS code is stored in an external JS file (e.g. script.js) and the file is linked from the HTML page. For example, if you want to pass a variable time value (in seconds) to a JS timer, you can use the following code:

<!doctype html>
<html>
<head>
  <script>
  var seconds = <?php echo $seconds ?>;
  </script>
  <script src="script.js"></script>
</head>
<body>
  ...
</body>
</html>

And something like this in your external JS file (script.js):

setTimeout(function() {
window.location.href = "/";
}, seconds * 1000);

In the above code, we first assigned the PHP $seconds value to the JS seconds variable. Once defined, this variable is now available in the DOM and the included script (script.js) can use it like it is shown. The above example redirects the user to the homepage after a variable amount of time in seconds (more on JavaScript redirects).

TIP: Both in PHP and in JavaScript, make sure to define any variables before you use them in your code, otherwise you will get "undefined variable" errors and your code will not work.

More PHP Tips

How to Get All Files and Folders in a Folder with PHP How to Download a File with PHP How to Control CSS Variables with PHP How to Create a ZIP Archive with PHP How to Get the Subfolders in a Folder with PHP How to Create a Cookie with PHP How to Delete a Cookie with PHP How to Get the Number of Files in a Folder with PHP How to Get All Files in a Folder with PHP PHP Image Watermark: How to Add a Watermark to Images in PHP

PHP Tips