禁用 HTML 表单上的多次提交答案

【问题标题】：Disabling multiple submit on HTML forms禁用 HTML 表单上的多次提交
【发布时间】：2010-01-27 08:38:28
【问题描述】：

如果我的用户多次点击表单的提交按钮，他实际上会发送多个 GET/POST 请求（取决于表单首选项）。

我发现使用 JS 禁用提交按钮有点问题，因为如果用户尝试停止（ESC/停止按钮），它不会重置按钮（除非你抓住它并再次使用 JS 处理），如果用户从下一页返回（返回按钮），提交按钮仍然被禁用（至少在 Firefox 中）。

禁用多个表单提交的最佳做法是什么。

谢谢！

【问题讨论】：

感谢 pavium :) 我越来越喜欢 stackoverflow！

标签： javascript html forms submit

【解决方案1】：

Javascript 对我来说很好用。确保在用户中止提交时按钮重新启用是可用性的一部分。

如果您不想使用 javascript 禁用按钮，那么也许在服务器端您可以在特定时间跨度内捕获重复消息？

【讨论】：

【解决方案2】：

这可能无法回答您的问题，但我认为生成一些 uniq 来识别服务器端的请求可能是一个更好的主意。客户端验证总是有问题的。

【讨论】：

我同意你的看法。只需使用隐藏字段来保留随表单提交的一次性值。值保存在服务器上，当请求进入时，它将失效，因此具有相同键的后续请求将被忽略。显然你可以使用 JS 魔法，但这并不可靠。

【解决方案3】：

将禁用绑定到表单的提交，然后将其禁用到页面加载（刷新/返回时重置）：

function disableSubmits( domNode, toDisable )
{
    domNode = domNode || document.getElementsByTagName( 'body' )[ 0 ];

    toDisable = !!toDisable;

    for( var i = 0; i < inputs.length; ++i )
    {
        if( 'submit' === inputs[i].getAttribute( 'type' ) )
        {
            inputs[i].disabled = toDisable;
        }
    }
}

var onloadhandler = function( )
{
    var theForm = document.getElementById( 'theForm' );

    theForm.onsubmit = function( ){ disableSubmits( theForm, true ); }

    disableSubmits( theForm, false );
};

var old = window.onload;

window.onload =  'function' === typeof old
                 ? function( ){ old(); onloadhandler(); }
                 : onloadhandler;

【讨论】：