代码之家 › 专栏 › 技术社区 › Shermozle

提交Web表单时释放单击次数

prototypejs html javascript

Shermozle · 技术社区 · 16 年前

我们与之交互的一个写得不好的后端系统在处理我们正在产生的负载时遇到了问题。当他们解决他们的负载问题时,我们正在尝试减少我们正在生成的任何额外负载,其中之一是后端系统继续尝试为表单提交提供服务,即使另一个提交来自同一个用户。

我们注意到的一件事是用户双击表单提交按钮。我需要取消这些点击,并防止第二次提交表单。
我的方法(使用原型)将 onSubmit 在调用以下函数的表单上,隐藏表单提交按钮并显示“正在加载…” div .

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

我发现这个方法的问题是,如果我在“加载…”中使用动画gif。 div ,它加载很好,但在表单提交时不动画。

是否有更好的方法来执行这种去跳跃,并在等待表单结果(最终)加载时继续在页面上显示动画? ÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂ

5 回复 | 直到 16 年前

community wiki 2 revs, 2 users 93% matt lohkamp 11 年前

如果您方便使用jquery,请附加一个click()事件,它在初始提交之后禁用按钮。-

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

那种事。

Fczbkk 16 年前

使用原型,可以使用此代码查看是否已提交任何表单,并在提交时禁用所有提交按钮:

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

这对双击提交按钮的用户应该有帮助。但是,仍然可以以任何其他方式提交表单(例如,在文本字段上按Enter键)。为了防止出现这种情况,您必须在第一个表单提交之后开始监视任何表单提交,并停止它:

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

unscriptable 15 年前

以上所有好建议。如果你真的想像你说的那样“放松”,那么我有一个很好的功能。更多细节 unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

Jason Wadsworth 16 年前

您可以尝试在input(type=submit)元素上设置“disabled”标志,而不只是更改样式。这将完全关闭浏览器端的。

见: http://www.prototypejs.org/api/form/element#method-disable

aceofspades 14 年前

用Ajax提交表单,GIF将显示动画。