I have a function submitOrderRequestForm that submits form data via an AJAX call and redirects the user to another page upon a successful response. I want to track the status “REQUEST_FLOW” using the sendBeacon API before the page redirects.
Here is my current code:
function submitOrderRequestForm() {
$('#mobile_number').val($("#phone-number").intlTelInput("getNumber"));
$('#contact_number').val($("#phone-number").intlTelInput("getNumber"));
$('#orderType').val('order_request');
// $('#consentEmailValue').val($("#consentEmail").is(":checked") ? 1 : 0);
// $('#consentSMSValue').val($("#consentSMS").is(":checked") ? 1 : 0);
$('#consentBothValue').val($("#consentBoth").is(":checked") ? 1 : 0);
getToken();
// $("#continueBtn").prop("disabled",true);
$.ajax({
url: "{{URL::route('item.borrow-post',$shoppingCart->id)}}",
type: "post",
async: false,
data: $("#reservationForm").serialize(),
success: function (data) {
if (data.type=='success') {
window.location.href = "{{URL::route('submit-order-request')}}";
checkout_tracking_status = "REQUEST_FLOW";
}
},
}
I want to use the sendBeacon API to send tracking data to the server for the checkout_tracking_status = “REQUEST_FLOW” event. However, I’m not sure how to implement this correctly to ensure the beacon sends the data reliably before the page redirects.
Where should I place the sendBeacon call to ensure it executes before the redirect?
How can I structure the data payload for sendBeacon?
Any guidance or examples would be greatly appreciated.