Categories
JavaScript PHP

How to pass value of JS variable into PHP page or variable

This is always a challenge for a PHP beginner that How to pass value of JAVASCRIPT variable to a PHP variable or How can I access JS variable into my PHP Page. Today I am going to write for those beginners who are stuck in their programming. First we look at the difference between JavaScript and PHP.

Difference between JavaScript and PHP

JavaScript is a client side scripting language and widely used by programmer while PHP is a server side language. JavaScript is run on webpage or web browser. We can disable JavaScript by our web browser settings. While PHP runs on server and cannot be disable by browser.
Now come on our main topic How to pass the value of JavaScript variable into PHP page and then stored them into a PHP variable.

Now follow these simple steps and you will find that you are out of this problem.

Steps for passing JavaScript variable to PHP page

Step 1: Create a HTML page

Create a HTML page which contains your form that needs to be submitted. Here I am going to create index.html

<html>
 <head>
 <title>How to pass value of JS variable into PHP page or variable</title>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
 </head>
 <body>
 <div class="spa-page">
 USERNAME:<input type="text" name="name" id="name" value=""></br></br>
 EMAIL-ID:<input type="text" name="email" id="email" value=""></br>
 <button onclick=" return submitdata()">Submit</button>
 </div>
 <script type="text/javascript">
 function submitdata()
 {

//assign all values to js variable
 var username=document.getElementById("name").value;
 var useremail=document.getElementById("email").value;

//create a url where data will be post
 var url='index.php?username='+username+'&useremail='+useremail;

//create a http request
 // If "var" is removed from this line, an error is thrown:
 // Uncaught ReferenceError: request is not defined.
 var request = new XMLHttpRequest();

//open request for url where we want to post data
 request.open('GET', url, true);

request.onload = function ()
 {
 if (this.status >= 200 && this.status < 400)
 {
 // Success!
 var data = JSON.parse(this.response);
 console.log(data);
 } else
 {
 // if it will not hit server,returned an error.
 console.log("Error status not between 200 and 400.");
 }
 };
 request.onerror = function (e)
 {
 // There was a connection error.
 console.log(e);
 };
 request.send();
 }
 </script>
 </body>
 </html>

Download code snippets 

Step 1: Create PHP file

Now create a PHP file where you want to get your JavaScript variable. I am going to create index.php

<?php
if(isset($_REQUEST['username']) && isset($_REQUEST['useremail']))
{
//now assign requested value to a variable
$name=$_REQUEST['username'];
$email=$_REQUEST['useremail'];

//do here what you want with these variables

//-------

//after done all send a success message in JSON format to js page 
//so that in JS page can take any action on success
echo json_encode("success");
}else
{
//if values are not found send an error msg
echo json_encode("error");
}
?>

Download code snippets 

Now you will get your all JS values in PHP page. Perform your operation in this page and send a message or any data to JS in JSON form So that you can read this data in your JS page.

P.S. This is a basic procedure to send JS variable to PHP page for beginner. We can use other methods also.

 

By Akshma Sharma

Web & PHP Developer, with a zeal experience of web and application development on various platform like Android, iOS, PHP, MySQL, CMS, Wordpress, Joomla, Magento and Drupal.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.