使用Ajax将变量字符串从javascript传递到php

Question

How to pass a variable value from html page using javascript to php?

i created this code in my index.php

$amount = $_GET['pricenumb'];
echo $amount;

and this is my javascript code to call on click of button and send the data to the PHP file.

<script type="text/javascript">
$(".cell").on("click", "input:checkbox", function () {
    var thiss = $(this);
    var total = $("#price");
    var target = $("label[for='" + thiss.attr("id") + "']");

    var item_value = +(target.html().replace(/[^0-9\.]/g, "") || 0);
    var cur_total = +(total.html().replace("$", "") || 0);

    if (thiss.prop("checked") === true) {
        cur_total += item_value;
    } else {
        cur_total -= item_value;
    };

    total.text("$" + cur_total);

});
</script>   
<script type="text/javascript"> 
$("#pay_btn").on("click", function () {     
    var price = $("#price").text();
    var pricenumb = price.replace(/[^0-9\.]/g, "");
    $.ajax({
        type: "POST",
        url: "forumdisplay.php?fid=2",
        data: "price=" + price + "pricenumb="+ pricenumb,
        cache:false,
        success: function(){
        }
    });
});
    </script>

and this is the checkbox,

<div class="cell">
<div class="form-check"><label for="check-a" class="form-check-label"><input id="check-a" class="form-check-input" type="checkbox">$166<span class="form-check-sign"></span></label>
<div class="mask visible-on-sidebar-regular">Buy Product</div>
</div>
</div>

the work code is, when I check the checkbox, it will update the div content, and I want when I click on pay button, get the div value via javascript and send the value to my index.php

Answer 1

You are using POST in your ajax and GET in php, chage your ajax to GET . Also, In your ajax change

type: "POST",
url: "forumdisplay.php?fid=2",
data: "price=" + price + "pricenumb="+ pricenumb,

to

type: "GET",
url: "forumdisplay.php",
data: {
     price: price,
     pricenumb: pricenumb,
     fid: 2
}

Answer 2

That's not how you pass data in ajax. The correct format is to use curly braces and define props name and then value

data:{propName1: value1,propsName2: value2,propsName3: "Some string value"}

Which can be used in the file like this in case of POST request.

• $_POST['propName1'] which will give value1 variable data as a result

• $_POST['propName3'] which will give output as Some string value string

The value can be in quotes if it's a string or not in quotes if it's a variable. So you need to redefine your ajax data props to

$.ajax({
        type: "POST",
        url: "forumdisplay.php?fid=2",
        data: {price: price ,pricenumb: pricenumb},
        cache:false,
        success: function(response){
            // Things to do on success
        },
        error: function(error){
            // Error handling in case of error
        }
});

These values you passed can be used in the file forumdisplay.php with $_POST['price'] and $_POST['pricenumb'] . The name inside the $_POST is the propsName inside data props in ajax function.