How can I send variables from PHP to Javascript?

Question

I'm a newbie with JavaScript, and I can't make this codes work. I just want to know if I can put the JavaScript code inside an HTML code or it should be a different file.

<?php
$bool = false;
$num = 3 + 4;
$str = "A string here";
?>

<script type="text/javascript">
// boolean outputs "" if false, "1" if true
var bool = "<?php echo $bool ?>"; 

// numeric value, both with and without quotes
var num = <?php echo $num ?>; // 7
var str_num = "<?php echo $num ?>"; // "7" (a string)
var str = "<?php echo $str ?>"; // "A string here"
</script>

it should be .php file and should be run on lampp stack of apache 2 — Santosh Ram Kunjir, Sep 30 '16 at 10:00
Possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — YMomb, Sep 30 '16 at 10:01
It depends if you have configured your server to parse .html files with php. — Epodax, Sep 30 '16 at 10:02

score 2 · Answer 1 · edited Sep 30 '16 at 11:20

2

When passing values from PHP to JavaScript, you should use json_encode() function.

var bool = <?= json_encode($bool); ?>

edited Sep 30 '16 at 11:20

KernelPanic

2,328
7
47
90

answered Sep 30 '16 at 11:03

Sebastian

526
2
15

Can you update the answer to explain in detail why this is. I understand that it works, but why is this best practice and why does it work? The idea of JSON encoding a single scalar value seems weird, as there is no structure and no key... – Craig Jacobs Jan 27 '17 at 01:09

Naresh Kumar P · Answer 2 · 2016-09-30T16:26:05.477

You can pass the PHP variable to JavaScript using the php tags which is included into the js functions.

Necessary Checks:

Ensure that you place the ; at the end of the line.
You need to echo the variable in order to set the value..

Example:

<?php
$date= date();
?>
<script>
    document.write(<?php echo $date; ?>);
</script>

The same trick can be applied to other data types (e.g. integers, arrays, objects, etc.). The following passes an entire array from PHP to JavaScript:

Using json_encode(), you'll always get a properly formatted JavaScript object.

$shirt = array(
    'color' => 'blue',
    'number' => 23,
    'size' => 'XL'
);

echo '<script>';
echo 'var shirt = ' . json_encode($shirt) . ';';
echo '</script>';

The output looks like this:

<script>var shirt = {"color":"blue","number":23,"size":"XL"}</script>

To pass scalar data held in a PHP variable ($val) to a JavaScript variable, place the following in a JavaScript segment:

var val = "<?php echo $val ?>";

Notice the quotes around the PHP tags. This will result in a string value in JavaScript which you may need to convert for use in your scripts. If the PHP value is numeric, you don't need to include the quotes.

Here we demonstrate with boolean, numeric, and string values assigned to PHP variables:

<?php
$bool = false;
$num = 3 + 4;
$str = "A string here";
?>

You could output them into JavaScript with the following:

<script type="text/javascript">
// boolean outputs "" if false, "1" if true
var bool = "<?php echo $bool ?>"; 

// numeric value, both with and without quotes
var num = <?php echo $num ?>; // 7
var str_num = "<?php echo $num ?>"; // "7" (a string)

var str = "<?php echo $str ?>"; // "A string here"
</script>

There are some conditions under which strings that are valid in PHP may generate errors in JavaScript when output using this approach. The PHP json_encode function can be used to resolve these problems as well as to preserve data type of booleans and numbers.

Note that in your example var val = ""; that if $val is sourced from a GET or POST that it may be possible for an attacker to insert double quotes or close the surrounding script tag creating an XSS vulnerability. See the accepted answer to my question here http://security.stackexchange.com/questions/147623/pci-scan-reports-apache-xss-vulnerability-is-it-a-false-positive?noredirect=1#comment278460_147623 — Craig Jacobs, Jan 27 '17 at 01:13

How can I send variables from PHP to Javascript?

2 Answers2