How to pass value from JavaScript function to PHP variable?

Question

I have a JavaScript that handles onkeydown event of a text input. How can I pass the value from this input or javascript function to a php variable ? I am not sure form can work, because the javascript function calls another Ajax function elsewhere

  <?PHP
  $valueOfInput = //how to assign this variable to value from text input ??  
   ?>

  <html>
  <head>
  <script>
    function myFunc(e){
     if (e.keyCode == 13)
     {
       pass_data_to_Ajax();  
     }
    }
  </script>

  </head>

 <body>
 <div >        
   <input type="text" id = "lname" value="" onkeydown="myFunc(event)"/>
 </div>

 </body>
 </html>

You need to understand the difference between server-side code and client-side code. — SLaks, Jan 19 '14 at 22:52
possible duplicate of [Reference: Why does the PHP (or other server side) code in my Javascript not work?](http://stackoverflow.com/questions/13840429/reference-why-does-the-php-or-other-server-side-code-in-my-javascript-not-wor) — Quentin, Jan 19 '14 at 22:53

score 0 · Answer 1 · answered Jan 19 '14 at 23:25

Easy! Use an HTTP Request and either create a GET variable by putting the value in the URL, or create a POST variable by placing the value in the request headers. This can be accomplished with a HTML form, or with AJAX, or javascript redirects, or a few other methods.

You can then in PHP use the arrays: $_GET, $_POST, or $_REQUEST, to retrieve your variables.

ex: $_GET['my_var']

score 0 · Accepted Answer · answered Jan 19 '14 at 23:26

Easy, but depends what exactly you want to do. Here's some example snippet of code:

<?php
if(!empty($_POST['lname'])) {
    $valueOfInput = $_POST['lname'];
    die(json_encode(array('status' => 'success', 'lname' => $valueOfInput)));
}
?>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <input type="text" id="lname" name="lname" value="" />
        <script type="text/javascript">
            $(document).ready(function() {
                $("#lname").on("keypress", function() { // waiting for keypress event to be fired
                    setTimeout(function() { // delay to have the key value inserted into input, and affect value param
                        $.post(document.location.href, { lname: $("#lname").val() }, function(data) { // sending ajax post request
                            console.log(data);
                        });
                    }, 50);
                });
            });
        </script>
    </body>
</html>

You didn't write about any JS frameworks, but I assumed that it would be easier for you (beginner) to start with jQuery or some other framework which can help you with some abstraction around JS features.

Here brief description what's going on:

website is waiting till you start writing anything to the input (just as in your code)
script is handling typing event (keypress) and waits till the value is inserted to your input
script is sending an ajax request with input value as a param
PHP code is taking the value from $_POST superglobal array, and inserts it into your PHP variable
PHP code is sending response to the JS script that all good, and this response is printed in your console (you can do whatever you want - need with it)

Issue: It will send a lot of requests to the server, so consider better approach (change event instead of keypress?)

How to pass value from JavaScript function to PHP variable?

2 Answers2