Cannot get value from PHP to Javascript
Question
So in my PHP file I create a JSON Object which I need to get to my Javascript file for processing. I can't seem to transfer anything however, not even with a simple string like this:-
index.php
<?php
$cookie= "blueberry cake";
?>;
script.js
var details = "<?php echo $cookie; ?>";
function myFunction() {
document.getElementById("demo").innerHTML = details;
}
index.html
<html>
<head>
<script src="script.js"></script>
<title>antgus</title>
</head>
<body>
<h1>Welcome to my page! </h1>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo">A Paragraph.</p>
</body>
I got a button in my HTML, so when I press it the function myFunction get's called. It's supposed to change ap element with id "demo" to the string "blueberry cake"
Any idea what I'm doing wrong here?
EDIT
I now have it working except one thing, I can't pass a JSON object to a function i Javascript. The console throws an error saying that the arguments is wrong, it thinks I am passing multiple strings. index.php
<?php
$test = "blue";
$logLines = file('../../../home/shares/flower_hum/humid.log');
$entries = array_map("clean",$logLines);
$finalOutput = [
'humid' => $entries
];
function clean($string){
return json_decode(rtrim(trim($string),','),true);
}
$json = json_encode($finalOutput, JSON_UNESCAPED_SLASHES);
echo $json; //displays valid JSON, I have checked it.
?>
<html>
<head>
<script src="script.js"></script>
<title>antgus</title>
</head>
<body>
<p>Welcome to my page! Down below you can see the data:</p>
<button type="button" onclick='myFunction("<?php echo $json ?>")'>Try it</button>
<p id="demo">A Paragraph.</p>
</body>
</html>
script.js
function myFunction(jsonObject) {
document.getElementById("demo").innerHTML = "INCOMING DATA:";
alert(jsonObject);
}
enter code here
6 answers
solution1
1 2016-09-15 10:03:53
The external js file will not be parsed as php meaning that you cannot access that variable. You can save your js as php (NOT RECOMMENDED). alternatively a)
include that function at the bottom of the bottom of the php page:
<?php
$cookie= "blueberry cake";
?>;
//js further down the same page
<script>
var details = "<?php echo $cookie; ?>";
function myFunction() {
document.getElementById("demo").innerHTML = details;
}
</script>
or b) declare a global variable in the php page so that the external js can access it:
//php page
<?php
$cookie= "blueberry cake";
?>;
<script> var details = "<?php echo $cookie; ?>";</script>
//js file
function myFunction() {
//details will be accessible since it has been declared in the global space of the index.php page
document.getElementById("demo").innerHTML = details;
}
solution2
1 2016-09-15 10:09:18
This should work perfectly:
With In-Document JS:
<?php
$cookie= "blueberry cake";
?>;
<html>
<head>
<script type="text/javascript">
var details = "<?php echo $cookie; ?>";
function myFunction() {
document.getElementById("demo").innerHTML = details;
}
</script>
<title>antgus</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo">A Paragraph.</p>
</body>
With External JS:
<?php
$cookie= "blueberry cake";
?>;
<html>
<head>
<script type="text/javascript">
var details = "<?php echo $cookie; ?>";
</script>
<script type="text/javascript" src="script.js"> </script>
<title>antgus</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo">A Paragraph.</p>
</body>
script.js File:
function myFunction() {
// HAS ACCESS TO details WHICH IS ON THE GLOBAL SCOPE
document.getElementById("demo").innerHTML = details;
}
solution3
1 2016-09-15 10:13:22
使用json_encode编码json对象，即
<script> var details = "<?php echo json_encode($cookie); ?>";</script>
solution4
1 ACCPTED 2016-09-15 10:16:11
Things to consider:-
1.External js will not work as you tried.
2.When you call a javascript function directly through onclick code then you have to pass data also for working further.
A working code sample:-
index.php:-
<?php
$cookie= "blueberry cake";
?>
<html>
<head>
<script src="script.js"></script>
<title>antgus</title>
</head>
<body>
<h1>Welcome to my page! </h1>
<button type="button" onclick='myFunction("<?php echo $cookie; ?>")'>Try it</button>
<p id="demo">A Paragraph.</p>
script.js:-
function myFunction(details) {
document.getElementById("demo").innerHTML = details;
}
Output at my local end:-
before click:- http://prntscr.com/ci94s9
After click:- http://prntscr.com/ci94w9
solution5
1 2016-09-15 10:17:41
Remove the quotes around php, dude. You are assigning string instead of the php variable value.
var details = "'" + <?php echo $cookie; ?> + "'";
This will assign the actual $cookie value instead of the string '<? php echo $cookie; ?>' '<? php echo $cookie; ?>' '<? php echo $cookie; ?>' .
solution6
1 2016-09-15 10:18:15
The php-script is run server-side, and the javascript is run client-side, and the two do not share some kind of scope.
In other words, the $cookie variable is assigned a value in php, but it isn't used. Then you use a variable in your javascript with the same name (but completely unrelated to the php variable), but since it is never assigned anything, it's undefined .
gavgrif offers some solutions to fix this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.