Избегайте многократной отправки формы через запрос ajax до завершения первого вызова ajax

Question

У меня есть форма, которую я отправляю через ajax call. Но когда пользователь нажимает кнопку отправки формы более одного раза, то вызов ajax запускается каждый раз до завершения первого вызова ajax. Поэтому я хочу остановить многократную отправку до завершения первого звонка. Вот мой вызов ajax.

jQuery('#form1').submit(function(){
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              alert('success');
            }
        });
})

Answer 1

Вы можете отобразить загрузчик после события Click вашей кнопки, которое отключит события клавиатуры, как следует

jQuery('#form1').submit(function(){
$('[id*=loadingmodal]').modal({ backdrop: 'static', keyboard: false });//show the loader after click
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              alert('success');
 $('[id*=loadingmodal]').modal('hide');//hide the loader after completion
            }
        });
})

см. Следующее изображение загрузчика после события щелчка Демонстрация загрузчика изображения

следующий дизайн показывает простой способ загрузки загрузчика и CSS

 <div class="modal fade" id="loadingmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document" style="width: 0px; height: 0px;">
            <div class="modal-content" style="width: 0px; height: 0px; margin-left: -100px; margin-top: -150px; padding: 0px">
                <div class="modal-body" style="width: 0px; height: 0px;">
                    <div class="loader">
                        <div class="loader-inside"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 2

Вам нужен флаг, чтобы отслеживать статус отправки.

var isSubmitting = false; // the flag

jQuery('#form1').submit(function(){
   // If the form is currently being processed, return.
   if (isSubmitting) {
    return; // Do nothing and return
   }
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
   isSubmitting = true;
   jQuery.ajax({
        type: "POST",
        url:url,
        data: {
          'data': form_data
        },
        success: function(data){
          alert('success');
        },
        complete: function () {
          // After everything is complete, reset the flag so the form can be submitted again later if needed.
          isSubmitting = false;
        }
    });
})

Answer 3

после нажатия кнопки отправки вы можете отключить ее до завершения вызова ajax, а затем просто удалить атрибут отключения

jQuery('#form1').submit(function(){
   $("input[type=submit]").attr("disabled", "disabled");
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              alert('success');
            }
        }).done(function() {
  				  $("input[type=submit]").removeAttr("disabled");
        });
})

Answer 4

Вы можете просто отключить кнопку отправки.

например. у вас есть кнопка с идентификатором mySubmitButton

jQuery('#form1').submit(function(){
   $('#mySubmitButton').prop('disabled', true); /* <-- disable button */
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              $('#mySubmitButton').prop('disabled', false); /* <-- enable button */
              alert('success');
            }
        });
})

Примечание: у вас всегда должна быть функция ошибки при вызовах в службу поддержки, и вам также нужно включить свою кнопку там.