按钮值在超时时更改回原始值（表单双重提交）

Question

我正在尝试通过暂时禁用提交按钮并将提交按钮值更改为“处理中...”来修复表单双重提交，以便用户知道发生了什么。

禁用工作onClick 并且“提交”值更改为“处理...”，但是在setTimeout 函数结束后我无法将值更改回“提交”。

有人知道我该怎么做吗？

$(function() {
  $("#submit_btn").click(function() {
    $("#submit_btn").attr("disabled", "disabled");
    this.value = "Processing...";
    setTimeout(function() {
      this.value = "Submit"; //<- this line doesn't work
      $("#submit_btn").removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

Answer 1

关于this 关键字在setTimeout() 中的错误使用问题已经解释过了。但是，如果您能够使用arrow function expressions (ES6 feature)，那将不是问题：

箭头函数表达式是常规函数表达式的语法紧凑替代方案，尽管 没有它自己的绑定到 this、arguments、super 或 new.target 关键字.

使用此功能，您的代码可以稍微简化，如下一个示例所示：

$("#submit_btn").click(function()
{
    $(this).attr("disabled", "disabled").val("Processing...");

    setTimeout(
        () => $(this).val("Submit").removeAttr("disabled"),
        5000
    );
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

Answer 2

$(document).ready(function() {
    $(function() {
        $("#submit_btn").click(function() {
            $("#submit_btn").attr("disabled", "disabled");
            this.value = "Processing...";
            outerthis = this;
            setTimeout(function() {
                outerthis.value = "Submit";
                $("#submit_btn").removeAttr("disabled");
            }, 5000);
        });
    });
});

Answer 3

 $(function() {
        $("#submit_btn").click(function(event) {
            $('button').button({ loadingText: 'Processing..' });
            $('#submit_btn').button('loading');
            //after submit stuff put below line to reset;
            $('#submit_btn').button('reset');
        });
    });

上面的代码在你使用时效果最好 html按钮代替输入类型按钮 注意——在按钮里面显示旋转图标 font-awesome 或任何其他图标代替 Processing.. 或加载文本对象中的两者

Answer 4

您只需将该行替换为以下代码： $("#submit_btn").val("提交");

您应该使用 val 函数来更改按钮的文本。

Answer 5

只需将this 更改为$("#submit_btn") 即可：

$(function() {
  $("#submit_btn").click(function() {
    $("#submit_btn").attr("disabled", "disabled");
    $("#submit_btn").val("Processing...");
    setTimeout(function() {
      $("#submit_btn").val("Submit");
      $("#submit_btn").removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

问题是您的函数干扰了this。你可以这样做 self = this 会产生相同的效果：

$(function() {
  $("#submit_btn").click(function() {
    var self = this;
    $(self).attr("disabled", "disabled");
    $(self).val("Processing...");
    setTimeout(function() {
      $(self).val("Submit");
      $(self).removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

或者你可以使用event.target:

$(function() {
  $("#submit_btn").click(function(event) {
    $(event.target).attr("disabled", "disabled");
    $(event.target).val("Processing...");
    setTimeout(function() {
      $(event.target).val("Submit");
      $(event.target).removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />