5

So far I know two ways to pass php variables to javascript. One is by using 

<script>  
      $(document).ready(function()
          phpvalue=$("#hiddeninput").val()

      })
  </script>

<input type="hidden" id="hiddeninput" value="phpvalue">

And the other one is by having for example a button and using onclick

    <script>
       function clickf(phpvalue) {

       }
    </script>

<input type="submit" onclick="clickf(<?php echo phpvalue ?>)">

All of them work great but:

  1. Is there any other way that I'm missing?

  2. Which one is the "best"?

  3. Any chance that I can use inside the script or the external js ?

aksu
  • 5,221
  • 5
  • 24
  • 39
viper
  • 539
  • 1
  • 4
  • 16

5 Answers5

14
<script>  
    $(document).ready(function()
        var phpvalue = <?php echo $var; ?>
    });
</script>
Alex Pliutau
  • 21,392
  • 27
  • 113
  • 143
  • So that answers my third question. But can I use this in an external js? Thank you – viper Jan 06 '12 at 13:22
  • 1
    won't work in a .js file, but you can just put all you javascript in a php file and pass your php values to javascript variables and import that php file like you normally would a js file. – Joeri Jan 06 '12 at 13:25
  • I thought of that also but this would require a header like this right? `header(Content-Type: text/javascript)` – viper Jan 06 '12 at 13:32
  • No, that's not necessary – Joeri Jan 06 '12 at 13:46
  • I placed `;` at the end. Like `var phpvalue = ;` Without `;` did not work for me – user2465936 Sep 21 '13 at 07:14
4

Like others already answered, just put a PHP tag whereever you would place the JS value, like var foo = <?= $php_value ?>; or var foo = <?php echo $php_value ?>;.

If you want to use this in an external JavaScript file, you have to make sure .js files get parsed by PHP. If this is not an option for you (for example, your host doesn't allow it), I suggest you set the values in a <script> tag inside your <head> and then just reference thos variables from your external JavaScript. In that case, I would strongly suggest you namespace them like var app_vars = { foo: <?= $bar ?> } in order to not clutter the global object.

Another way would be to retreive the values via Ajax. But the viability of this approach depends on your use case.

And another hint: if you want to pass multiple variables or arrays, there's JSON baked into PHP since version 5.2:

<?php
    $my_complex_var = array(
        'array' => array('foo', 'bar'),
        'val2' => 'hello world'
    );
?>
<script>
    var my_complex_js_var = <?= json_encode($my_complex_var) ?>
</script>
Rudolph Gottesheim
  • 1,671
  • 1
  • 17
  • 30
  • That's very nice thank you. One question though why would I need to namespace the var? I didn't get that! – viper Jan 06 '12 at 13:34
  • Also as mentioned earlier by @garvey I can use .php instead of .js right? – viper Jan 06 '12 at 13:35
  • Namespacing helps you keep your global object clean. And keeping the GO clean is just best practice for a thousand reasons. If this doesn't make too much sense to you, I'd suggest watching some of Douglas Crockford's talks. Just do a Google Video search for his name. And yeah, actually you can just use `.php` as the file extension and you can mix JS and PHP in there. Or, even better, `.js.php`. This way you'll still know what's going on in these files. – Rudolph Gottesheim Jan 06 '12 at 13:42
2
<script>

var javascript_variable = <?php echo $php_variable; ?>;

</script>
Joeri
  • 361
  • 5
  • 11
1

Instead of assigning values to hidden inputs, you could just generate JavaScript directly:

$script = <<<EOT
<script>
var phpvalue = $phpvalue;
</script>
EOT;
echo $script;
nikc.org
  • 16,462
  • 6
  • 50
  • 83
0

for the top example you do not need to use val you could use any attr you like. For example

phpvalue="myvalue"

then within jquery 

$("#hiddeninput").attr("phpvalue");
Simon
  • 375
  • 5
  • 12