how to pass data javascript into php page without reloading the page

Question

hi guys need help regarding how to pass a value to php using javacript without reloading the page. What i want to happen is that when i put a value in textbox name num1 that value will go to available.php.. advance thank u. ...

here is my code..

html code

    <!-- Modal Staff-->
     <div id="add" class="modal fade" role="dialog" tabindex="-1" >
      <div class="modal-dialog">
       <form action="dashboard.php" method="post">
        <!-- Modal content-->
         <div class="modal-content">
         <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times; 
        </button>
        <h4 class="modal-title">Set Available Student</h4>
        </div>
         <div class="modal-body">
         <input type="text" name="num1" id="num1"  class="form-control" />
      </div>
      <div class="modal-footer">
        <input type="submit" name="submit" class="btn btn-success" value="Set">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    </form>
  </div>
</div>

javascript code

    <script type="text/javascript">

    function availble_chair()
    {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET","available.php",false);
    xmlhttp.send(null);
    document.getElementById("count").innerHTML=xmlhttp.responseText;
    }
    availble_chair();
    setInterval(function(){ 
    availble_chair();
    },1000);
    </script>

and here is my php code available.php

<?php

    $set = '';

    $connection = mysqli_connect("localhost","root","","dbattendancelibrary");
    $query=mysqli_query($connection,"SELECT COUNT(Time_in)-COUNT(Time_out) as Status FROM `tbl_student_form`");
    $result = mysqli_fetch_array($query, MYSQLI_NUM);
    if($result) {
        if($result[0] <= $set) {
            $availble = $set-$result[0];
            echo "<p style='font-size:50px;margin-left:240px;'> " .$availble. " 
            </p>";
         } else {
            echo "<p class='alert alert-danger'>Library Already Full</p>";
         }         
    }
?>

Answer 1

Javascript:

First, you need an on submit event listener so we can detect when the form was submitted.

// get a reference to your form

var form = document.getElementsByTagName('form');

// i suggest adding a classname or ID to your form if you have more then one form on the page
// if that is the case, then select the form by ID or class instead

// add event listener to the form

form.addEventListener('submit', function(event) {

    // stop form submitting by default

    event.preventDefault();

    // get the value from the textbox, num1

    var num1 = this.querySelector('#num1').value;

    // send value of num1 to available.php via ajax

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'available.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            console.log("I worked!");
        } else {
            console.log("I didn't work!");
        }
    };
    xhr.send(encodeURI('num1=' + num1));

}

PHP

To get the num1 value from AJAX request:

<?php

$num1 = isset($_GET['num1']) ? (int) trim($_GET['num1']) : 0;

if ($num1 > 0) {
    // success
}

?>