禁用提交，但先提交表单

Posted 2023-02-24

【中文标题】禁用提交，但先提交表单

【英文标题】：Disabling submit, but submitting form first

【发布时间】：2016-07-30 10:35:35

【问题描述】：

<script>function lockoutSubmit(button) 
    var oldValue = button.value;

    button.setAttribute('disabled', true);
    button.value = '...processing...';

    setTimeout(function()
        button.value = oldValue;
        button.removeAttribute('disabled');
    , 3000)
</script>

这就是我用于禁用的脚本（可在 Stack Overflow 上找到）。

这是我的更新条件：

<?php
    if(isset($_POST['coin']))

        $coin="UPDATE users SET coins = coins + 100 WHERE user_id = '$user_id'";

        $coin_in=mysqli_query($conn,$coin);
    ?>

这是我在输入中添加onclick 的地方：

<form action="" method="post">
 <input type="submit" value="Get Coins" name="coin" onclick="lockoutSubmit(this)" >
 </form>

此脚本在单击按钮后禁用按钮，这是我想要的，但问题是，当我将 onclick 从if 条件添加到输入 UPDATE 时，它不起作用。基本上当我点击提交时，什么都没有发生，它只会禁用它。我是 javascript 新手，不知道是否可以像这样组合它...有什么想法/提示吗？

【参考方案1】：

如果您将 false 返回到 onclick，它将不会提交表单。

所以只需将return false 添加到lockoutSubmit() 并在延迟后使用document.getElementById("myForm").submit(); 手动提交。

【讨论】：

【参考方案2】：

你也可以这样做

<form name="myform" action="formaction" method="post"> 

<input type="submit" value="Get Coins" name="coin" onclick="document.forms['myform'].submit();lockoutSubmit(this)" /> </form>

或者如果你知道 CSS 可以制作锚按钮

<a="JavaScript: document.forms['myform'].submit()" on click="lockoutSubmit(this);" />