As a PHP developer, it has been a real problem for me to use PHP variables in JavaScript files, and after much digging and searching, I got my answer years back. So I’m going to write this article so that you can avoid that long search (at least if you find this article soon) and know exactly how to insert a PHP variable in your JavaScript file.
There are two ways to use PHP variables in a javascript file. So we are going to go through them one by one.
Table of Contents
Method #1
The first method is going to be to use Javascript within your PHP file. So let’s say I have a PHP file that looks like this.
<!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>How to insert a PHP variable in a JavaScript file</title> </head> <body> <h1>Hello World</h1> </body> </html>
Example
So what you can do is start a script tag just before your body tag and then write your PHP codes within it. For example, I want to write an array of names in the document. I would approach the below codes.
PHP File
<!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>How to insert a PHP variable in a JavaScript file</title> </head> <body> <h1>Hello World</h1> <script> <?php $arr = ['Developer Wings', 'Kachkol Asa', 'Elon Musk']; foreach ($arr as $name) { ?> document.write("<?php echo $name; ?>"); <?php } ?> </script> </body> </html>
That way you can use your PHP variables within your Javascript file.
But what if you can’t write your whole JavaScript within your PHP file? Well, we have a solution for that as well.
So for that let’s see method 2 of how to insert a PHP variable in a JavaScript file.
Method #2
For this method, we will not use our whole javascript in your PHP file but what we will do is define a JS variable in your PHP file with the same value as the PHP variable and later access that variable in your Javascript file.
And it’s very simple so let’s see an example.
Example
PHP File
<!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>How do you insert a PHP variable in a JavaScript file?</title> </head> <body> <h1>Hello World</h1> <script> let my_var = "<?php echo $var_name; ?>"; </script> </body> </html>
As you can see at the end of the file we have a script tag and within that tag, we have defined our JS variable using the value of the PHP variable.
And later we can use that JS variable within our JS file.
JavaScript File
console.log(my_var)
I hope I was able to help you with your problem. If you are still getting any errors, please don’t hesitate to comment, I will respond as soon as possible and help you with your error.
