CODEWITHSUNDEEP
javascriptphphtmltransfer
lolzDoe
lolzDoe

Reputation: 53

Cannot get value from PHP to Javascript

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 a p 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

Upvotes: 2

Views: 807

Answers (6)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

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

Upvotes: 1

yaba
yaba

Reputation: 911

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.

Upvotes: 1

Azamantes
Azamantes

Reputation: 1461

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; ?>'.

Upvotes: 1

Poiz
Poiz

Reputation: 7617

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;
    }

Upvotes: 1

AntonyMN
AntonyMN

Reputation: 913

Encode the json object using json_encode, that is

<script> var details = "<?php echo json_encode($cookie); ?>";</script>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15519

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;
       }

Upvotes: 1

Related Questions