Field values are not updaing using AJAX and json

[bravo14]

Hi all

 

I am trying to update field values using AJAX and json.

 

the ajax call is made using this code

 

 

<script type="text/javascript">
$(document).ready(function() {

$("#cboShipping").change(function() {
             var data = {
                 subTotal:25,
                 discount:0,
                 shippingOption: $('#cboShipping').val()
}
$.ajax({
                     type:"POST",
                     url:"library/setPostage.php",
                     data: data,
                     dataType:'json',
                     success: function(data){
                        $('#hidshippingCost').val(shippingCost);
                        $('#total').val(totalDisplay);
                        $('#hidTotal').val(total);
                        
                     }
                 });
});

});
</script>

 

The PHP is

<?

require_once('config.php');
print_r($_POST);
$zone = $_POST['shippingOption'];
$query="SELECT * FROM tbl_shipping_zones where id = $zone";
echo $query;
$result=mysqli_query($dbConn,$query);
$row=mysqli_fetch_array($result);

$shippingCost = $row['shipping_cost'];
echo $shippingCost;
$shippingZone = $row['name'];
echo $shippingZone;
$total = $_POST['subTotal'] + $shippingCost - $_POST['discount'];
echo $total;
$array=array(
'shippingCost' => $shippingCost,
'shippingCostDisplay' => displayAmount($shippingCost),
'shippingZone' => $shippingZone,
'total'        => $total,
'totalDisplay' => displayAmount($total)
);
print_r($array);
echo json_encode($array);
?>

The correct values are being generated in the php

 

Th fields and div containers I am trying to update are in the HTML below

 

 
<span id="total">£30.00</span>
<input name="hidDiscountType" type="hidden" id="hidDiscountType" value="" />
<input name="hidDiscountCode" type="hidden" id="hidDiscountCode" value="" />
<input name="hidDiscount" type="hidden" id="hidDiscount" value="0" />
<input name="hidTotalDiscount" type="hidden" id="hidTotalDiscount" value="0" />
<input name="hidTotal" type="hidden" id="hidTotal" value="30" /></td>
 

 

any guidance would be appreciated

Edited August 2, 2016 by requinix
fixed broken bbcode

[requinix]

First thing you have to do is get rid of those echo()s and print_r()s. They'll mess up the AJAX.

 

Second, and more to the point, is

success: function(data){
	$('#hidshippingCost').val(shippingCost);
	$('#total').val(totalDisplay);
	$('#hidTotal').val(total);
}

The only variable you have to work with is data. There is no "shippingCost" or "totalDisplay" or "total". You have to get those values from with the data object.

success: function(data){
	$('#hidshippingCost').val(data.shippingCost);
	$('#total').val(data.totalDisplay);
	$('#hidTotal').val(data.total);
}

[Jacques1]

The query is vulnerable to SQL injection attacks. Learn how to use prepared statements.

 

Actually, the whole approach with all those hidden fields and client-side parameters is strange. Do you want the user to set an arbitrary price? Or shouldn't the price be calculated by the server after the user has chosen a shipping option?