How to get javascript value into php variable without reloading the page using ajax

Question

Here I want to get a value from JavaScript to PHP variable without using any POST or GET method.

Here I'm giving HTML code:

<input type="number" name="days" id="days" class="col-sm-2 form-control" placeholder="DAYS"> 

<input type="number" name="night" id="night" class="col-sm-2 form-control" placeholder="NIGHT"> 
                            
<button id="generate" onclick="GetValue()" class="btn btn-danger">Generate</button>

Javascript Code

<script>
$(function(){
    $("#generate").on('click', function(){
        var days = $("#days").val();
        var night=$("#night").val();
        var base_url = $('#base').val();
        $.ajax({
        type: 'post',
        url: base_url,
        data: {'days' : days, 'night': night}, 
        success: function( data ) {
        console.log(data);
        }
      });
    });
  });
</script>

php code

<?php
$days = $_POST['days']; 
$night = $_POST['night'];
echo $days . " " . $night;
?>

Variable value not working.

Answer 1

You can not directly assign javascript variable to PHP variable, that's why ajax is used.

If you want to perform operations on client side variables to server-side without page refresh and using the same page then you have to write the PHP code on the top of the page before anything start of client-side and the use exit to break after the PHP response is completed. and in jquery ajax forget the URL part as you are using the same page for request and response.

Note: Make sure to include jQuery

Cover all the element in form tag so we can simply send data using serialize method.

index.php

<?php
    if(isset($_POST) && !empty($_POST['days'])){
        $days = $_POST['days']; // you can write the variable name same as input in form element.
        $night = $_POST['night'];

        //Perform any operations on this variable and send in response whatever you want it will send the response to success function of jquery ajax and you can check response in `data`

        echo $days . " " . $night;
        exit();
    }
?>


<!--<form id='frmsbmt' method='post' action='#'>-->

    <input type="number" name="days" id="days" class="col-sm-2 form-control" placeholder="DAYS"> 

    <input type="number" name="night" id="night" class="col-sm-2 form-control" placeholder="NIGHT"> 

    <button id="generate"  class="btn btn-danger">Generate</button>
<!--</form>-->
<script>
    $(function(){
        $("#generate").on('click', function(){
            var days = $("#days").val();
            var night=$("#night").val();
            var base_url = $("#base").val();
            $.ajax({
                type: 'post',
                //url: base_url,
                data: {'days' : days, 'night': night}, //$("#frmsbmt").serialize(), //form serialize will send all the data to the server side in json formate, so there is no need to send data seperately.
                success: function( data ) {
                    console.log(data);
                    //alert(data);
                    // It will write the response in developer tools console tab or you can alert it.
                }
            });
        });
    });
</script>

Answer 2

To answer your question without using any post or get method to retrieve the variable is impossible. One language is a server side language, one language is a client side language, if the two languages never communicate through an established standard and protocol passing a variable between the two are impossible. PHP is translated server side which means the client side interface doesn't really know it exists unless there is an action that is tied to a method namely get or post. An Ajax request uses either POST or GET or one of the other established methods to communicate.

Answer 3

You can use an AJAX call for this.

function GetValue() {
    var str = document.getElementById('days').value;
    $.ajax({
        type: 'post',
        url: 'text.php',
        data: {
            someValue: str
        },
        success: function( data ) {
            console.log( data );
        }
    });
}