Javascript 如何防止表单从客户端多次提交？

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

如何防止这种情况发生？

<form onsubmit="if(submitted) return false; submitted = true; return true">

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

散列当前时间，使其成为表单上的隐藏输入。在服务器端，检查每个表单提交的哈希；如果您已经收到该散列，那么您将获得一个重复提交

---

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

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

使用JQuery可以执行以下操作：

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

&

---

下面是一个简单的方法：

<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>

一些输入：
var=false；
函数checkBeforeSubmit（）{
如果（！已提交）{
wassmitted=true；
已提交报税表；
}
返回false；
}    

在表单提交后，使用不引人注目的javascript禁用表单上的提交事件。下面是一个使用jQuery的示例

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

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

---

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

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

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

正如LLIMLIB所建议的那样，使用表单唯一的标识符生成表单，并将其放入隐藏的输入字段中。存储该标识符。接收表单数据时，仅当标识符匹配时才处理它。（还将标识符链接到用户会话并进行匹配，以获得额外的安全性。）数据处理后删除标识符

---

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

我知道你用“javascript”标记了你的问题，但这里有一个根本不依赖javascript的解决方案：

---

这是一个名为PRG的webapp模式，下面是一个在客户端描述它的模式

，一旦表单使用javascript代码提交，您应该禁用submit按钮，就像@vanstee和@chaos提供的方法一样

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

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

您可以尝试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;
    }
})

---

您可以通过以下方式防止多次提交：

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;

});

我尝试使用asp mvc 3进行不引人注目的验证，如果客户端验证失败，代码仍将运行，表单提交将永久禁用。更正字段后，我无法重新提交。（见比扬的评论）

所以我修改了vanstee的脚本如下：

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

---

防止多次提交的最佳方法是 只需在方法中传递按钮id

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

---

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

只需禁用表单提交按钮，如下代码所示

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

---

在第一次单击提交时，它将禁用提交按钮。另外，如果您有一些验证规则，那么它也可以正常工作。希望这会有帮助

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

$（'#禁用'）。在（'click'，function（）上{
$（'#disable'）.attr（“disabled”，true）；
});

让我失去能力最简单的解决方案是在单击时禁用按钮，在操作完成后启用它。要在JSFIDLE上检查类似的解决方案，请执行以下操作：

[click here][1]

你可以找到其他的解决办法
 这对我来说非常好。它提交农场并使按钮禁用，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);}

对我来说，最简单、最优雅的解决方案是：

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>

函数检查表单（表单）//单击提交按钮
{
form.myButton.disabled=true；
form.myButton.value=“请稍候…”；
返回true；
}
...

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

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


$（文档）.ready（函数（）{
$（“表格”）。提交（函数（）{
$（this）.submit（函数（）{
返回false；
});
返回true；
});     
}); 

它肯定会起作用。
只需添加可能的答案，而无需绕过浏览器输入验证

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

这允许每2秒提交一次。如果是正面验证。
<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

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

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});

<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>