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

为您的 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);

Answer 2

按照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
P.S。您还可以使用 $.ajax.active 变量，其中 returns 活动 ajax 请求的数量，这可能是一种更优雅的方法。

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

jquery - how to prevent submit form continuously

javascript

forms

form-submit

bootstrap-modal