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更改为$("#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" />

Answer 2

def fractional_knapsack(value, weight, capacity):

    index = list(range(len(value)))
    # contains ratios of values to weight
    ratio = [v/w for v, w in zip(value, weight)]
    # index is sorted according to value-to-weight ratio in decreasing order
    index.sort(key=lambda i: ratio[i], reverse=True)

    max_value = 0
    fractions = [0]*len(value)
    for i in index:
        if weight[i] <= capacity:
            fractions[i] = 1
            max_value += value[i]
            capacity -= weight[i]
        else:
            fractions[i] = capacity/weight[i]
            max_value += value[i]*capacity/weight[i]
            break

    return max_value, fractions


n = int(input('Enter number of items: '))
value = input('Enter the values of the {} item(s) in order: '
              .format(n)).split()
value = [int(v) for v in value]
weight = input('Enter the positive weights of the {} item(s) in order: '
               .format(n)).split()
weight = [int(w) for w in weight]
capacity = int(input('Enter maximum weight: '))

max_value, fractions = fractional_knapsack(value, weight, capacity)
print('The maximum value of items that can be carried:', max_value)
print('The fractions in which the items should be taken:', fractions)

以上代码在您使用时效果最佳 html按钮代替输入类型按钮注意-要在按钮内显示旋转图标令人赞叹的字体或任何其他图标代替loading ..或同时在loadingText对象中

Answer 3

您只需要用以下代码替换该行： $（“＃submit_btn”）。val（“ Submit”）;

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

Answer 4

$(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 5

在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" />

超时时将按钮值更改回原始值（表单两次提交）

5 个答案: