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

        });
    });

目前，当用户点击提交按钮时，数据会被发送到服务器进行处理，在等待结果返回的时间内，模态框还没有关闭，用户可以多次点击提交。我不希望这种情况发生。我想防止用户连续提交，不允许用户点击第二次提交按钮，用户必须等待结果返回，如果成功，模态将被关闭。我正在考虑禁用提交按钮，但这并不安全，因为用户可以通过用户机器上的 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 请求的数量，这可能是一种更优雅的方法。