提交 Web 表单时消除点击次数

Question

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

\n\n

我们注意到的一件事是用户双击表单提交按钮。我需要消除这些点击，并防止再次提交表单。
\n我的方法（使用原型）onSubmit在表单上放置一个调用以下函数的函数，该函数隐藏表单提交按钮并显示“正在加载...” div。

\n\n

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

\n\n

我发现这种方法的问题是，如果我在“正在加载...”中使用动画 gif div，它可以正常加载，但在提交表单时不会显示动画。

\n\n

有没有更好的方法来消除弹跳并在等待表单结果（最终）加载时继续在页面上显示动画？\n\xc2\xad\xc2\xad\xc2\xad\xc2\xad\ xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\ xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\ xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\xad\xc2\哈德

\n

Answer 1

使用 Prototype，您可以使用此代码来查看是否已提交任何表单，并在提交时禁用所有提交按钮：

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
            } );
        } );
    } );
} );

Answer 2

如果您方便使用 jQuery，请附加一个在首次提交后禁用按钮的 click() 事件 -

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

之类的东西。