临时禁用提交按钮 [英] Temporary disabling a Submit Button

问题描述

我有一个将大文件上传到服务器的表单。这样的事情：

I have a form which upload a big file to server. Something like this:

<form id="myform" action="myaction.php">
  <p>
    <!--fields -->
  </p>
  <input type="submit" class="submit" value="Send" />
</form>

我需要阻止用户在之前的处理尚未就绪时重新提交表单。如何在处理之前禁用提交按钮并在提交操作后启用按钮？

I need to prevent the user resubmit the form while the previous processing is not ready. How can I disable submit button before processing and enable the button after submit action?

推荐答案

在jQuery中执行此操作的正确方法，从版本1.6开始，使用新的prop（）方法。

The correct way to do this in jQuery, as of version 1.6, is with the new prop() method.

同样重要的是您将事件附加到表单的提交事件，而不是提交按钮本身。这样，如果有人在填写表单时点击输入，就像我确定我们都这样做，按钮仍然会被禁用。

Also important is that you attach the event to the form's submit event, NOT to the submit button itself. That way if someone hits enter while filling out the form, like I'm sure we all do, the button will still be disabled.

正确的代码：

$("#myform").submit(function() {
    $("#myform .submit").prop('disabled', true);
}

如果你真的想阻止访问表单被多次提交，你也会停止提交表单，而不仅仅是禁用按钮：

If you really want to block access to the form being submitted multiple times, you would stop the form from being submitted too, not just disable the button:

var myform = $("#myform");
myform.submit(function() {
    if($.data(myform.get(0), 'submitting') {
        return false;
    }

    $.data(myform.get(0), 'submitting', true);
    $(".submit", myform).prop('disabled', true);
});

所有其他解决方案都错了！:)

All other solutions are WRONG! :)

开个玩笑，他们也会工作，但这会抓住更多特殊逻辑并正确处理财产。

Just kidding, they'll work too, but this will catch more exceptional logic and handles the property correctly.

这篇关于临时禁用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！