单击后禁用提交按钮，并保持POST / REDIRECT / GET工作

Question

我使用POST / REDIRECT / GET技巧来防止重新发送表单。 现在，我想禁用不应两次单击的表单提交按钮（单击后）。 尽管我尝试了所有发现的JavaScript示例，但它们均与POST / REDIRECT / GET冲突。 在大多数情况下，它甚至不提交，而只是重定向到自身。 有什么办法吗？ 谢谢你的帮助。

我尝试过的一些事情和冲突就是这个例子：

该脚本首先在其中运行headers.php：

if (isset($_POST['start-diff-scan']))
{
    $_SESSION['SCAN_START'] = true;

    header('HTTP/1.1 303 See Other');
    header('Location: '.APP_URL.'scan.php');
    exit;
}

然后使用以下形式进行扫描：

<form name="start-diff-scan" id="start-diff-scan" method="post">
    <button
        name="start-scan"
        id="start-scan"
        value=""
        class="start-scan btn btn-primary"
        type="submit"
        method="post">
        Start New Scan
    </button>
</form>

并且工作正常。 但是js技巧与此矛盾。 我在scan.php的最后添加了js代码

<script>
$('#start-diff-scan').submit(function()
{
    $('#start-scan').prop('disabled', true);
});
</script>

发生的事情是它仅重定向到同一页面（scan.php），而不执行任何操作。 到目前为止，感谢您提供的所有yoru解答和帮助，这很棒。 任何想法表示感谢

Answer 1

您无法通过这种方式阻止它，因为它是用户端脚本，人们可以在发送表单之前轻松地删除此代码。 即使禁用按钮。 在服务器端脚本中进行检查，是否已插入请求，因此您将显示错误或将其返回页面

Answer 2

$('#start-scan').attr("disabled", true);

应该管用

Answer 3

如果“禁用”方法使您的代码混乱，而其他所有方法均失败：

您可以尝试用“ loader gif”覆盖按钮，使其不可单击。

$('#start-scan').click(function()
{
    $('#start-scan').before('<div>LOADING</div>'); //Set the loading overlay width, height and background-color
});

Answer 4

您遇到的问题是，当用户单击时将其设置为禁用会导致按钮被禁用，并且单击操作不会触发。

添加setTimeout以延迟设置禁用的属性。

另一种选择是隐藏按钮，并用表示提交的文本替换。

Answer 5

$('#start-scan').attr('disabled', true);

或使用

.prop("disabled", true)

$('#start-scan').prop("disabled", true)

Answer 6

您可以将其添加为以下形式：

onClick="this.disabled=true"

Answer 7

尝试prop()

$('#start-scan').prop('disabled', true);