js 禁止重复submit
在前端开发中，防止表单重复提交是一个常见的需求，主要是为了避免用户在提交表单时由于网络延迟或误操作而多次点击提交按钮，导致数据重复插入或其他不必要的问题。
基本概念
防止重复提交的核心思想是在用户提交表单后，暂时禁用提交按钮，直到表单提交完成或失败后再恢复按钮的可用状态。
实现方式
可以通过以下几种方式实现：
1. 使用JavaScript禁用提交按钮
在用户点击提交按钮后，立即禁用该按钮，并在表单提交完成后重新启用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止重复提交</title>
</head>
<body>
<form id="myForm" action="/submit" method="post">
<input type="text" name="data" required>
<button type="submit" id="submitBtn">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var submitBtn = document.getElementById('submitBtn');
submitBtn.disabled = true; // 禁用提交按钮
submitBtn.innerText = '提交中...'; // 可选：更改按钮文本
// 表单提交完成后重新启用按钮
this.addEventListener('submit', function handler() {
this.removeEventListener('submit', handler);
setTimeout(function() {
submitBtn.disabled = false;
submitBtn.innerText = '提交';
}, 3000); // 假设3秒后完成提交
}, { once: true });
});
</script>
</body>
</html>2. 使用CSS和JavaScript结合
通过CSS改变按钮状态，并在JavaScript中控制按钮的可用性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止重复提交</title>
<style>
.disabled {
pointer-events: none;
opacity: 0.6;
}
</style>
</head>
<body>
<form id="myForm" action="/submit" method="post">
<input type="text" name="data" required>
<button type="submit" id="submitBtn">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var submitBtn = document.getElementById('submitBtn');
submitBtn.classList.add('disabled'); // 添加禁用样式
submitBtn.disabled = true; // 禁用按钮
// 表单提交完成后移除禁用样式和状态
setTimeout(function() {
submitBtn.classList.remove('disabled');
submitBtn.disabled = false;
}, 3000); // 假设3秒后完成提交
});
</script>
</body>
</html>优势
- 用户体验：防止用户因误操作或网络延迟导致的重复提交，提升用户体验。
- 数据一致性：确保服务器端数据的一致性，避免重复数据插入。
应用场景
- 表单提交
- 文件上传
- 支付操作
注意事项
- 确保在表单提交完成后（无论成功或失败）都恢复按钮的可用状态。
- 考虑网络延迟和服务器响应时间，合理设置按钮恢复的时间。
通过上述方法，可以有效防止表单重复提交，提升应用的稳定性和用户体验。
相关·内容
1回答
在此之前，我有两个按钮，定义如下： <button type="submit" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="submit" class="button2" name="s
浏览 17提问于2019-01-25得票数 0
回答已采纳
2回答
正如HTML表单中所说，所有禁用的表单文件都将被禁止在表单提交时提交。 <input type="text" ng-disabled="true" name="foo"></form
浏览 4提问于2014-12-22得票数 2
我已经实现了recurly.js表单，但是在加载recurly.js时遇到了问题。cvv"></div> <button></form>
<script src="http
浏览 2提问于2016-07-05得票数 1
2回答
为此，我使用jQuery： jQuery('#subnewtopic').prop('method="post" id="subnewtopicform"> <input type
浏览 2提问于2015-01-07得票数 0
我使用jquery.form.js，并在头部使用以下内容来初始化联系人表单/脚本：$(document).ready(function(false; target: '#alert',
浏览 1提问于2011-07-26得票数 0
回答已采纳
event.data.caller if (valid == true){ } else{}
我的问题是，如果用户禁用了JS，就没有办法提交表单。我可以将按钮设为type="submit"，该按钮适用于禁用JS的用户，但是它将始终提交表单并跳过对启用JS的用户的验证。(验证将运行，但无论如何都会提交)。如果我将按
浏览 5提问于2010-01-24得票数 5
回答已采纳
我不希望我的页面上的一些div被Google跟踪，因为它们包含来自其他网站的重复内容，这是否有可能阻止那些div被‘禁止跟踪’？我看到了这样的情况：，但它为这个目的而建议JavaScript，我不能在我的例子中使用JS，而且那个问题是从2009年开始，我希望事情现在有所改变？
浏览 2提问于2013-06-02得票数 1
下午好或者至少在我的国家^_^e.preventDefault(); }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" @s
浏览 31提问于2020-05-25得票数 0
回答已采纳
5回答
如何使用JS提交表单
、、、
可能重复：
<!DOCTYPE html><head> <script="text/javascript">
function validate ()
浏览 6提问于2012-10-13得票数 1
回答已采纳
2回答
这就是我在CoffeeScript和jQuery中所写的： $(this).addClass('disabled')UPDATE：我尝试侦听pageshow事件并禁用提交按钮： console.log('pag
浏览 4提问于2013-06-10得票数 1
回答已采纳
我的Facebooker with Authlogic (使用authlogic_facebook_connect插件)的实现看起来一切正常，除了一件事。其他信息：
你知道为什么在授权Facebook之后，它不会在第一次点击时重定向吗？为设置了授权后UR
浏览 0提问于2010-08-04得票数 1
回答已采纳
/Search.js') == false){ }
return search(json) console.log(links);
因此，这导致我打开网站重复但这也导致我被禁止了IP。我该怎么做才能避开这一切？
浏览 3提问于2015-05-14得票数 1
回答已采纳
2回答
我需要做的是：
...in sql，以禁止两列之间的重复条目。所以，假设我有两列，'Parcel‘和'Year’。如何禁止重复输入Parcel = 1，Year =1和Parcel = 1，Year = 1？我需要这样做，同时仍然允许在每个列中存在重复，只是不允许
浏览 2提问于2011-07-12得票数 0
回答已采纳
我正在调试一个页面，它有一个jquery对话框，其中包含一个文本框和一个ok按钮。http://example.com?tex_box_id=text_entered_in_text_box我已经试过了所有的jquery代码，但是没有任何成功。我只能假设有人在某处安装了一个按键监听器，但我不知道是谁。我知道我可以通过阻止他们的运行来解决这个问题，但我仍然真的想弄清楚为什么会发生这种情况。
请注意，只有当您在文本框
浏览 0提问于2011-10-19得票数 1
回答已采纳
1回答
<div >
<a href="#" class="searchBtn" onclick="document.getElementById('searchGuides').submit
浏览 5提问于2015-05-13得票数 0
可能重复：
或者jquery可以获得http header？像这样的代码方法。js代码： var url = $('#url').val();html代码：
<input id="url" name="url" type="text"
浏览 1提问于2012-04-13得票数 1
回答已采纳
3回答
我快疯了。这个你好世故的例子怎么了？我只是试着用angularjs 1.5.5测试一些基本的东西。<div ng-app="myApp" ng-controller="Ctrl"> <span ng-repeat="label in test(1)">{{label}}</span> <span ng-repeat="label
浏览 4提问于2016-04-19得票数 5
回答已采纳
可能重复：
我在看一个演讲()，其中说，“为了继承而设计和文档，否则禁止它”。本文以Java为例，其中包含“final”关键字，用于禁止子类化。是否可以禁止Python中的子类？
浏览 5提问于2010-10-16得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
