如何将jquery变量值传递给php变量？

Question

This is my javascript. I want to get jquery variable value to php variable in same page using ajax. I used to print php variable but there is an error. I would be very grateful if anyone can help me.

<script type="text/javascript">  
$(document).ready(function() {
    $('#roomOptions #select1').change(function() {
        var total = 0;
        $('#roomOptions #select1').each(function() {
            total+=parseInt($(this).val());    
        });
        $('#roomOptions #roomOptions_total').html(total);
        });         

    $('#roomOptions #select2').change(function() {
        var total1 = 0;
        $('#roomOptions #select2').each(function() {
            total1+=parseInt($(this).val());    
        });
        $('#roomOptions #roomOptions_total1').html(total1);
    });
});

$.ajax({
    type: "POST",
    url: "getrooms.php",
    data:{ total: total }, 
    success: function(data){
        console.log(data); 
    }
})
</script>

Answer 1

You should add PHP somewhat like this:

<?php
$total = $_POST['total']  ;
echo $total;

?>

Answer 2

Adding edits as per the comments from question author.

Since you are using the same page for posting data using jquery, you should do a refresh of the page. Modify the code like this for the ajax call ( javascript part ).

$.post(window.location, {title: title}, success: function(data) {
  //do something here
});

And add this to the top of your pages code.

 <?php
  if(isset($_POST['total'])) {
  echo $_POST['total'];
  }
 ?>

Answer 3

BTW, your total variable can be accessed only by the change method anonymous callback function!. total will be undefined in your ajax call.

$('#roomOptions #select1').change(function () {
    var total = 0;
    $('#roomOptions #select1').each(function () {
        total += parseInt($(this).val());
    });

    $('#roomOptions #roomOptions_total').html(total);

    $.ajax({
        url: getrooms.php,
        type: 'POST',
        data: {
            "total": total
        }
    });
});

Answer 4

You should declare your 'total' variable in javascript before your function.

var total = 0;
$('#roomOptions #select1').change(function () {
    total = 0;
    $('#roomOptions #select1').each(function () {
        total += parseInt($(this).val());
    });
    $('#roomOptions #roomOptions_total').html(total);
});

Or get it before ajax init like that

  <script> 
    total = $("#roomOptions #roomOptions_total").html();
    $.ajax({
        type: "POST",
        url: "getrooms.php",
        data:{ total: total }, 
        success: function(data){
            console.log(data); 
        }
    })
    </script>

You can access your var in php

<?php echo $_POST['total']; ?>

You can see what inside total before ajax send it

 <script> 
        total = $("#roomOptions #roomOptions_total").html();
        $.ajax({
            type: "POST",
            url: "getrooms.php",
            data: { total: total }, 
            success: function(data){
                console.log(data); 
            },
beforeSend: function() {
     console.log(total); 
  }
        })
        </script>

Answer 5

I think the problem is with your sequence of code. The ajax call is made before document.ready is called. If you convert it to something like this then may be it will work

<script type="text/javascript">  
$(document).ready(function() {
     var total = 0;
    $('#roomOptions #select1').change(function() {
         total = 0;
        $('#roomOptions #select1').each(function() {
            total+=parseInt($(this).val());    
        });
        $('#roomOptions #roomOptions_total').html(total);
        });         

    $('#roomOptions #select2').change(function() {
        var total1 = 0;
        $('#roomOptions #select2').each(function() {
            total1+=parseInt($(this).val());    
        });
        $('#roomOptions #roomOptions_total1').html(total1);
    });


$.ajax({
    type: "POST",
    url: "getrooms.php",
    data:{ total: total }, 
    success: function(data){
        console.log(data); 
    }
})
});
</script>