Open In App

How to pass variables and data from PHP to JavaScript ?

Last Updated : 01 Aug, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, let’s see how to pass data and variables from PHP to JavaScript.

We can pass data from PHP to JavaScript in two ways depending on the situation. First, we can pass the data using the simple assignment operator if we want to perform the operation on the same page. Else we can pass data from PHP to JavaScript using Cookies. Cookie work in client-side.

Program 1: This program passes the variables and data from PHP to JavaScript using assignment operator.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to pass variables and data
        from PHP to JavaScript?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">GeeksforGeeks</h1>
      
    <h4>
        How to pass variables and data
        from PHP to JavaScript?
    </h4>
      
    <?php
        $name = "Hello World";
    ?>
  
    <script type="text/javascript">
        var x = "<?php echo"$name"?>";
        document.write(x);
    </script>
</body>
  
<html>


Output:

Here, we just take input by statically or dynamically and pass it to JavaScript variable using the assignment operator. The PHP code in the JavaScript block will convert it into the resulting output and then pass it to the variable x and then the value of x is printed.

Program 2: This program passes the variables and data from PHP to JavaScript using Cookies.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to pass variables and data
        from PHP to JavaScript?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">GeeksforGeeks</h1>
      
    <h4>
        How to pass variables and data
        from PHP to JavaScript?
    </h4>
      
    <?php
          
        // Initialize cookie name
        $cookie_name = "user";
        $cookie_value = "raj";
          
        // Set cookie
        setcookie($cookie_name, $cookie_value);
          
        if(!isset($_COOKIES[$cookie_name])) {
            print("Cookie created | ");
        }
    ?>
  
    <script type="text/javascript">
        var x = document.cookie;
        document.write(x);
    </script>
</body>
  
<html>


Output:

PHP provides a method to set the cookie using the setCookie() method. Here, we can set the data or variable in PHP cookie and retrieve it from JavaScript using document.cookie.

Steps to Run the program:

  • Install local server like XAMPP server into your system.
  • Save the file in htdocs folder using the name geeks.php
  • Start Apache server.
  • Open Browser and type localhost/geeks.php in address bar and hit Enter button.
  • It will display the result.

PHP is a server-side scripting language designed specifically for web development. You can learn PHP from the ground up by following this PHP Tutorial and PHP Examples.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads