Javascript 提交web表单时取消单击

与我们接口的一个写得很差的后端系统在处理我们产生的负载时遇到了问题。虽然他们解决了负载问题，但我们正在尝试减少产生的任何额外负载，其中之一是后端系统继续尝试并服务表单提交，即使另一个提交来自同一用户

我们注意到，用户双击表单提交按钮。我需要取消这些单击，并防止再次提交表单。
我的方法（使用原型）在表单上放置一个

onSubmit

，该函数调用以下函数，隐藏表单提交按钮并显示“加载…”

div

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

我发现这种方法存在的问题是，如果我在“加载…”

div

中使用动画gif，它可以很好地加载，但在表单提交时不会动画

在等待表单结果（最终）加载时，是否有更好的方法来执行此反弹跳并继续在页面上显示动画？ 您可以尝试在输入（type=submit）元素上设置“disabled”标志，而不仅仅是更改样式。这将完全关闭浏览器端的from

---

请参阅：

如果您手头有jQuery，请附加一个click（）事件，在初次提交后禁用按钮-

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

---

诸如此类。

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

---

以上都是好的建议。如果你真的想像你说的那样“去盎司”，那么我有一个很好的函数。详情请浏览

---

使用AJAX提交表单，GIF将显示动画。

使用jQuery，我发现更好的是Comments中的onesubmit（）死链接，这并不令人满意。代码可以在按下按钮后但在实际提交之前执行验证和其他任务。正因为如此，你将无法从正确的点击中解脱出来。是啊，哇，过去的爆炸——我想jquery真的已经存在了十多年了！与其删除click事件（以防以后需要使用），不如禁用submit按钮（如下面的@Fczbkk所述）或禁用整个表单（如概述的）更为合理。在这段时间之后没有选择答案？laaaaameErm，你是说除了我选的那个？（你的回答同样如此）我没有投票支持它，因为虽然它回答了问题，但它不是原型。

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

}