104

有时当响应缓慢时，可能会多次单击提交按钮。

如何防止这种情况发生？

4

24 回答 24

104

在表单已经提交后，使用不显眼的 javascript 禁用表单上的提交事件。这是一个使用 jQuery 的示例。

编辑：修复了在不单击提交按钮的情况下提交表单的问题。谢谢，一番。

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});
于 2009-05-29T16:16:35.423 回答
44

我尝试了 vanstee 的解决方案以及 asp mvc 3 不显眼的验证，如果客户端验证失败，代码仍然运行，并且表单提交被永久禁用。更正字段后，我无法重新提交。（见bjan的评论）

所以我像这样修改了vanstee的脚本：

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});
于 2012-10-17T13:25:08.623 回答
24

通过让 onsubmit 处理程序隐藏提交按钮并用加载动画替换它，可以非常优雅地实现客户端表单提交控制。这样，用户在他的动作（点击）发生的同一地点获得即时的视觉反馈。同时，您可以防止再次提交表单。

如果您通过 XHR 提交表单，请记住您还必须处理提交错误，例如超时。您必须再次显示提交按钮，因为用户需要重新提交表单。

另一方面，llimllib 提出了一个非常有效的观点。所有表单验证都必须发生在服务器端。这包括多次提交检查。永远不要相信客户！这不仅是禁用 javascript 的情况。您必须记住，所有客户端代码都可以修改。有点难以想象，但与您的服务器对话的 html/javascript 不一定是您编写的 html/javascript。

正如 llimllib 建议的那样，使用该表单唯一的标识符生成表单并将其放在隐藏的输入字段中。存储该标识符。接收表单数据时，仅在标识符匹配时处理它。（还将标识符链接到用户会话并与之匹配，以提高安全性。）数据处理后删除标识符。

当然，有时，您需要清理从未提交过任何表单数据的标识符。但很可能您的网站已经采用了某种“垃圾收集”机制。

于 2009-05-29T22:19:19.943 回答
17

这是执行此操作的简单方法：

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>
于 2009-05-29T16:16:08.980 回答
15 
<form onsubmit="if(submitted) return false; submitted = true; return true">
于 2009-05-29T16:10:27.777 回答
10

对这个问题的最简单的回答是：“有时响应速度很慢，可能会多次单击提交按钮。如何防止这种情况发生？”

只需禁用表单提交按钮，如下面的代码。

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

它将禁用提交按钮，第一次点击提交。此外，如果您有一些验证规则，那么它会正常工作。希望它会有所帮助。

于 2015-05-28T13:41:39.333 回答
9

创建一个唯一标识符（例如，您可以散列当前时间），并使其成为表单上的隐藏输入。在服务器端，检查每个表单提交的唯一标识符；如果您已经收到了该哈希，那么您已经收到了重复提交。用户重新提交的唯一方法是重新加载表单页面。

编辑：依赖javascript不是一个好主意，所以你们都可以继续支持这些想法，但有些用户不会启用它。正确的答案是不信任服务器端的用户输入。

于 2009-05-29T16:11:14.767 回答
8

单击后立即禁用提交按钮。确保正确处理验证。还要为所有处理或数据库操作保留一个中间页面，然后重定向到下一页。这确保刷新第二页不会进行其他处理。

于 2009-05-29T16:10:45.250 回答
5

您还可以显示进度条或微调器以指示表单正在处理。

于 2009-05-29T16:14:48.573 回答
5

使用 JQuery，您可以：

$('input:submit').click( function() { this.disabled = true } );

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );
于 2009-05-29T16:16:01.960 回答
4

您可以简单地防止多次提交：

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});
于 2012-09-29T23:22:14.027 回答
4

我知道您用“javascript”标记了您的问题，但这是一个完全不依赖于 javascript 的解决方案：

这是一个名为PRG的 webapp 模式，这里有一篇很好的文章来描述它

于 2009-05-29T22:32:16.877 回答
3

你可以试试safeform jquery 插件。

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})
于 2012-07-20T11:59:29.977 回答
3

在客户端，您应该在使用 javascript 代码提交表单后禁用提交按钮，就像 @vanstee 和 @chaos 提供的方法一样。

但是存在网络延迟或禁用 javascript 的情况的问题，您不应该依赖 JS 来防止这种情况发生。

因此，在服务器端，您应该检查来自相同客户端的重复提交，并省略重复提交，这似乎是用户的错误尝试。

于 2011-11-13T16:02:14.427 回答
1

这允许每 2 秒提交一次。在前面验证的情况下。

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})
于 2019-04-11T12:24:21.043 回答
1

在您的表单中使用此代码。它将处理多次点击。

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

它肯定会起作用。

于 2017-09-19T09:36:04.873 回答
1

对我来说最简单和优雅的解决方案：

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

链接更多...

于 2017-09-15T12:51:16.007 回答
0

防止多次提交的最佳方法是在方法中传递按钮 ID。

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton;
于 2014-07-08T08:28:18.620 回答
0

最简单的解决方案是禁用单击按钮，在操作完成后启用它。要检查 jsfiddle 上的类似解决方案：

[click here][1]

您可以在此答案上找到其他一些解决方案。

于 2017-03-08T07:07:28.267 回答
0 
<h3>Form</h3>
<form action='' id='theform' >
<div class='row'>
    <div class="form-group col-md-4">
            <label for="name">Name:</label>
            <input type='text' name='name' class='form-control'/>
    </div>
</div>  
<div class='row'>
    <div class="form-group col-md-4">
            <label for="email">Email:</label>
            <input type='text' name='email' class='form-control'/>
    </div>
</div>  
<div class='row'>
    <div class="form-group col-md-4">
         <input class='btn btn-primary pull-right' type="button" value="Submit" id='btnsubmit' />   
    </div>
</div>
</form>



<script>

    $(function()
    {
      $('#btnsubmit').on('click',function()
      {
        $(this).val('Please wait ...')
          .attr('disabled','disabled');
        $('#theform').submit();
      });
      
    });

</script>
于 2020-12-18T14:04:50.363 回答
0

这对我来说很好。它提交农场并禁用按钮，并在 2 秒后激活按钮。

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

在 ECMA6 Syntex 中

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}
于 2017-09-08T06:41:10.717 回答
0

只是在不绕过浏览器输入验证的情况下添加可能的答案

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});
于 2017-11-24T08:42:01.847 回答
0

使用 javascript 做到这一点有点容易。以下是提供所需功能的代码：

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

于 2016-07-20T12:12:05.433 回答
0

之前提出的替代方案是：

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});
于 2019-05-27T06:38:44.783 回答