13

I currently echo certain variables in hidden input fields and read them out with Javascript whenever I need them.

Me and a colleague are now thinking of generating an extra Javascript file with PHP which only contains all variables for Javascript. This way the variables already exist and there is no extra code in the HTML.

What are good ways to pass variables from PHP to Javascript? And how does our solution sound?

Gregory Bolkenstijn
  • 10,003
  • 7
  • 36
  • 38

4 Answers4

25

General Data Passing

A commonly used exchange format for JavaScript is JSON, using json_encode. A PHP file like this:

<?php
    $data = array("test" => "var", "intvalue" => 1);
    echo json_encode($data);
?>

then returns a JavaScript object literal like this:

{
    "test" : "var",
    "intvalue" : 1
}

You can directly echo it into a JavaScript variable on your page, e.g.:

var data = <?php echo json_encode($data)?>;

...or request it via Ajax (e.g. using jQuery's getJSON).

Outputting to attributes on tags

If you just need to output a string to an attribute on a tag, use htmlspecialchars. Assuming a variable:

<?php
$nifty = "I'm the nifty attribute value with both \"double\" and 'single' quotes in it.";
?>

...you can output it like this:

<div data-nifty-attr="<?php echo htmlspecialchars($nifty)?>">...</div>

...or if you use short tags:

<div data-nifty-attr="<?= htmlspecialchars($nifty)?>">...</div>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Daff
  • 43,734
  • 9
  • 106
  • 120
  • +1 - this is the obvious solution if you're thinking of generating an external file for the script. Be aware that you wouldn't be able to generate JavaScript functions using JSON, however. – Andy E May 04 '10 at 14:23
  • 2
    Yep, JSON is definitely easiest. Also use the `JSON_HEX_TAG` option if you're writing JSON into a `` sequence in a string from prematurely ending the block (and potentially causing XSS). – bobince May 04 '10 at 14:24
  • +1 for presenting the clean `data-` attribute solution. – kapa Feb 06 '13 at 00:04
  • Thanks for the great suggestions! PS hi from three years later! – Michael Johnston May 25 '13 at 03:23
  • when I put this var data = ; inside the – Adry Mar 28 '17 at 08:53
  • @Adry you need to prase that data using JSON.prase( – shamaseen Jul 21 '18 at 12:12
5
<?php
  $my_php_var = array(..... big, complex structure.....);
?>
<script type="text/javascript">
  my_js_var = <?=json_encode ($my_php_var)?>;
</script>
Javier
  • 60,510
  • 8
  • 78
  • 126
3

I use to echo them all together at the head of the HTML. Seems clean enough for my needs :)

zitronic
  • 49
  • 8
2

There are 3 ways you could do it:

  • Echo them directly into the javascript source: <?echo "var user = '$user';";?>. Works, but it's messy.
  • Pass them in via an ajax request. This is the closest you can come to native variable passing, but the downside is it takes an extra HTTP request.
  • What you're doing, which is passing them by generating hidden form fields and then reading them.
ryeguy
  • 65,519
  • 58
  • 198
  • 260