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

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

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>

Advertisement

Answer