I have a shipping estimator I am trying to reset via ajax on any cart change.
I have the call and ajax working well on all of the page except the shipping estimate.
I have these as hidden values:
<input type="hidden" id="sendto" name="shippingSento" value="57720">
<input type="hidden" id="cart_street_address" name="shippingCart_street_address" value="3805 here Ave ">
<input type="hidden" id="cart_zip_code" name="shippingCart_zip_code" value="33351">
<input type="hidden" id="cart_state" name="shippingCart_state" value="FL">
<input type="hidden" id="address_id" name="shippingSento" value="57720">
My javascript ajax call is:
<script>
function update_shipping_estimate(){
var sendto = document.getElementById('sendto').value;
var cart_state = document.getElementById('cart_state').value;
var cart_zip_code = document.getElementById('cart_zip_code').value;
var cart_street_address = document.getElementById('cart_street_address').value;
var address_id = document.getElementById('address_id').value;
$.ajax({
url: 'ajax_shipping_estimate.php',
dataType: 'html',
data: {cart_street_address, cart_state, cart_zip_code, sendto, address_id},
success: function (result) {
; $('#shipping_estimate').html(result);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
};
</script>
For error testing I am outputting the $_POST data fields, but these are not being sent out by the ajax call and hence no update on the shipping data.
My initial page load, the estimate is correct, but on any page change, the ajax kicks in and the returned results are incorrect due to the posted data not being sent.
I am verifying this by returning the data from the ajax call :
$shipping_estimate .= 'address id = ' . $_POST['address_id'];
$shipping_estimate .= '<br>';
$shipping_estimate .= 'sendto = ' . $_POST['sendto'];
$shipping_estimate .= '<br>';
$shipping_estimate .= 'cart_zip_code = ' . $_POST['cart_zip_code'];
$shipping_estimate .= '<br>';
$shipping_estimate .= 'cart_street_address = ' . $_POST['cart_street_address'];
$shipping_estimate .= '<br>';
$shipping_estimate .= 'cart_state = ' . $_POST['cart_state'];
$shipping_estimate .= '<br>';
Which are not containing the hidden values after the initial page load and an ajax call to refresh the shipping estimate. Not sure why my hidden values are all empty.
This fixed the issue:
function update_shipping_estimate(){
var sendto = parseInt(document.getElementById('sendto').value);
var cart_state = document.getElementById('cart_state').value;
var cart_zip_code = document.getElementById('cart_zip_code').value;
var cart_street_address = document.getElementById('cart_street_address').value;
var address_id = parseInt(document.getElementById('address_id').value);
$.ajax({
url: 'ajax_shipping_estimate.php',
dataType: 'html',
method: "post",
data: {cart_street_address, cart_state, cart_zip_code, sendto, address_id},
success: function (result) {
$('#shipping_estimate').html(result);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
};