How to Pass Variables from JavaScript to PHP

How do I pass JavaScript variables to PHP?

You cannot pass variable values from the current page JavaScript code to the current page PHP code... PHP code runs at the server side, and it doesn't know anything about what is going on on the client side.

You need to pass variables to PHP code from the HTML form using another mechanism, such as submitting the form using the GET or POST methods.

<DOCTYPE html>
<html>
  <head>
    <title>My Test Form</title>
  </head>

  <body>
    <form method="POST">
      <p>Please, choose the salary id to proceed result:</p>
      <p>
        <label for="salarieids">SalarieID:</label>
        <?php
          $query = "SELECT * FROM salarie";
          $result = mysql_query($query);
          if ($result) :
        ?>
        <select id="salarieids" name="salarieid">
          <?php
            while ($row = mysql_fetch_assoc($result)) {
              echo '<option value="', $row['salaried'], '">', $row['salaried'], '</option>'; //between <option></option> tags you can output something more human-friendly (like $row['name'], if table "salaried" have one)
            }
          ?>
        </select>
        <?php endif ?>
      </p>
      <p>
        <input type="submit" value="Sumbit my choice"/>
      </p>
    </form>

    <?php if isset($_POST['salaried']) : ?>
      <?php
        $query = "SELECT * FROM salarie WHERE salarieid = " . $_POST['salarieid'];
        $result = mysql_query($query);
        if ($result) :
      ?>
        <table>
          <?php
            while ($row = mysql_fetch_assoc($result)) {
              echo '<tr>';
              echo '<td>', $row['salaried'], '</td><td>', $row['bla-bla-bla'], '</td>' ...; // and others
              echo '</tr>';
            }
          ?>
        </table>
      <?php endif?>
    <?php endif ?>
  </body>
</html>

How do I pass variables and data from PHP to JavaScript?

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:

  1. Use AJAX to get the data you need from the server.
  2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
  3. 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>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

The above combination of the two files will alert 42 when the file finishes loading.

Some more reading material

  • Using XMLHttpRequest - MDN
  • XMLHttpRequest object reference - MDN
  • 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!

Pass Javascript variable to PHP

You can't pass variable values from the current page Javascript to the current page PHP code ... PHP code runs at the server and it doesn't know anything about what is going on on the client side.

You need to pass variables to PHP code from html-form using another mechanism, such as submitting form on GET or POST methods.

<DOCTYPE html>
<html>
  <head>
    <title>My Test Form</title>
  </head>

  <body>
    <form method="POST">
      <p>Please, choose the salary id to proceed result:</p>
      <p>
        <label for="salarieids">SalarieID:</label>
        <?php
          $query = "SELECT * FROM salarie";
          $result = mysql_query($query);
          if ($result) :
        ?>
        <select id="salarieids" name="salarieid">
          <?php
            while ($row = mysql_fetch_assoc($result)) {
              echo '<option value="', $row['salaried'], '">', $row['salaried'], '</option>'; //between <option></option> tags you can output something more human-friendly (like $row['name'], if table "salaried" have one) 
            }
          ?>
        </select>
        <?php endif ?>
      </p>
      <p>
        <input type="submit" value="Sumbit my choice"/>
      </p>
    </form>

    <?php if isset($_POST['salaried']) : ?>
      <?php
        $query = "SELECT * FROM salarie WHERE salarieid = " . $_POST['salarieid'];
        $result = mysql_query($query);
        if ($result) :
      ?>
        <table>
          <?php
            while ($row = mysql_fetch_assoc($result)) {
              echo '<tr>';
              echo '<td>', $row['salaried'], '</td><td>', $row['bla-bla-bla'], '</td>' ...; // and others
              echo '</tr>';
            }
          ?>
        </table>
      <?php endif?>
    <?php endif ?>
  </body>
</html>

Passing javascript variables to php?

PHP and javascript don't work like that.

PHP is a server-side language. While javascript is a clientside language.

There are still ways of passing data from the client-window to your server, via ajax, query parameters, cookies... But none will work in the same page.

Give us a clearer image on what you are trying to achieve and we will gladly help.

UPDATE

JS

<script type="text/javascript">  
    document.cookie = 'name=Khez' ;  
</script>

PHP 

<?php  
    var_dump($_COOKIE['name']);  
?>

Pass javascript variable to php code?

You can't directly do that, since JavaScript runs on the client-side and PHP gets executed on the server-side.

You would need to execute the JavaScript first and then send the result to the server via a FORM or AJAX call.

Here's what that might look like:

PHP

$parameter = "this is a php variable";
echo "var myval = foo(" . parameter . ");";

JavaScript

var myval = foo("this is a php variable"); // generated by PHP

$.ajax({
  type: 'POST',
  url: 'yourphpfile.php',
  data: {'variable': myval},
});

Receiving PHP (yourphpfile.php)

$myval = $_POST['variable'];
// do something

Passing variables from javascript via ajax to php

It's just simple to pass the values to php file through AJAX call.
Change your AJAX call as shown in below

var message = $('#input-message').val();
var sender= $('#sender').val();
var receiver= $('#receiver').val(); 
$.ajax({
    url: "scripts/load_messages.php", 
    method: "post", 
    //data: { "message":$('#input-message').val(),"sender":$('#sender').val(),"receiver":$('#receiver').val()},you can pass the values directly like this or else you can store it in variables and can pass
    data: { "message":message,"sender":sender,"receiver":receiver},
    success: function(data){
    $('#chat-body').html(data);
    },
     error: function() {
    alert('Not OKay');
    } 
   });

and your load-messages.php could be like this`

$receiver = $_POST['receiver'];
echo $receiver;

How to pass JavaScript variable into a PHP function parameter?

In a very simple form/example you simply need to send an http request ( here done using the Fetch api ) to your PHP script and intercept that request. The following sends a POST request with a single parameter sid which is then passed to the Twilio method as per your requirement.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['sid'] ) ){
        $sid=$_POST['sid'];
        exit( $twilio->check_disputed( $sid ) );
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Your page</title>
    </head>
    <body>
        <h1>Do lots of things...</h1>
        
        <script>
            /*
                do whatever it is you do to create your variable sid
                - here it is explicitly declared rather than derived.
            */
            const sid='CA519c6aefde211131f2f44370d67607d4';
            
            let fd=new FormData();
                fd.set('sid',sid);
                
            fetch( location.href, { method:'post', body:fd } )
                .then(r=>r.text())
                .then(data=>{
                    alert(data)
                })
        </script>
    </body>
</html>

Related Topics

JSON Decode in PHP

How to Dynamically Populate Options on Dropdown Lists Based on Selection in Another Dropdown

How to Check If a Directory Exists? "Is_Dir", "File_Exists" or Both

Simple PHP Form: Attachment to Email (Code Golf)

Accessing an Associative Array by Integer Index in PHP

Create New Xml File and Write Data to It

Wampserver PHPmyadmin Maximum Execution Time of 360 Seconds Exceeded

What Is the Pdo Equivalent of Function MySQL_Real_Escape_String

How to Manage a Single PHP5 Session on Multiple Apache Servers

How Are Associative Arrays Implemented in PHP

Special Characters in "File_Exists" Problem (Php)

How to Do Multiple SQL Statements in One MySQL_Query

How to Check for Null in Twig

Apache Is Not Running from Xampp Control Panel ( Error: Apache Shutdown Unexpectedly. This May Be Due to a Blocked Port)

Define VS Variable in PHP

How to Select All Column Name from a Table in Laravel

Special Characters in Fpdf with PHP

PHP Pass Function Name as Param Then Call the Function


Leave a reply



Submit