how to pass a variable from javascript function to php file without reloading the current html page in which javascript function is written?

Question

I m developing a web site for my hobby project. I m new to PHP, JavaScript, and HTML. So far everything works correctly i.e the javascript functions communicate with my php code but the problem is the browser loads the php file too. I don't want to load the php file. I just want to pass the value of the input tag on clicking a button. This value is stored in the value attribute of the input tag as shown below.

<input name="switch" class="button" type="button" value="ON" onclick="change(this)" />

I know this problem can be solved by AJAX. Now I m trying to implement the AJAX methods as it is given in w3schools website.

Below I have attached the two codes to understand what i m trying to tell.

function change( el)
{
    if ( el.value == "ON" )
    { 
        el.value = "OFF"; 
        el.style.backgroundColor = "#ff3333"; /* Red */
    }
    else
    { 
        el.value = "ON"; 
        el.style.backgroundColor = "#4CAF50"; /* Green*/
    } // works till here like expected.
     // this proves that HTML code communicates with this function
     // and also there's a value in 'el.value' which is received from the
     // value attribute of the input tag.

    var xmlhttp = new XMLHttpRequest(); // create a xmlhttp object
    xmlhttp.onreadystatechange = function() // create a function to
    // execute when the server response is ready
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
        { // empty 
            }

    }
    //I just want to send the value in 'el.value' to postform.php file
    //In 'postforn.php' file i want to display the received value.
    xmlhttp.open("GET", "postform.php?switch=" + el.value, true)
    xmlhttp.send();
}

Here's the php code i m trying to execute.

<?php
$value = $_GET["switch"];
if (empty($value))
{
   echo "Name is empty\n";
} 
else 
{
    echo $value;
}
?>

I want the variable $value to be displayed somewhere so that i can see what is received.

what exactly doesn't work? seems ok, should call `postform.php?switch=ON` or `postform.php?switch=OFF` that you can get in PHP using `$_GET['switch']` — luchaninov, May 29 '16 at 06:25
i agree with @luchaninov .. this code is kind of confusing and you are not being clear enough.. the only way to pass value to PHP without the need of reloading or redirect is through AJAX calls, depending on which method you use, you should refer to them with $_POST or $_GET — Oscar Reyes, May 29 '16 at 06:29
I have an idea for my hobby project. I started to study web development just recently. So I started to follow the tutorials on w3schools website. In that there was a similar code like this under php and ajax. Since I have no experience with ajax, php, javascript and html so I want to know how to pass the value from 'el.value' variable to a php file without reloading the web page. So please suggest me a good working way. Thank you for all ur responses. — manid2, May 29 '16 at 06:58

score 0 · Answer 1 · answered May 29 '16 at 06:27

Try to use Form Data as below:

function change( el)
{

if ( el.value == "ON" )
{ 
    el.value = "OFF"; 
    el.style.backgroundColor = "#ff3333"; /* Red */


}
else
{ 
    el.value = "ON"; 
    el.style.backgroundColor = "#4CAF50"; /* Green*/
} // works till here like expected.



var xmlhttp = new XMLHttpRequest();
//form data
fd = new FormData();
fd.append("switch",el.value);


xmlhttp.onreadystatechange = function() 
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {
        }

}
xmlhttp.open("GET", "postform.php", true)
xmlhttp.send(fd);
}

and Fetch 'Switch' value from php using

$_GET['switch']

score 0 · Answer 2 · answered May 29 '16 at 06:39

Here is working example with your code, just create empty PHP file and put this code to it, then open console in browser (F12 or CMD+SHIFT + I)

<?php
if (isset($_GET['switch'])) { //here we catch variable from JavaScript
    echo $_GET['switch']; //and here we make response to JavaScript
} else { //if no data from JavaScript then just show the page ?>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <button id="button">Press me</button>
    <script type="text/javascript">

        var btn = document.getElementById('button');
        btn.onclick = function () {
            change(btn);
            return false;
        };

        function change(el) {
            if (el.value == "ON") {
                el.value = "OFF";
                el.style.backgroundColor = "#ff3333";
            }
            else {
                el.value = "ON";
                el.style.backgroundColor = "#4CAF50";
            }

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    console.log(xmlhttp.responseText); // here we got data from PHP
                }
            };
            xmlhttp.open("GET", "postform.php?switch=" + el.value, true);
            xmlhttp.send();
        }
    </script>
    </body>
    </html>
<?php } ?>

how to pass a variable from javascript function to php file without reloading the current html page in which javascript function is written?

2 Answers2