在HTML表单上禁用多个提交

时间:2010-01-27 08:38:28

标签: javascript html forms submit

如果我的用户在表单的提交按钮上多次单击,他实质上会发送多个GET / POST请求(取决于表单prefs)。

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

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

谢谢!

3 个答案:

答案 0 :(得分:2)

Javascript对我来说很好。

确保在用户中止提交时启用了按钮。

如果你不想使用javascript禁用你的按钮,那么可能在服务器端你可以在某个时间段内捕获重复的消息?

答案 1 :(得分:1)

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

答案 2 :(得分:1)

将禁用绑定到表单的提交,然后将其禁用到页面加载(在刷新/返回时重置):

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;