你有没有用Ajax在你的网站上创建过一个表单，并看到有时同一个表单被一次又一次地提交？

在这篇文章中，我将向您展示一个非常简单的jQuery插件，它将通过在单击提交按钮时禁用提交按钮来防止重复的表单提交。

如何使用它:

1.下载插件并放置jquery.prevent-重复提交.jsjQuery之后的脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.prevent-duplicate-submit.js"></script>

2.将CSS类“prevent”添加到提交按钮中。

<form action="/path/to/endpoint/">

  <label for="exampleInputEmail1">Email address</label>
  <input type="email" id="exampleInputEmail1" aria-describedby="emailHelp">
  <div id="emailHelp">We'll never share your email with anyone else.</div>

  <label for="exampleInputPassword1">Password</label>
  <input type="password" id="exampleInputPassword1">

  <input type="checkbox" id="exampleCheck1">
  <label for="exampleCheck1">Check me out</label>

  <button type="submit" class="prevent">Submit</button>

</form>

3.在HTML表单上初始化插件并完成。

$(function(){
  $('form').disableDuplicateSubmit();
});

4.禁用时自定义提交按钮。

.prevent:disabled {
  background: #dddddd;
}

预览截图

jQuery防止重复表单提交