How to Define PHP Variables Inside Javascript

Ryan Dube
Becoming a Web Designer
Becoming a Web Designer

There are many circumstances where web designers need to define PHP variables inside Javascript. While this sounds easy enough, it's complicated by the fact that Javascript is code that typically runs on the user's client (or browser). PHP, on the other hand, is scripting that runs on the web server. This architecture introduces some complexity when you want to pass variables between the two.

How to Define PHP Variables Inside Javacript

You can resolve the difficulty of passing variables directly between these two scripts by passing variables indirectly. Over the years, web designers have developed several methods to do that. These include passing variables as part of Javascript HREF call, using the PHP "echo" command, or using forms. Whichever method you decide to use depends mostly on the information you're planning to pass between the two scripts, and what you plan to do with it.

Passing Variables To a PHP Script

One method to integrate Javacript and PHP is to pass Javascript variables to a PHP file by calling the PHP page within Javascript. This method is most commonly used to pass screen information about the client's screen resolution to the PHP file, so that PHP can serve up the web page with the correct formatting for that size screen. They way this is done is by appending the variables to the end of the HREF call, as follows.

<script type="text/javascript">

width = screen.width;
height = screen.height;

if (width > 0 && height >0) {

window.location.href = "http://localhost/showsize.php?width=" + width + "&height=" + height;

} else {

exit();

}

</script>

Finally, in order to process the width and height variables passed to the PHP file above, the showsize.php file should contain the following code.

<?php
echo "<h1>Your Screen Resolution:</h1>";
echo "Your screen width is: ".$_GET['width']."<br>";
echo "Your screen height is: ".$_GET['height']."<br>";
?>

This technique allows you to pass any variable from your client Javascript application to the PHP code that's running on the server. More advanced forms of this could provide a lot more functionality to your web page. For example, your Javascript could pass items that you want to query from a database stored onyour server and the PHP code could perform the query and return the results to your web page.

Make Good Use of The Echo Command

One of the easiest ways to define PHP variables inside Javascript is to make use of the PHP "echo" command. This is the most effective way to define PHP variables anywhere in your web page, but most effectively, directly inside your Javascript. The example below shows how this technique works.

<?php $employees=10; ?>

<script type="text/javascript">
myvariable = <?php echo $employees; ?>;
document.write(myvariable);
</script>

In this example, the PHP "echo" is a lot like the old DOS "echo" that programmers used to use for old computer programs to print particular items to the computer screen. In this case, the PHP script is "printing" the value of the variable directly into the Javascript on the web page. It's very important to note that PHP variables must always be preceded by a "$" or you'll receive errors. In the example above, the PHP script first creates the "$employees" variable, and then assigns it the value of "10." Finally, within the "script" section, this variable can be called anywhere, so long as the "?php ?" convention is used. That is, the PHP echo command followed by the variable and bracketed on both sides by a question mark.

Other Ways Using Forms or Outputting JavaScript

There are two other important techniques that should be considered whenever you integrate PHP and Javascript. The first involves the method of creating Javascript "on-the-fly." This means that the PHP program will create the Javascript for the page depending on particular variables. This can be a very powerful method, because you can drastically change the behavior of a web page simply by modifying a variable. For example, you can customized menu options and behaviors depending who logs into your website.

<?php
if ($gender == "Female") {

// output something customized for women
echo "Welcome ". <?php echo $employee; ?> ."! You look stunning today!"<br />\n";

} else {

// output sometime customized for men
echo "Welcome ". <?php echo $employee; ?> ."! My you look handsome!"<br />\n"; echo "</script>\n";

}
?>

By creating the Javascript within the PHP, you can define your PHP variables inside the Javascript with very little effort. You can also perform the same technique the other way around. That is, you can embed PHP code within your Javascript in order to create the appropriate script as the page loads. Here is an example of this technique:

<script type="text/javascript" language="javascript">
<!--
<?php
$day=date("D");
if ($day=="Mon") {

echo("Welcome back to work, it's $day;");

}else{

echo("Today is $day;, have a nice day!");

?>
// -->
</script>

Final Words

As all of these examples show, there are a multitude of ways to use PHP variables inside Javascript, as well as using Javascript variables within PHP. Even though each script runs on either the client or the server, it's still possible to create a line of communication between the two scripts by using the methods outlined above.

How to Define PHP Variables Inside Javascript