Table of Contents
Use echo method
In order to pass variable from PHP to JavaScript, you will need to use the echo statement. This will print out the variable for you. For example, if you have a variable named $name, you would use the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <?php $name = "Jane"; echo '<script> let name = "' . $name . '"; console.log(name); </script>'; ?> </html> |
This will output a piece of JavaScript code that looks like this:
|
1 2 3 4 5 6 |
<script> let name = "Jane"; console.log(name); </script> |
You can then use the name variable in your JavaScript code.
In case, you are using int parameter, you don’t need quotes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <?php $value = 10; ?> <script> const val = <?php echo $value; ?>; </script> </html> |
It will be converted into javascript code as const val=10.
Use json_encode method
Another popular method is to use the json_encode function. This function will take a PHP variable and convert it into a JSON string. For example, if you have a PHP array called $foo, you can convert it to a JSON string like this:
|
1 2 3 |
$foo_json = json_encode($foo); |
You can then output this JSON string in your HTML code like this:
|
1 2 3 |
<script>let foo = <?php echo $foo_json; ?>;</script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <?php $array = [1, 2, 3]; $arr_json = json_encode($array); ?> <script>let foo = <?php echo $arr_json; ?>; </script> </html> |
This will output a piece of JavaScript code that looks like this:
|
1 2 3 |
let foo = [1,2,3,4,5]; |
You can then use the foo variable in your JavaScript code.
There are a few other methods that you can use to pass variables from PHP to JavaScript, but these are two of the most popular. Give them a try and see which one works best for you.
Use htmlspecialchars method
We can link the results of a PHP operation by passing the result to the htmlspecialchars() method. This allows us to escape the results because it might not be valid HTML. Another key part of this approach is to create HTML element that’s not visible to the user but is present, and then pass the value to JavaScript within the script tag.
Let’s illustrated this approach by calculating some numbers in PHP and then passing the answer to JavaScript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="invisible" style="display: none;"> <?php $result = 2 * 2; echo htmlspecialchars($result); ?> </div> </body> <script> let div = document.getElementById("invisible"); let data = div.textContent; </script> </html> |
When you render the PHP script within a browser, you should see the output below within the console tab.
|
1 2 3 |
4 |
