jquery - 如何防止连续提交表单

Question

我有一个模态表单如下：

 <!-- 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);
            }

        });
    });

目前，当用户点击提交按钮时，数据会被发送到服务器进行处理，在等待返回结果的这段时间内，modal还没有关闭，用户可以点击提交更多次。我不希望这种情况发生。 我想防止用户连续提交，不允许用户点击第二次提交按钮，用户必须等待返回的结果，如果成功，模态将被关闭。 我正在考虑禁用提交按钮，但这并不安全，因为用户可以通过用户机器上的 javascript 启用该按钮。 我尝试使用 event.stoppropagation () 和 event.stopimmediatepropagation () 但它不起作用。 难道我做错了什么？如何防止用户连续提交？

谢谢大家

Answer 1

按照CertainPerformance 的想法，我建议您使用变量。但是，我建议不要将变量放在代码的开头，而是使用 Ajax 提供的beforeSend 回调，它将在发送请求之前被调用。

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 回调here
附言你也可以使用$.ajax.active变量，它返回活跃的ajax请求的数量，这可能是一个更优雅的方法。

Answer 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);