Предотвращение двойной подачи

Question

У меня в настоящее время проблемы с двойным представлением на моем местном веб-сайте. Большинство моих пользователей использует медленное соединение inte rnet. Они всегда дважды нажимают на кнопку. Я разместил события кнопки отключения на моем ajax, но при медленном соединении кажется, что оно не работает.

Вот мой код, который я использовал:

 $.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'; 
    }
});

Как видите, добавлена ​​функция beforeSend на моем ajax. В моих тестах кнопка всегда отключалась перед отправкой данных, а после вставки данных кнопка будет включена. Тем не менее, мои пользователи, когда они запустили сайт по медленному inte rnet соединению, кнопка не отключается. Есть ли лучший способ предотвратить это?

Answer 1

Я бы запустил код disabled = true еще до вызова метода ajax. Возможно, какое-то сетевое разрешение или что-то задерживает beforeSend.

Вы также можете реализовать глобальную логическую переменную javascript, которая (блокирует) отключает вызов ajax.

Но всегда даже перед вызовом ajax.

Редактировать : также, если в форме отключена кнопка отправки, если пользователь нажимает ввод в некоторых местах, то форму можно отправить.