CODEWITHSUNDEEP
javascriptajax
Encore Leasing and Finance Cor
Encore Leasing and Finance Cor

Reputation: 65

Prevention of double submission

I am currently have problems with double submissions with my local website. Most of my users uses slow internet connection. They always double clicking the button. I placed a disable button events on my ajax but on slow connection it seems that it does not work.

Here is my code 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 &nbsp; <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'; 
    }
});

As you can see I added beforeSend function on my ajax. On my tests it always disabled the button before sending the data and after inserting the data the button will be enabled. However, my users when they ran the website on a slow internet connection the button does not disabling. Is there a better way to prevent this from happening?

Upvotes: 2

Views: 106

Answers (1)

user1039663
user1039663

Reputation: 1280

I would run the disabled = true code even before calling to the ajax method. Maybe some network resolution or something is delaying beforeSend.

You can also implement a javascript global boolean variable that (locks) disables the ajax invocation.

But always even before calling to ajax.

Edit: also, if the form has the submit button disabled, if the user press enter on some places, then the form can be submitted.

Upvotes: 1

Related Questions