skip to content

PHP: Passing variables to JavaScript

PHP programmers often encounter problems when trying to dynamically generate JavaScript code. The problem is that some characters need to be escaped in JavaScript and also in PHP. This double-up can be hard to come to grips with.

Escaping Quotes and Line Breaks

Suppose you start with a PHP variable that needs to be displayed in a JavaScript alert or confirmation dialog:

$message = "a short piece of text spanning more than one line and containing \"double\" & 'single' quotes";

The obvious way to turn this into an alert is:

<script> alert("<?PHP echo $message ?>"); </script>

but that results in invalid JavaScript code: <script> alert("a short piece of text spanning more than one line and containing "double" & 'single' quotes"); </script>

There are two problems. Firstly, having line breaks inside a JavaScript variable is not an option. They'll need to be replaced with \n (character representation of a line break). Secondly, the double quotes inside the text conflict with the outer quotes of the alert call.

Learning from our mistakes, here's some code that actually works:

<script> alert("<?php echo preg_replace("/\r?\n/", "\\n", addslashes($message)); ?>"); </script>

The above code relies on PHP being embedded within HTML code. If you're outputting the entire page from PHP then you need to go a step further:

$message = preg_replace("/\r?\n/", "\\n", addslashes($message)); echo "<script>\n"; echo " alert(\"{$message}\");\n"; echo "</script>\n\n";

The output is now:

<script> alert("a short piece of text\nspanning more than one line\nand containing \"double\" & \'single\' quotes"); </script>

The same approach can be applied in pretty much any situation where PHP needs to pass variables to JavaScript.

When trying to debug this kind of code you should always check first what's valid in JavaScript (most modern browsers have a built-in debugger for this) and only then see how it can be generated from PHP.

It's not necessary to encode characters such as & and " to their HTML entities as JavaScript is a separate language from HTML and can handle them without problem.

References

< PHP

User Comments

Post your comment or question

9 August, 2012

I wanna pass "$name" into javascript, AJAX to be precise, so that that variable can b passed to the server and database, returning the corresponding values.
I need a diferent code don't I?

1 November, 2011

You totally rock...I spent two days trying to figure out how to get html saved in a mysql database into a javascript. This did the trick!

21 July, 2011

@PCheese

That's true! Very useful when generating javacript code on php.

Thanks for your hint

24 June, 2011

tahanx a lot for your superb article.......

solution posted by PCheese is also working.......

18 February, 2011

Try json_encode instead; that seems to handle all the tricky bits including quotes and newlines. Example:

echo "<script>alert(" . json_encode($message) . ");</script>"

24 November, 2010

Thanks a ton... Had been scratching my head to solve the similar issue while coding. Your solution worked like a MAGIC. Thanks once again.

29 July, 2010

Just wanted to say thank you - figuring that out myself would have made me late for lunch.

2 March, 2010

thank you. But what if I want to pass a javascript variable to a php function in the same page?

To call a PHP function without reloading the page you need to either use Ajax or load a PHP script by using an IMG, IFRAME or similar, with $_GET parameters.

17 February, 2010

OH LORD! Been trying to break this code for over 4 hours then I find this piece of gold mine! thx a lot!

7 February, 2010

Thanks a ton... Had been scratching my head to solve the similar issue while coding. Your solution worked like a MAGIC. Thanks once again.

9 May, 2009

Funny there is no native PHP function to do that job.

Nice article guys!

16 October, 2008

Can I be sure that these characters are the only characters needed to be escaped? Are there any characters that can led into wrong JavaScript code (even though theoretically)? What about UTF-8?

Thank you very much!

24 June, 2008

What if you don't want to alert it, just to use it as a regular javascript variable?

'alert()' is just a function like any other. There's no difference in approach if you want to use a different function or just define a variable in JavaScript. It's the escaping of the $message component as demonstrated in this article that's important in each case.

9 September, 2007

Wow, thank you so much. I had worked all day on a roundabout way to accomplish this when your script works perfectly. I should google things more specifically before I dive into time consuming solutions.

5 September, 2006

just wanted to thank you guys for this article. I have been seriously stuck on that for about 2 hours now. thanks again,
tison

top