PHP Variable to Javascript outputs php code

Question

For some reason, when passing a php variable to javascript using the following code.

JS:

var myVar = "<?php echo $pass ?>";
document.getElementById("output").innerHTML = myVar;
console.log(myVar);

And the PHP:

<?php
$myfile = fopen("testfile.txt", "r");
$pass = fread($myfile,filesize("testfile.txt"));
fclose($myfile);
?>

But instead of outputting the text in the file, "This is some text", it outputs the raw php code and not executing it: "

When looking at the p element in the Inspector, it is this:

<p id="output"><!--?php echo $pass;?--></p>

it outputs what raw PHP code ? which part is not being interpreted ? — Mathieu VIALES
– Mathieu VIALES, Commented Oct 18, 2017 at 22:14
Can you try taking the JavaScript out of the equation? It sounds like your PHP isn't necessarily executing. What if you have a div like <div><?= $pass; ?></div>? If it actually outputs "<?= $pass; ?>" then your PHP isn't being processed which would be the issue. — WOUNDEDStevenJones
– WOUNDEDStevenJones, Commented Oct 18, 2017 at 22:15
Make sure your the file with js code have a file extension like .phtml or .php — mega6382
– mega6382, Commented Oct 18, 2017 at 22:16

Jacobm001 · Accepted Answer · 2017-10-18 22:15:26Z

3

You cannot put PHP code into a javascript file that is run on the client's computer. PHP is interpreted on the server side, and generally speaking, only in .php files.

answered Oct 18, 2017 at 22:15

Jacobm001

4,5595 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slevy1 · Accepted Answer · 2017-10-19 00:24:21Z

Here's how I manged to have the code successfully execute on my local box:

js_php.php contents:

<html>
<head><title></title></head>

<body>
<div id="output"></div>

<?php
$myfile = fopen("./text_file.txt", "r");
$pass = fread($myfile,filesize("text_file.txt"));
fclose($myfile);
?>

<script>
var myVar = "<?php echo $pass ?>";
document.getElementById("output").innerHTML = myVar;
console.log(myVar);
</script>

</body>
</html>

text_file.txt contents:

Just another textfile :)

Resulting HTML code for js_php.php:

<html>
<head><title></title></head>

<body>
<div id="output"></div>


<script>
var myVar = "Just another textfile :)";
document.getElementById("output").innerHTML = myVar;
console.log(myVar);
</script>

</body>
</html>

Even though the code works, there are cleaner and faster ways of passing data from PHP to JavaScript. The OP could have passed the data as part of a query string, as follows:

revised js_php.php

<?php
$myfile = fopen("./text_file.txt", "r");
$pass = fread($myfile,filesize("text_file.txt"));
fclose($myfile);
header("location: js_php.html?" . urlencode("qs=$pass"));
exit;

js_php.html:

<html>
<head><title></title></head>

<body>
<div id="output"></div>
<script>
var qs = location.search;
var data =  decodeURIComponent( qs );
var split = data.split("=")[1];
split = split.replace(/\+/g," ");

document.getElementById("output").innerHTML = split;
console.log(data);
</script>

</body>
</html>

Note: Since PHP and JavaScript do not encode space characters the same way, the decoded JavaScript will have "+" characters that you need to replace with space characters. To do so, the regex will globally replace all of them in data.

Charlie Brumbaugh · Accepted Answer · 2017-10-18 22:24:15Z

0

If you wanted to output the variable to the file you could do,

<?php
$myfile = fopen("testfile.txt", "r");
$pass = fread($myfile,filesize("testfile.txt"));
fclose($myfile);
$string = "var myVar = ".$pass.";
document.getElementById('output').innerHTML = myVar;
console.log(myVar);"

and then write $string to the javascript file.

answered Oct 18, 2017 at 22:24

Charlie Brumbaugh

2171 gold badge5 silver badges15 bronze badges

Comments

Michael Beeson · Accepted Answer · 2017-10-19 00:30:00Z

Welcome to a whole new world of fun. As all of the answers here have pointed out, php happens on the server side and javascript on the client side. When you open a page on your computer, a lot of the html is generated on the server, and then some stuff happens on your own computer (your browser interprets the css and runs javascript). That's server side and client side respectively.

You can use php to generate javascript, which is what slevy1 has so helpfully demonstrated. That can work wonders, but things can get tricky when you mix the two aforementioned sides (what if you want to reload the text from the server?).

Another path is to have javascript send a message to the server requesting information, and then act accordingly. I'm talking about AJAX. Here's the w3 tutorial explaining how to set that up:

https://www.w3schools.com/xml/ajax_intro.asp

It's made easier if you're using jquery:

http://api.jquery.com/jquery.ajax/

Either way it's not as intuitive as simply sticking some php into your javascript file, unless you're generating the javascript in php. Good luck with the project!

Collectives™ on Stack Overflow

PHP Variable to Javascript outputs php code

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related