I am currently experiencing issues with double submissions on my local website. Many of my users have slow internet connections and tend to double-click the submit button. I implemented a disable button event in my AJAX code, but it doesn't seem to work properly on slow connections.
Here is the code snippet I used:
$.ajax({
url: 'submit-application-fee-details.php',
method: 'POST',
dataType: 'TEXT',
data: {applno : applno, feecode : feecode, feeamt : feeamt, auditky : auditky, uid: uid, feepd : feepd, dedto : dedto},
beforeSend: function(){
document.getElementById("confirmsubmit").disabled = true;
document.getElementById("confirmsubmit").innerHTML = 'Submit <div class="spinner-border text-light" role="status"> <span class="sr-only">Loading...</span></div>';
},
success: function(response) {
if(response == 'Approved Application' || response == 'Updated' || response == 'Inserted'){
document.getElementById("update").classList.add("button-hidden");
document.getElementById("cancel").classList.add("button-hidden");
initialize_form();
display_table();
clear_fee_info_form();
$('html, body').animate({
scrollTop: $("body").offset().top
}, 100,
'linear');
if(response == 'Approved Application'){
show_alert('Fee Submit', "Application is approved. Details cannot be updated.", 'warning');
}
else if(response == 'Updated'){
show_alert('Fee Submit', "Fee has been updated.", 'success');
}
else if(response == 'Inserted'){
show_alert('Fee Submit', "Fee has been assigned.", 'success');
}
}
else{
show_alert('Fee Submit Error', response, 'error');
}
},
complete: function(){
$('#confirmModal').modal('hide');
document.getElementById("confirmsubmit").disabled = false;
document.getElementById("confirmsubmit").innerHTML = 'Submit';
}
});
In my AJAX function, I included a beforeSend method that disables the button before sending the data and enables it after inserting the data. However, when users with slow internet connections access the site, the button does not always disable as intended. Is there a more effective way to prevent this issue?