表单未提交，单击后禁用提交按钮时页面未加载答案

【问题标题】：Form not submitted, page not loads when submit button is disabled after click表单未提交，单击后禁用提交按钮时页面未加载
【发布时间】：2023-03-21 12:24:01
【问题描述】：

当我单击提交按钮时，页面会加载几秒钟，然后最终提交表单。我想在短时间内停止多次提交。这就是为什么我使用下面的 jquery 来停止多次提交。

<input name="submit" type="submit" id="submit" value="Submit" onclick="Submit(this)"/>

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

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

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

我的问题是当我单击提交按钮时，它会禁用几秒钟，然后重新启用按钮，但表单没有提交，页面也没有加载。

当我单击google chrome 上的提交按钮时，按钮单击但页面未加载且表单未提交。当我点击Mozilla Firefox 上的提交按钮时，页面转到表单操作页面并出现一个白页。

【问题讨论】：

尝试将按钮更改为输入按钮而不是提交
@achal naskar：为什么要在 10 秒后重新启用按钮？这是你在 setTimeout 回调函数中对你的序列所做的。
“为什么我使用以下 jquery” - 不，您没有在该脚本中使用任何 jQuery。这都是原生 JavaScript。
@achal 你是用 setTimeout 来模拟 ajax 调用还是什么？

标签： javascript php jquery html forms

【解决方案1】：

实际的问题是，按钮在提交事件触发之前被禁用。

试试这个：

<input type="submit"/>

$('form#id').submit(function(e) {
    $(this).children('input[type=submit]').attr('disabled', 'disabled');
    e.preventDefault(); 
    return false;
});

【讨论】：

你不必写 e.preventDefault();因为返回 false();为你做它

【解决方案2】：

试试这个：

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

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

        $(button).closest('form').submit();
    }
</script>

【讨论】：