jquery-как предотвратить отправку формы непрерывно

У меня есть форма в модальном виде следующим образом: 

 <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
             </div>
             <form id="Myform" action="/action_page.php" method="get">
                First name: <input type="text" name="fname"><br>
                Last name: <input type="text" name="lname"><br>
                <input type="button" onclick="submitform()" value="Submit">
             </form>
          </div>
       </div>
    </div>

Javascript 

   function submitform() {

        //try
        //event.stopImmediatePropagation();
        //event.stopPropagation();

        //check validate is valid
        if (formValid) {
            $("#Myform").trigger("submit");
        }
    }

$("#Myform").submit(function (e) {
        e.preventDefault();
         // e.stopImmediatePropagation();
        $.ajax({
            type: this.method,
            cache: false,
            url: this.action,
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                    $('#create-media').modal('toggle');

                }
            },
            error: function (error) {
                console.log(error);
            }

        });
    });

В настоящее время, когда пользователь нажимает на кнопку отправить, данные будут отправлены на сервер для обработки, в течение времени ожидания результатов, возвращенных, модальный не был закрыт, пользователь может нажать, чтобы отправить больше раз. Я не хочу, чтобы это случилось. Я хочу запретить пользователям отправлять непрерывно, не позволяйте пользователям нажимать на вторую кнопку отправки, пользователь должен ждать результатов, возвращенных, если успешно, модальный будет закрыт. Я думал отключить кнопку submit, но это небезопасно, потому что пользователь может включить эту кнопку из-за javascript на пользовательской машине. Я попробовал использовать событие.stoppropagation () и событие.stopimmediatepropagation () но это не сработало. Я делаю что-то не так? Как предотвратить непрерывную отправку сообщений пользователями?

Спасибо Всем

2 2
javascript forms jquery form-submit bootstrap-modal

2 ответа:

Нижеизложенного CertainPerformance идея, я хотел бы предложить вам использовать переменную. Однако вместо того, чтобы помещать переменную в начало кода, я бы предложил использовать обратный вызов beforeSend, предоставляемый Ajax, он будет вызван непосредственно перед отправкой запроса.

var isBusy = false;
$("#Myform").submit(function (e) {
    e.preventDefault();
    if(isBusy) {
        return;
    }
    $.ajax({
        type: this.method,
        cache: false,
        url: this.action,
        enctype: 'multipart/form-data',
        data: new FormData(this),
        processData: false,
        contentType: false,
        beforeSend: function(xhr) {
            isBusy = true;
        },
        success: function (data) {
            $('#create-media').modal('toggle');
            isBusy = false;
        },
        error: function (error) {
            console.log(error);
            isBusy = false;
        }

    });
});

Вы можете узнать больше о beforeSend обратном вызове здесь
P.S. Вы также можете использовать переменную $.ajax.active, которая возвращает количество активных запросов ajax, это может быть более элегантный метод.

2

Дайте вашей функции submitform постоянную переменную alreadySubmitted. Кроме того, попробуйте прикрепить обработчик кнопок из Javascript вместо HTML, и preventDefault: 

const submitform = (() => {
  let alreadySubmitted = false;
  return (e) => {
    e.preventDefault();
    if (alreadySubmitted) return;
    alreadySubmitted = true;
    if (formValid) {
      $("#Myform").trigger("submit");
    }
  }
})();

document.querySelector('#Myform input[type="button"]').addEventListener('click', submitForm);
1