Related
Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
I have a variable in PHP, and I need its value in my JavaScript code. How can I get my variable from PHP to JavaScript?
I have code that looks like this:
<?php
$val = $myService->getValue(); // Makes an API and database call
On the same page, I have JavaScript code that needs the value of the $val variable to be passed as a parameter:
<script>
myPlugin.start($val); // I tried this, but it didn't work
<?php myPlugin.start($val); ?> // This didn't work either
myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>
There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.
In no particular order:
Use AJAX to get the data you need from the server.
Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
Echo the data directly to JavaScript.
In this post, we'll examine each of the above methods, and see the pros and cons of each, as well as how to implement them.
1. Use AJAX to get the data you need from the server
This method is considered the best, because your server side and client side scripts are completely separate.
Pros
Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code.
More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages.
Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever.
Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.
Cons
Latency - AJAX creates an HTTP request, and HTTP requests are carried over network and have network latencies.
State - Data fetched via a separate HTTP request won't include any information from the HTTP request that fetched the HTML document. You may need this information (e.g., if the HTML document is generated in response to a form submission) and, if you do, will have to transfer it across somehow. If you have ruled out embedding the data in the page (which you have if you are using this technique) then that limits you to cookies/sessions which may be subject to race conditions.
Implementation Example
With AJAX, you need two pages, one is where PHP generates the output, and the second is where JavaScript gets that output:
get-data.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode(42); // In the end, you need to `echo` the result.
// All data should be `json_encode`-d.
// You can `json_encode` any value in PHP, arrays, strings,
// even objects.
index.php (or whatever the actual page is named like)
<!-- snip -->
<script>
fetch("get-data.php")
.then((response) => {
if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
// check for any errors.
// In case of an error, throw.
throw new Error("Something went wrong!");
}
return response.json(); // Parse the JSON data.
})
.then((data) => {
// This is where you handle what to do with the response.
alert(data); // Will alert: 42
})
.catch((error) => {
// This is where you handle errors.
});
</script>
<!-- snip -->
The above combination of the two files will alert 42 when the file finishes loading.
Some more reading material
Using the Fetch API
How do I return the response from an asynchronous call?
2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM
This method is less preferable to AJAX, but it still has its advantages. It's still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript.
Pros
Fast - DOM operations are often quick, and you can store and access a lot of data relatively quickly.
Cons
Potentially Unsemantic Markup - Usually, what happens is that you use some sort of <input type=hidden> to store the information, because it's easier to get the information out of inputNode.value, but doing so means that you have a meaningless element in your HTML. HTML has the <meta> element for data about the document, and HTML 5 introduces data-* attributes for data specifically for reading with JavaScript that can be associated with particular elements.
Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source.
Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself.
Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
With this, the idea is to create some sort of element which will not be displayed to the user, but is visible to JavaScript.
index.php
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "42"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
3. Echo the data directly to JavaScript
This is probably the easiest to understand.
Pros
Very easily implemented - It takes very little to implement this, and understand.
Does not dirty source - Variables are outputted directly to JavaScript, so the DOM is not affected.
Cons
Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
Implementation is relatively straightforward:
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
Good luck!
I usually use data-* attributes in HTML.
<div
class="service-container"
data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Var "service" now contains the value of $myService->getValue();
});
});
</script>
This example uses jQuery, but it can be adapted for another library or vanilla JavaScript.
You can read more about the dataset property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
I'm going to try a simpler answer:
Explanation of the problem
First, let's understand the flow of events when a page is served from our server:
First PHP is run, it generates the HTML that is served to the client.
Then, PHP "dies" (i.e. it literally stops running) as that HTML is delivered to the client. I'd like to emphasize that once the code leaves the server, PHP has stopped being part of the page load, and the server has no access access to it anymore.
Then, when the HTML with JavaScript reaches the client, that can then execute the JavaScript on that HTML, provided it is valid Javascript.
So really, the core thing to remember here is that HTTP is stateless. Once a request left the server, the server can not touch it. So, that leaves our options to:
Send more requests from the client after the initial request is done.
Encode what the server had to say in the initial request.
Solutions
That's the core question you should be asking yourself is:
Am I writing a website or an application?
Websites are mainly page based, and the page load times needs to be as fast as possible (for example - Wikipedia). Web applications are more AJAX heavy and perform a lot of round trips to get the client fast information (for example - a stock dashboard).
Website
Sending more requests from the client after the initial request is done is slow as it requires more HTTP requests which have significant overhead. Moreover, it requires asynchronousity as making an AJAX request requires a handler for when it's complete.
I would not recommend making another request unless your site is an application for getting that information from the server.
You want fast response times which have a huge impact on conversion and load times. Making Ajax requests is slow for the initial uptime in this case and unneeded.
You have two ways to tackle the issue
Set a cookie - cookies are headers sent in HTTP requests that both the server and client can read.
Encode the variable as JSON - JSON looks very close to JavaScript objects and most JSON objects are valid JavaScript variables.
Setting a cookie is really not very difficult, you just assign it a value:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
Then, you can read it with JavaScript using document.cookie:
Here is a short hand rolled parser, but the answer I linked to right above this has better tested ones:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1]; return prev },{});
alert(cookies["MyCookie"]); // Value set with PHP.
Cookies are good for a little data. This is what tracking services often do.
Once we have more data, we can encode it with JSON inside a JavaScript variable instead:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
Assuming $value is json_encodeable on the PHP side (it usually is). This technique is what Stack Overflow does with its chat for example (only using .NET instead of PHP).
Application
If you're writing an application - suddenly the initial load time isn't always as important as the ongoing performance of the application, and it starts to pay off to load data and code separately.
My answer here explains how to load data using AJAX in JavaScript:
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
Or with jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
Now, the server just needs to contain a /your/url route/file that contains code that grabs the data and does something with it, in your case:
<?php
$val = myService->getValue(); // Makes an API and database call
header("Content-Type: application/json"); // Advise client of response type
echo json_encode($val); // Write it to the output
This way, our JavaScript file asks for the data and shows it rather than asking for code or for layout. This is cleaner and starts to pay off as the application gets higher. It's also better separation of concerns and it allows testing the client side code without any server side technology involved which is another plus.
Postscript: You have to be very aware of XSS attack vectors when you inject anything from PHP to JavaScript. It's very hard to escape values properly and it's context sensitive. If you're unsure how to deal with XSS, or unaware of it - please read this OWASP article, this one and this question.
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode() requires:
PHP 5.2.0 or more
$PHPVar encoded as UTF-8, Unicode.
Simply use one of the following methods.
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
OR
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>
I quite like the way the WordPress works with its enqueue and localize functions, so following that model, I wrote a simple class for putting a scripts into page according to the script dependencies, and for making additional data available for the script.
class mHeader {
private $scripts = array();
/**
* #param string $id Unique script identifier
* #param string $src Script src attribute
* #param array $deps An array of dependencies ( script identifiers ).
* #param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array()) {
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
}
private function dependencies($script) {
if ($script['deps']) {
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
}
}
private function _unset($key, &$deps, &$out) {
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
}
private function flattern(&$deps, &$out = array()) {
foreach($deps as $key => $value) {
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
}
}
function print_scripts() {
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script) {
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
}
}
}
The call to the enqueue_script() function is for adding script, setting the source and dependencies on other scripts, and additional data needed for the script.
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
And, print_scripts() method of the above example will send this output:
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
Regardless the fact that the script 'jquery' is enqueued after the 'jquery-ui', it is printed before because it is defined in 'jquery-ui' that it depends on 'jquery'.
Additional data for the 'custom-script' are inside a new script block and are placed in front of it, it contains mydata object that holds additional data, now available to 'custom-script'.
Try this:
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
--
-After trying this for a while
Although it works, however it slows down the performance. As PHP is a server-side script while JavaScript is a user side.
I have come out with an easy method to assign JavaScript variables using PHP.
It uses HTML5 data attributes to store PHP variables and then it's assigned to JavaScript on page load.
Example:
<?php
$variable_1 = "QNimate";
$variable_2 = "QScutter";
?>
<span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php
Here is the JavaScript code
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
Convert the data into JSON
Call AJAX to recieve JSON file
Convert JSON into Javascript object
Example:
STEP 1
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image FROM phone";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
$v[] = $row;
}
echo json_encode($v);
$conn->close();
?>
STEP 2
function showUser(fnc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// STEP 3
var p = JSON.parse(this.responseText);
}
}
}
myPlugin.start($val); // Tried this, didn't work
It doesn't work because $val is undefined as far as JavaScript is concerned, i.e. the PHP code did not output anything for $val. Try viewing the source in your browser and here is what you'll see:
myPlugin.start(); // I tried this, and it didn't work
And
<?php myPlugin.start($val); ?> // This didn't work either
This doesn't work because PHP will try to treat myPlugin as a constant and when that fails it will try to treat it as the string 'myPlugin' which it will try to concatenate with the output of the PHP function start() and since that is undefined it will produce a fatal error.
And
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
While this is most likely to work, since the PHP code is producing valid JavaScript with the expected arguments, if it fails, chances are it's because myPlugin isn't ready yet. Check your order of execution.
Also you should note that the PHP code output is insecure and should be filtered with json_encode().
EDIT
Because I didn't notice the missing parenthesis in myPlugin.start(<?=$val?> :-\
As #Second Rikudo points out, for it to work correctly $val would need to contain the closing parenthesis, for example: $val="42);"
Meaning that the PHP will now produce myPlugin.start(42); and will work as expected when executed by the JavaScript code.
Here is is the trick:
Here is your 'PHP' to use that variable:
<?php
$name = 'PHP variable';
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>
Now you have a JavaScript variable called 'name', and here is your JavaScript code to use that variable:
<script>
console.log("I am everywhere " + name);
</script>
Let's say your variable is always integer. In that case this is easier:
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
Output:
<script>var number = 4;alert(number);</script>
Let's say your variable is not an integer, but if you try above method you will get something like this:
<script>var number = abcd;alert(number);</script>
But in JavaScript this is a syntax error.
So in PHP we have a function call json_encode that encode string to a JSON object.
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
Since abcd in JSON is "abcd", it looks like this:
<script>var number = "abcd";alert(number);</script>
You can use same method for arrays:
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
And your JavaScript code looks like this:
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
Console output
I'll assume that the data to transmit is a string.
As other commenters have stated, AJAX is one possible solution, but the cons outweigh the pros: it has a latency and it is harder to program (it needs the code to retrieve the value both server- and client-side), when a simpler escaping function should suffice.
So, we're back to escaping. json_encode($string) works if you encode the source string as UTF-8 first in case it is not already, because json_encode requires UTF-8 data. If the string is in ISO-8859-1 then you can simply use json_encode(utf8_encode($string)); otherwise you can always use iconv to do the conversion first.
But there's a big gotcha. If you're using it in events, you need to run htmlspecialchars() on the result in order to make it correct code. And then you have to either be careful to use double quotes to enclose the event, or always add ENT_QUOTES to htmlspecialchars. For example:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
However, you can't use htmlspecialchars on regular JavaScript code (code enclosed in <script>...</script> tags). That makes use of this function prone to mistakes, by forgetting to htmlspecialchars the result when writing event code.
It's possible to write a function that does not have that problem, and can be used both in events and in regular JavaScript code, as long as you enclose your events always in single quotes, or always in double quotes. Here is my proposal, requiring them to be in double quotes (which I prefer):
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
The function requires PHP 5.4+. Example usage:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
After much research, I found the easiest method is to pass all kinds of variables easily.
In the server script, you have two variables, and you are trying to send them to the client scripts:
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
In any of your JavaScript code called on the page, simply call those variables.
PHP
$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>
JS (yourexternal.js)
alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");
OUTPUT
The apple color is yellow, the strawberry color is red and the kiwi
color is green.
This is what works for me in 2022, I used this solution to get the email of the current user
I create a shortcode using PHP and added it to PHP .function:
function my_get_current_user_email(){
$current_user = wp_get_current_user();
$email = $current_user->user_email;
return $email;
}
add_shortcode( 'get_email', 'my_get_current_user_email');
Then use a div to wrap the shortcode:
<div id="target-content" style="display: none;">
[get_email]
</div>
Finally, access the content of the Div with JavaScript:
const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)
This work perfectly for what I wanted and I hope it will work for you too.
As per your code
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
Now you can get value using DOM, use innerHTML of span id, in this case you don't need to do any call to server, or Ajax or another thing.
Your page will print it using PHP, and you JavaScript will get value using DOM.
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
we can do it using php heredoc:
<?php
$inPhpVar = "i am php var";
$ScriptInline = <<<JS
<script>
alert('{$inPhpVar} that used in js code');
</script>
JS;
echo $ScriptInline;
?>
Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
I have a variable in PHP, and I need its value in my JavaScript code. How can I get my variable from PHP to JavaScript?
I have code that looks like this:
<?php
$val = $myService->getValue(); // Makes an API and database call
On the same page, I have JavaScript code that needs the value of the $val variable to be passed as a parameter:
<script>
myPlugin.start($val); // I tried this, but it didn't work
<?php myPlugin.start($val); ?> // This didn't work either
myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>
There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.
In no particular order:
Use AJAX to get the data you need from the server.
Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
Echo the data directly to JavaScript.
In this post, we'll examine each of the above methods, and see the pros and cons of each, as well as how to implement them.
1. Use AJAX to get the data you need from the server
This method is considered the best, because your server side and client side scripts are completely separate.
Pros
Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code.
More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages.
Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever.
Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.
Cons
Latency - AJAX creates an HTTP request, and HTTP requests are carried over network and have network latencies.
State - Data fetched via a separate HTTP request won't include any information from the HTTP request that fetched the HTML document. You may need this information (e.g., if the HTML document is generated in response to a form submission) and, if you do, will have to transfer it across somehow. If you have ruled out embedding the data in the page (which you have if you are using this technique) then that limits you to cookies/sessions which may be subject to race conditions.
Implementation Example
With AJAX, you need two pages, one is where PHP generates the output, and the second is where JavaScript gets that output:
get-data.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode(42); // In the end, you need to `echo` the result.
// All data should be `json_encode`-d.
// You can `json_encode` any value in PHP, arrays, strings,
// even objects.
index.php (or whatever the actual page is named like)
<!-- snip -->
<script>
fetch("get-data.php")
.then((response) => {
if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
// check for any errors.
// In case of an error, throw.
throw new Error("Something went wrong!");
}
return response.json(); // Parse the JSON data.
})
.then((data) => {
// This is where you handle what to do with the response.
alert(data); // Will alert: 42
})
.catch((error) => {
// This is where you handle errors.
});
</script>
<!-- snip -->
The above combination of the two files will alert 42 when the file finishes loading.
Some more reading material
Using the Fetch API
How do I return the response from an asynchronous call?
2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM
This method is less preferable to AJAX, but it still has its advantages. It's still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript.
Pros
Fast - DOM operations are often quick, and you can store and access a lot of data relatively quickly.
Cons
Potentially Unsemantic Markup - Usually, what happens is that you use some sort of <input type=hidden> to store the information, because it's easier to get the information out of inputNode.value, but doing so means that you have a meaningless element in your HTML. HTML has the <meta> element for data about the document, and HTML 5 introduces data-* attributes for data specifically for reading with JavaScript that can be associated with particular elements.
Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source.
Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself.
Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
With this, the idea is to create some sort of element which will not be displayed to the user, but is visible to JavaScript.
index.php
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "42"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
3. Echo the data directly to JavaScript
This is probably the easiest to understand.
Pros
Very easily implemented - It takes very little to implement this, and understand.
Does not dirty source - Variables are outputted directly to JavaScript, so the DOM is not affected.
Cons
Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
Implementation is relatively straightforward:
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
Good luck!
I usually use data-* attributes in HTML.
<div
class="service-container"
data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Var "service" now contains the value of $myService->getValue();
});
});
</script>
This example uses jQuery, but it can be adapted for another library or vanilla JavaScript.
You can read more about the dataset property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
I'm going to try a simpler answer:
Explanation of the problem
First, let's understand the flow of events when a page is served from our server:
First PHP is run, it generates the HTML that is served to the client.
Then, PHP "dies" (i.e. it literally stops running) as that HTML is delivered to the client. I'd like to emphasize that once the code leaves the server, PHP has stopped being part of the page load, and the server has no access access to it anymore.
Then, when the HTML with JavaScript reaches the client, that can then execute the JavaScript on that HTML, provided it is valid Javascript.
So really, the core thing to remember here is that HTTP is stateless. Once a request left the server, the server can not touch it. So, that leaves our options to:
Send more requests from the client after the initial request is done.
Encode what the server had to say in the initial request.
Solutions
That's the core question you should be asking yourself is:
Am I writing a website or an application?
Websites are mainly page based, and the page load times needs to be as fast as possible (for example - Wikipedia). Web applications are more AJAX heavy and perform a lot of round trips to get the client fast information (for example - a stock dashboard).
Website
Sending more requests from the client after the initial request is done is slow as it requires more HTTP requests which have significant overhead. Moreover, it requires asynchronousity as making an AJAX request requires a handler for when it's complete.
I would not recommend making another request unless your site is an application for getting that information from the server.
You want fast response times which have a huge impact on conversion and load times. Making Ajax requests is slow for the initial uptime in this case and unneeded.
You have two ways to tackle the issue
Set a cookie - cookies are headers sent in HTTP requests that both the server and client can read.
Encode the variable as JSON - JSON looks very close to JavaScript objects and most JSON objects are valid JavaScript variables.
Setting a cookie is really not very difficult, you just assign it a value:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
Then, you can read it with JavaScript using document.cookie:
Here is a short hand rolled parser, but the answer I linked to right above this has better tested ones:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1]; return prev },{});
alert(cookies["MyCookie"]); // Value set with PHP.
Cookies are good for a little data. This is what tracking services often do.
Once we have more data, we can encode it with JSON inside a JavaScript variable instead:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
Assuming $value is json_encodeable on the PHP side (it usually is). This technique is what Stack Overflow does with its chat for example (only using .NET instead of PHP).
Application
If you're writing an application - suddenly the initial load time isn't always as important as the ongoing performance of the application, and it starts to pay off to load data and code separately.
My answer here explains how to load data using AJAX in JavaScript:
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
Or with jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
Now, the server just needs to contain a /your/url route/file that contains code that grabs the data and does something with it, in your case:
<?php
$val = myService->getValue(); // Makes an API and database call
header("Content-Type: application/json"); // Advise client of response type
echo json_encode($val); // Write it to the output
This way, our JavaScript file asks for the data and shows it rather than asking for code or for layout. This is cleaner and starts to pay off as the application gets higher. It's also better separation of concerns and it allows testing the client side code without any server side technology involved which is another plus.
Postscript: You have to be very aware of XSS attack vectors when you inject anything from PHP to JavaScript. It's very hard to escape values properly and it's context sensitive. If you're unsure how to deal with XSS, or unaware of it - please read this OWASP article, this one and this question.
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode() requires:
PHP 5.2.0 or more
$PHPVar encoded as UTF-8, Unicode.
Simply use one of the following methods.
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
OR
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>
I quite like the way the WordPress works with its enqueue and localize functions, so following that model, I wrote a simple class for putting a scripts into page according to the script dependencies, and for making additional data available for the script.
class mHeader {
private $scripts = array();
/**
* #param string $id Unique script identifier
* #param string $src Script src attribute
* #param array $deps An array of dependencies ( script identifiers ).
* #param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array()) {
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
}
private function dependencies($script) {
if ($script['deps']) {
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
}
}
private function _unset($key, &$deps, &$out) {
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
}
private function flattern(&$deps, &$out = array()) {
foreach($deps as $key => $value) {
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
}
}
function print_scripts() {
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script) {
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
}
}
}
The call to the enqueue_script() function is for adding script, setting the source and dependencies on other scripts, and additional data needed for the script.
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
And, print_scripts() method of the above example will send this output:
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
Regardless the fact that the script 'jquery' is enqueued after the 'jquery-ui', it is printed before because it is defined in 'jquery-ui' that it depends on 'jquery'.
Additional data for the 'custom-script' are inside a new script block and are placed in front of it, it contains mydata object that holds additional data, now available to 'custom-script'.
Try this:
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
--
-After trying this for a while
Although it works, however it slows down the performance. As PHP is a server-side script while JavaScript is a user side.
I have come out with an easy method to assign JavaScript variables using PHP.
It uses HTML5 data attributes to store PHP variables and then it's assigned to JavaScript on page load.
Example:
<?php
$variable_1 = "QNimate";
$variable_2 = "QScutter";
?>
<span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php
Here is the JavaScript code
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
Convert the data into JSON
Call AJAX to recieve JSON file
Convert JSON into Javascript object
Example:
STEP 1
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image FROM phone";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
$v[] = $row;
}
echo json_encode($v);
$conn->close();
?>
STEP 2
function showUser(fnc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// STEP 3
var p = JSON.parse(this.responseText);
}
}
}
myPlugin.start($val); // Tried this, didn't work
It doesn't work because $val is undefined as far as JavaScript is concerned, i.e. the PHP code did not output anything for $val. Try viewing the source in your browser and here is what you'll see:
myPlugin.start(); // I tried this, and it didn't work
And
<?php myPlugin.start($val); ?> // This didn't work either
This doesn't work because PHP will try to treat myPlugin as a constant and when that fails it will try to treat it as the string 'myPlugin' which it will try to concatenate with the output of the PHP function start() and since that is undefined it will produce a fatal error.
And
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
While this is most likely to work, since the PHP code is producing valid JavaScript with the expected arguments, if it fails, chances are it's because myPlugin isn't ready yet. Check your order of execution.
Also you should note that the PHP code output is insecure and should be filtered with json_encode().
EDIT
Because I didn't notice the missing parenthesis in myPlugin.start(<?=$val?> :-\
As #Second Rikudo points out, for it to work correctly $val would need to contain the closing parenthesis, for example: $val="42);"
Meaning that the PHP will now produce myPlugin.start(42); and will work as expected when executed by the JavaScript code.
Here is is the trick:
Here is your 'PHP' to use that variable:
<?php
$name = 'PHP variable';
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>
Now you have a JavaScript variable called 'name', and here is your JavaScript code to use that variable:
<script>
console.log("I am everywhere " + name);
</script>
Let's say your variable is always integer. In that case this is easier:
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
Output:
<script>var number = 4;alert(number);</script>
Let's say your variable is not an integer, but if you try above method you will get something like this:
<script>var number = abcd;alert(number);</script>
But in JavaScript this is a syntax error.
So in PHP we have a function call json_encode that encode string to a JSON object.
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
Since abcd in JSON is "abcd", it looks like this:
<script>var number = "abcd";alert(number);</script>
You can use same method for arrays:
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
And your JavaScript code looks like this:
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
Console output
I'll assume that the data to transmit is a string.
As other commenters have stated, AJAX is one possible solution, but the cons outweigh the pros: it has a latency and it is harder to program (it needs the code to retrieve the value both server- and client-side), when a simpler escaping function should suffice.
So, we're back to escaping. json_encode($string) works if you encode the source string as UTF-8 first in case it is not already, because json_encode requires UTF-8 data. If the string is in ISO-8859-1 then you can simply use json_encode(utf8_encode($string)); otherwise you can always use iconv to do the conversion first.
But there's a big gotcha. If you're using it in events, you need to run htmlspecialchars() on the result in order to make it correct code. And then you have to either be careful to use double quotes to enclose the event, or always add ENT_QUOTES to htmlspecialchars. For example:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
However, you can't use htmlspecialchars on regular JavaScript code (code enclosed in <script>...</script> tags). That makes use of this function prone to mistakes, by forgetting to htmlspecialchars the result when writing event code.
It's possible to write a function that does not have that problem, and can be used both in events and in regular JavaScript code, as long as you enclose your events always in single quotes, or always in double quotes. Here is my proposal, requiring them to be in double quotes (which I prefer):
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
The function requires PHP 5.4+. Example usage:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
After much research, I found the easiest method is to pass all kinds of variables easily.
In the server script, you have two variables, and you are trying to send them to the client scripts:
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
In any of your JavaScript code called on the page, simply call those variables.
PHP
$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>
JS (yourexternal.js)
alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");
OUTPUT
The apple color is yellow, the strawberry color is red and the kiwi
color is green.
This is what works for me in 2022, I used this solution to get the email of the current user
I create a shortcode using PHP and added it to PHP .function:
function my_get_current_user_email(){
$current_user = wp_get_current_user();
$email = $current_user->user_email;
return $email;
}
add_shortcode( 'get_email', 'my_get_current_user_email');
Then use a div to wrap the shortcode:
<div id="target-content" style="display: none;">
[get_email]
</div>
Finally, access the content of the Div with JavaScript:
const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)
This work perfectly for what I wanted and I hope it will work for you too.
As per your code
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
Now you can get value using DOM, use innerHTML of span id, in this case you don't need to do any call to server, or Ajax or another thing.
Your page will print it using PHP, and you JavaScript will get value using DOM.
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
we can do it using php heredoc:
<?php
$inPhpVar = "i am php var";
$ScriptInline = <<<JS
<script>
alert('{$inPhpVar} that used in js code');
</script>
JS;
echo $ScriptInline;
?>
Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
I have a variable in PHP, and I need its value in my JavaScript code. How can I get my variable from PHP to JavaScript?
I have code that looks like this:
<?php
$val = $myService->getValue(); // Makes an API and database call
On the same page, I have JavaScript code that needs the value of the $val variable to be passed as a parameter:
<script>
myPlugin.start($val); // I tried this, but it didn't work
<?php myPlugin.start($val); ?> // This didn't work either
myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>
There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.
In no particular order:
Use AJAX to get the data you need from the server.
Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
Echo the data directly to JavaScript.
In this post, we'll examine each of the above methods, and see the pros and cons of each, as well as how to implement them.
1. Use AJAX to get the data you need from the server
This method is considered the best, because your server side and client side scripts are completely separate.
Pros
Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code.
More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages.
Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever.
Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.
Cons
Latency - AJAX creates an HTTP request, and HTTP requests are carried over network and have network latencies.
State - Data fetched via a separate HTTP request won't include any information from the HTTP request that fetched the HTML document. You may need this information (e.g., if the HTML document is generated in response to a form submission) and, if you do, will have to transfer it across somehow. If you have ruled out embedding the data in the page (which you have if you are using this technique) then that limits you to cookies/sessions which may be subject to race conditions.
Implementation Example
With AJAX, you need two pages, one is where PHP generates the output, and the second is where JavaScript gets that output:
get-data.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode(42); // In the end, you need to `echo` the result.
// All data should be `json_encode`-d.
// You can `json_encode` any value in PHP, arrays, strings,
// even objects.
index.php (or whatever the actual page is named like)
<!-- snip -->
<script>
fetch("get-data.php")
.then((response) => {
if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
// check for any errors.
// In case of an error, throw.
throw new Error("Something went wrong!");
}
return response.json(); // Parse the JSON data.
})
.then((data) => {
// This is where you handle what to do with the response.
alert(data); // Will alert: 42
})
.catch((error) => {
// This is where you handle errors.
});
</script>
<!-- snip -->
The above combination of the two files will alert 42 when the file finishes loading.
Some more reading material
Using the Fetch API
How do I return the response from an asynchronous call?
2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM
This method is less preferable to AJAX, but it still has its advantages. It's still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript.
Pros
Fast - DOM operations are often quick, and you can store and access a lot of data relatively quickly.
Cons
Potentially Unsemantic Markup - Usually, what happens is that you use some sort of <input type=hidden> to store the information, because it's easier to get the information out of inputNode.value, but doing so means that you have a meaningless element in your HTML. HTML has the <meta> element for data about the document, and HTML 5 introduces data-* attributes for data specifically for reading with JavaScript that can be associated with particular elements.
Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source.
Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself.
Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
With this, the idea is to create some sort of element which will not be displayed to the user, but is visible to JavaScript.
index.php
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "42"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
3. Echo the data directly to JavaScript
This is probably the easiest to understand.
Pros
Very easily implemented - It takes very little to implement this, and understand.
Does not dirty source - Variables are outputted directly to JavaScript, so the DOM is not affected.
Cons
Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
Implementation is relatively straightforward:
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
Good luck!
I usually use data-* attributes in HTML.
<div
class="service-container"
data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Var "service" now contains the value of $myService->getValue();
});
});
</script>
This example uses jQuery, but it can be adapted for another library or vanilla JavaScript.
You can read more about the dataset property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
I'm going to try a simpler answer:
Explanation of the problem
First, let's understand the flow of events when a page is served from our server:
First PHP is run, it generates the HTML that is served to the client.
Then, PHP "dies" (i.e. it literally stops running) as that HTML is delivered to the client. I'd like to emphasize that once the code leaves the server, PHP has stopped being part of the page load, and the server has no access access to it anymore.
Then, when the HTML with JavaScript reaches the client, that can then execute the JavaScript on that HTML, provided it is valid Javascript.
So really, the core thing to remember here is that HTTP is stateless. Once a request left the server, the server can not touch it. So, that leaves our options to:
Send more requests from the client after the initial request is done.
Encode what the server had to say in the initial request.
Solutions
That's the core question you should be asking yourself is:
Am I writing a website or an application?
Websites are mainly page based, and the page load times needs to be as fast as possible (for example - Wikipedia). Web applications are more AJAX heavy and perform a lot of round trips to get the client fast information (for example - a stock dashboard).
Website
Sending more requests from the client after the initial request is done is slow as it requires more HTTP requests which have significant overhead. Moreover, it requires asynchronousity as making an AJAX request requires a handler for when it's complete.
I would not recommend making another request unless your site is an application for getting that information from the server.
You want fast response times which have a huge impact on conversion and load times. Making Ajax requests is slow for the initial uptime in this case and unneeded.
You have two ways to tackle the issue
Set a cookie - cookies are headers sent in HTTP requests that both the server and client can read.
Encode the variable as JSON - JSON looks very close to JavaScript objects and most JSON objects are valid JavaScript variables.
Setting a cookie is really not very difficult, you just assign it a value:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
Then, you can read it with JavaScript using document.cookie:
Here is a short hand rolled parser, but the answer I linked to right above this has better tested ones:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1]; return prev },{});
alert(cookies["MyCookie"]); // Value set with PHP.
Cookies are good for a little data. This is what tracking services often do.
Once we have more data, we can encode it with JSON inside a JavaScript variable instead:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
Assuming $value is json_encodeable on the PHP side (it usually is). This technique is what Stack Overflow does with its chat for example (only using .NET instead of PHP).
Application
If you're writing an application - suddenly the initial load time isn't always as important as the ongoing performance of the application, and it starts to pay off to load data and code separately.
My answer here explains how to load data using AJAX in JavaScript:
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
Or with jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
Now, the server just needs to contain a /your/url route/file that contains code that grabs the data and does something with it, in your case:
<?php
$val = myService->getValue(); // Makes an API and database call
header("Content-Type: application/json"); // Advise client of response type
echo json_encode($val); // Write it to the output
This way, our JavaScript file asks for the data and shows it rather than asking for code or for layout. This is cleaner and starts to pay off as the application gets higher. It's also better separation of concerns and it allows testing the client side code without any server side technology involved which is another plus.
Postscript: You have to be very aware of XSS attack vectors when you inject anything from PHP to JavaScript. It's very hard to escape values properly and it's context sensitive. If you're unsure how to deal with XSS, or unaware of it - please read this OWASP article, this one and this question.
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode() requires:
PHP 5.2.0 or more
$PHPVar encoded as UTF-8, Unicode.
Simply use one of the following methods.
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
OR
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>
I quite like the way the WordPress works with its enqueue and localize functions, so following that model, I wrote a simple class for putting a scripts into page according to the script dependencies, and for making additional data available for the script.
class mHeader {
private $scripts = array();
/**
* #param string $id Unique script identifier
* #param string $src Script src attribute
* #param array $deps An array of dependencies ( script identifiers ).
* #param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array()) {
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
}
private function dependencies($script) {
if ($script['deps']) {
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
}
}
private function _unset($key, &$deps, &$out) {
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
}
private function flattern(&$deps, &$out = array()) {
foreach($deps as $key => $value) {
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
}
}
function print_scripts() {
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script) {
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
}
}
}
The call to the enqueue_script() function is for adding script, setting the source and dependencies on other scripts, and additional data needed for the script.
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
And, print_scripts() method of the above example will send this output:
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
Regardless the fact that the script 'jquery' is enqueued after the 'jquery-ui', it is printed before because it is defined in 'jquery-ui' that it depends on 'jquery'.
Additional data for the 'custom-script' are inside a new script block and are placed in front of it, it contains mydata object that holds additional data, now available to 'custom-script'.
Try this:
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
--
-After trying this for a while
Although it works, however it slows down the performance. As PHP is a server-side script while JavaScript is a user side.
I have come out with an easy method to assign JavaScript variables using PHP.
It uses HTML5 data attributes to store PHP variables and then it's assigned to JavaScript on page load.
Example:
<?php
$variable_1 = "QNimate";
$variable_2 = "QScutter";
?>
<span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php
Here is the JavaScript code
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
Convert the data into JSON
Call AJAX to recieve JSON file
Convert JSON into Javascript object
Example:
STEP 1
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image FROM phone";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
$v[] = $row;
}
echo json_encode($v);
$conn->close();
?>
STEP 2
function showUser(fnc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// STEP 3
var p = JSON.parse(this.responseText);
}
}
}
myPlugin.start($val); // Tried this, didn't work
It doesn't work because $val is undefined as far as JavaScript is concerned, i.e. the PHP code did not output anything for $val. Try viewing the source in your browser and here is what you'll see:
myPlugin.start(); // I tried this, and it didn't work
And
<?php myPlugin.start($val); ?> // This didn't work either
This doesn't work because PHP will try to treat myPlugin as a constant and when that fails it will try to treat it as the string 'myPlugin' which it will try to concatenate with the output of the PHP function start() and since that is undefined it will produce a fatal error.
And
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
While this is most likely to work, since the PHP code is producing valid JavaScript with the expected arguments, if it fails, chances are it's because myPlugin isn't ready yet. Check your order of execution.
Also you should note that the PHP code output is insecure and should be filtered with json_encode().
EDIT
Because I didn't notice the missing parenthesis in myPlugin.start(<?=$val?> :-\
As #Second Rikudo points out, for it to work correctly $val would need to contain the closing parenthesis, for example: $val="42);"
Meaning that the PHP will now produce myPlugin.start(42); and will work as expected when executed by the JavaScript code.
Here is is the trick:
Here is your 'PHP' to use that variable:
<?php
$name = 'PHP variable';
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>
Now you have a JavaScript variable called 'name', and here is your JavaScript code to use that variable:
<script>
console.log("I am everywhere " + name);
</script>
Let's say your variable is always integer. In that case this is easier:
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
Output:
<script>var number = 4;alert(number);</script>
Let's say your variable is not an integer, but if you try above method you will get something like this:
<script>var number = abcd;alert(number);</script>
But in JavaScript this is a syntax error.
So in PHP we have a function call json_encode that encode string to a JSON object.
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
Since abcd in JSON is "abcd", it looks like this:
<script>var number = "abcd";alert(number);</script>
You can use same method for arrays:
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
And your JavaScript code looks like this:
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
Console output
I'll assume that the data to transmit is a string.
As other commenters have stated, AJAX is one possible solution, but the cons outweigh the pros: it has a latency and it is harder to program (it needs the code to retrieve the value both server- and client-side), when a simpler escaping function should suffice.
So, we're back to escaping. json_encode($string) works if you encode the source string as UTF-8 first in case it is not already, because json_encode requires UTF-8 data. If the string is in ISO-8859-1 then you can simply use json_encode(utf8_encode($string)); otherwise you can always use iconv to do the conversion first.
But there's a big gotcha. If you're using it in events, you need to run htmlspecialchars() on the result in order to make it correct code. And then you have to either be careful to use double quotes to enclose the event, or always add ENT_QUOTES to htmlspecialchars. For example:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
However, you can't use htmlspecialchars on regular JavaScript code (code enclosed in <script>...</script> tags). That makes use of this function prone to mistakes, by forgetting to htmlspecialchars the result when writing event code.
It's possible to write a function that does not have that problem, and can be used both in events and in regular JavaScript code, as long as you enclose your events always in single quotes, or always in double quotes. Here is my proposal, requiring them to be in double quotes (which I prefer):
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
The function requires PHP 5.4+. Example usage:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
After much research, I found the easiest method is to pass all kinds of variables easily.
In the server script, you have two variables, and you are trying to send them to the client scripts:
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
In any of your JavaScript code called on the page, simply call those variables.
PHP
$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>
JS (yourexternal.js)
alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");
OUTPUT
The apple color is yellow, the strawberry color is red and the kiwi
color is green.
This is what works for me in 2022, I used this solution to get the email of the current user
I create a shortcode using PHP and added it to PHP .function:
function my_get_current_user_email(){
$current_user = wp_get_current_user();
$email = $current_user->user_email;
return $email;
}
add_shortcode( 'get_email', 'my_get_current_user_email');
Then use a div to wrap the shortcode:
<div id="target-content" style="display: none;">
[get_email]
</div>
Finally, access the content of the Div with JavaScript:
const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)
This work perfectly for what I wanted and I hope it will work for you too.
As per your code
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
Now you can get value using DOM, use innerHTML of span id, in this case you don't need to do any call to server, or Ajax or another thing.
Your page will print it using PHP, and you JavaScript will get value using DOM.
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
we can do it using php heredoc:
<?php
$inPhpVar = "i am php var";
$ScriptInline = <<<JS
<script>
alert('{$inPhpVar} that used in js code');
</script>
JS;
echo $ScriptInline;
?>
okay here is my code :
var co = 0;
var comp = '';
<?php $i = 0;?>
while (co < <?php echo $db->count_rows(); ?>)
{
if ((parseInt(value) >= <?php echo $mfr[$i] ?>) && (parseInt(value) <= <?php echo $mto[$i] ?>))
{
comp = 'T';
break;
}
co++;
<?php $i++; ?>
}
i'm still learning about this whole php and javascript thing, and i know there are many things that i still had to work to to improve my understanding to this both language. that's why i really need your help in this
i'm trying to get the while iteration to work so i can compare the variable from javascript with variable from php which took the value from database. the php variable ('$mfr' and '$mto'), as you can see, is an array. now i want it to look at every element of both and if it meets the condition then it will update the variable 'comp' and stop the whole while iteration
but the problem is the '$i' variable doesn't do the iteration thing. it runs only once so my '$mfr' and '$mto' value doesn't go anywhere. how can i fix this so i can compare the javascript value with the php '$mfr' and '$mto' value?
your help would be much appreciated, thank you :)
EDIT
well, it is actually a function of custom validation for jqgrid.
and i do know that php is a server-side and javascript is a client-side language theoretically, though i don't really know it is practically
what i'm actually trying to do is when a user input a value and submit it, the system will check whether the value that was entered are between value of 'fromid' and 'toid' column of a table in database
here is my full code of the function
function checkid(value)
{
var co = 0;
var comp = '';
<?php $i = 0;?>
while (co < <?php echo $db->count_rows(); ?>)
{
if ((parseInt(value) >= <?php echo $mfr[$i] ?>) && (parseInt(value) <= <?php echo $mto[$i] ?>))
{
comp = 'T';
break;
}
co++;
<?php echo $i++; ?>
}
if (comp != 'T')
{
return [true, "", ""];
}
else
{
return [false, "Value entered is already between a range. Please try again!", ""];
}
}
while this is how i got the '$mfr' and '$mto' variable
<?php
$db=new database($dbtype, $dbhost, $database, $dbuser, $dbpassword, $port, $dsn);
$db->query("select fromid, toid from CORE_ID");
$i = 0;
while($row = $db->get_row())
{
$mfr[$i] = $row[fromid];
$mto[$i] = $row[toid];
$i++;
}
?>
if theres any better way to do this, then please do tell me
Typically, PHP is for server side logic and JS is for client side logic. If you want to send a value from JS to be processed in PHP, you'll probably need to use something like AJAX, which jQuery makes pretty easy with jQuery.ajax().
Getting the client value to be processed is the difficult part. Once you can do that, rewriting your code logic in full PHP should not be difficult.
EDIT: If I'm misunderstanding where variable value comes from, please say so!
EDIT 2: It looks like you want to have client input compared to server side data. JS will not have access to your PHP variables unless they are specifically sent there. Likewise, you can send your JS value to the server for validation in the PHP.
In your case, you could use JSON to send send the JS your validation dates. Assuming you don't have too many dates, it will probably be faster than sending a value to the server and waiting for a response.
I found a good example of using JSON at another post. You can send an array like:
<?php
$xdata = array(
'foo' => 'bar',
'baz' => array('green','blue')
);
?>
<script type="text/javascript">
var xdata = <?php echo json_encode($xdata); ?>;
alert(xdata['foo']);
alert(xdata['baz'][0]);
// Dot notation can be used if key/name is simple:
alert(xdata.foo);
alert(xdata.baz[0]);
</script>
For your code, you could put $mfr and $mto into a single 2D array. Here is how your new JS might look, assuming xdata contains $mfr and $mto:
function checkid(value) {
var co = 0, comp = '', i = 0, nrows = xdata.mfr.length;
while (co < nrows) {
if ((parseInt(value) >= xdata.mfr[i]) && (parseInt(value) <= xdata.mto[i])) {
comp = 'T';
break;
}
co++;
i++;
}
if (comp != 'T') {
return [true, "", ""];
} else {
return [false, "Value entered is already between a range. Please try again!", ""];
}
}
You have a loop in your Javascript, not your PHP. So the PHP is only going to get executed once. You need to rethink your approach. Without knowing what the script is supposed to actually achieve it's difficult to provide working code, but you at least need to put the loop into the PHP instead of the Javascript.
Before I can answer you should understand what's going on exactly:
PHP is being executed on the server, then sends back the result (HTML and Javascript) to the client (the browser).
Javascript is being executed on the client side. So this only starts after PHP is completely done. For this reason you can't mix Javascript and PHP.
Check the source of the page, then you'll see exactly what the server returns (what HTML/Javascript PHP generates) and you'll get a better insight of what happens.
Now, if you understand this, you may be able to solve your own problem. I don't exactly know what you want to do, but I can advice you that if you need Javascript to check values from the database, you should generate Javascript using PHP that defines these values in the Javascript like for example this:
var my_js_var = <?=$my_php_var?>
var another_var = <?=$another_one?>
Now they are defined in Javascript and you can use them (and check them).
When you have a large database it can become inefficient to do it like this and you might want to look into a technology called AJAX, which allows Javascript to do a request to the server and get back data from a PHP script.
You would also want to do this if there's data involved you don't want to be publicly viewable (because everyone can look into the source of your page.
I've seen numerous posts on how to do this either saying to use rawurlencode in the php and decodeURIComponent in javascript or just use json_encode. Neither work for me. Hoping someone can see what I'm doing wrong:
I have an html button like this:
<button id="editbutton" onClick='edit(this, "<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>", "<?php echo $result_cameras[$i]["camera_type"]; ?>", "<?php echo rawurlencode($result_cameras[$i]["camera_name"]); ?>")'>Edit</button>
I pass that into the javascript edit button:
var edit = function(t, to, cameratype, cameraname, cameraquality, camerahash, camerastatus, emailnotice, camerasensitivity, axisuser, axispass, axisip, axisport)
{
if (mydiv.find("form").length) {
mydiv.show();
} else {
// fields
var $myform = $("<form id='EditCameraForm' name='' method='post' action='" + to + "'></form>");
var $myfieldset = $("<fieldset><legend>Edit camera settings</legend></fieldset>");
var $myinput = $('<input/>').attr('type','hidden').attr('name','camera_type').val(cameratype);
var $mylabel = $("<label for='CameraName'>Camera name: </label>");
var $myinput2 = js('<input/>').attr('size','25').attr('name','camera_name').attr('id','CameraName').val(decodeURIComponent(cameraname));
$myform.append($myinput, $mylabel, $myinput2);
...
}
...
}
I've tried using rawurlencode/decodeURIComponent as above and when I hit the edit button if the camera name is called: a"a (just testing the quotes) I get a"a. Backslashes such as a\b just returns some weird characters back.
If I try:
<?php echo json_encode($result_cameras[$i]["camera_name"]); ?>
and don't put anything in the javascript code I get this error:
missing ) after argument list
edit(this, "/dashboard", "WEBCAM", ""a"a"", "0", "3dd10c49784e2207de1e1932958bfb...
Where it is pointing to the ""a"a"".
Any suggestions?
You are in effect outputting a javascript string literal, so using htmlentities is not the correct thing to do. What you need instead is addslashes:
<?php echo addslashes($_SERVER['REQUEST_URI']); ?>
Edit: It goes without saying that you also need to do this for the other two strings you are echoing.
The reason this is correct is that the escape sequences for Javascript string literals are compatible with what addslashes does, if you ignore the fact that addslashes also escapes the "null" character. However, there's no way that character will be part of your URL so there is a perfect match between what addslashes does and what Javascript expects from its string literals.
For completeness I should mention that an appropriate usage of htmlentities is to process text that is being sent as part of HTML content; even then, htmlspecialchars (which performs a small subset of the work of htmlentities) is almost always the better fit.
rawurlencode() is for converting a string to an URL argument
htmlentities() is for converting a string to an HTML content
If you'd like to convert a string to a Javascript string it should be :
function f_str_2js($x) {
return str_replace( array("\n","\r","\t","'",'"') , array('\n','\r','\t',"\\'",'\"') , $x)
}
the above answers are correct, but you should consider to add your data to a php array or object, than jsonencode and add it to a date-attribute date-camera='{... than do eventbinding by using jQuery .on(.
This way you can access the data via $(this).data('camera'). It will be easy to extend you app without adding more and more parameters to the onclick-function.
for more information see:
http://api.jquery.com/jQuery.data/
http://api.jquery.com/on/