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（）但它没有用。难道我做错了什么？如何阻止用户连续提交？

谢谢AlL

Answer 1

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

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

2 个答案: