开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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>

优势

用户体验：防止用户因误操作或网络延迟导致的重复提交，提升用户体验。
数据一致性：确保服务器端数据的一致性，避免重复数据插入。

应用场景

表单提交
文件上传
支付操作

注意事项

确保在表单提交完成后（无论成功或失败）都恢复按钮的可用状态。
考虑网络延迟和服务器响应时间，合理设置按钮恢复的时间。

通过上述方法，可以有效防止表单重复提交，提升应用的稳定性和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

form表单重复提交，type=“button”和type=“submit”区别

公司测试提了一个项目后台在IE浏览器下（360，firefox就没问题）出现数据重复的问题，调试了好久终于发现问题所在，也不知道是谁写的代码，醉醉的。。。。...js"> ...submit" name="submit" value="提交" onClick="submit()"> 执行完onClick，转到action。...这里就可以解释为什么上面会出现重复提交了，但是重复提交情况只会在IE浏览器中，firefox 和360就没有，猜想应该是对form提交进行了优化。...submit()"> 执行完onClick，跳转文件在 js文件里控制。

1.6K3 0

js禁止右键点击事件

——达·芬奇 js禁止右键点击事件触发代码 function click() { return false; } function click1() { if (event.button

14K1 0

js禁止右键菜单代码、禁止复制粘贴代码

禁止右键菜单代码、禁止复制粘贴代码 //屏蔽右键菜单 document.oncontextmenu

6.7K2 0

Knockout.Js官网学习（event绑定、submit绑定）

Details js...submit绑定 submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。 ...当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。...总共有两个元素一个是录入框，另一个是submit提交按钮在form上，你可以使用click绑定代替submit绑定。...不过submit可以handle其它的submit行为，比如在输入框里输入回车的时候可以提交表单。

2.6K1 0

js禁止浏览器后退按钮

js禁止浏览器后退按钮 1.js //禁止浏览器后退按钮 function BanBack(ele) { //禁止浏览器后退按钮 if (window.history && window.history.pushState

13.4K4 0

js禁止鼠标右键及F12禁止查看源代码等

在前端开发中，F12审查元素的情况下，大家都可以随机更改一部分页面的代码，注入恶意JS等等，这种情况避免也不难，虽然还能看到一部分H5源码，但是无法修改。 ?

4.6K3 0

JS判断重复数组是否有重复项

大家好，今天我们来讲一下，如何使用javascript判断一个数组之中，是否有相同重复的元素。...数组也是一样，要判断一个数组中是否有重复的元素，最简单，最直观的方法，就是把数组复制一份，然后用复制的数组中的每一项，和原数组逐个比较一遍，如何有任一个相同，就返回true，否则就返回false。...arr[1]的值是3，就等于是 '1,"",4,5,2'.indexOf(3)，当然返回还是-1，没找到，以此类推一直到arr数组的最后一个就这样整个数组的循环一遍，其中任何一个 >-1，就是有重复...，否则就是没有重复。...今天这个例子，它的功能很有限的，只能判断是否有重复，只能返回true或是false，下次我们讲一个稍稍复杂一点的

7.4K9 0

Fabric.js 禁止元素超出画布

本文简介点赞 + 关注 + 收藏 = 学会了本文主要讲解如何禁止元素超出画布范围。效果如下图所示。就算是修改了元素尺寸也一样可以限制元素超出画布。

4.2K3 0

JS阻止表单submit提交（在提交之前做验证及判断）

在工作中遇到表单提交之前，需要验证用户输入的是否为空，之前使用ajax做提交，在js里面直接做判断，如果用户输入为空则弹出提示框（起初默认是隐藏的，非alert弹出框），让用户重新输入，当输入框获取焦点的时候...class="form-control endTimewater" id="exampleInputEmail2" name="end_time"> submit..." class="btn btn-info btn-search" id="submit">提交 js...参考文章：阻止表单submit提交（在提交之前做验证及判断） https://blog.csdn.net/weixin_40933787/article/details/80110207

13.7K2 0

控制台禁用js_禁止直接访问js

主要为了通过禁止打开控制台，防止别人进行代码调试。...1、禁止右键查看源码和F12 //禁止F12键盘事件 document.addEventListener('keydown', function(event){ return 123 !...//或执行一段死循环 window.open("about:blank", "_self"); } console.log('', devtools); 激活成功教程：可通过标签注入js...除了使用console.log，我们还可以使用console.info，console.dir和console.error等等，需要注意的是ie不支持console.table 激活成功教程：通过标签注入js...this.observerF() : this.observer(); } } ConsoleManager.init() 激活成功教程：通过标签注入js代码清空控制台、取消console.log

9.8K2 0

JS 这次真的可以禁止常量修改了！🥊

在 JS 中，常量是不可改变的。这个 “不可改变” 指的是常量存放的内存地址不变。众所周知，使用 const 定义的常量，如果是基础类型的数据，值不能变。...JS 的基础类型数据存在栈内存里；引用类型数据存在堆内存里。但引用类型的数据，比如对象，对象的 key 是存到栈内存里，栈内存中存放了一个引用地址，这个引用地址指向存放在堆内存的值。

2.5K4 0

JS禁止鼠标右键、禁止全选、复制、粘贴的方法（所谓的防盗功能）

代码如下： //都能支持 document.oncontextmenu = function (e) { return false; } //禁止右键 //禁止选择网页中的文字...基本上IE浏览器就不能选中文字复制了 document.onselectstart = function () { return false; } //禁止鼠标拖动图片 document.ondragstart

4.6K6 0

JS禁止右键和F12查看

//禁止页面选择以及鼠标右键 document.οncοntextmenu=function(){return false;};

5.3K1 0

常用技巧之JS判断重复

再复制一个var b=[1,2,3]; 然后for循环，从0开始，当i=0的时候，把arr数组的第0个值，replace替换为""，然后用indexOf查找b数组的第[i]个值，如果>-1，就是有重复...，否则就是没有重复。...今天这个例子，只能判断是否有重复，只能返回true或是false 相关链接：常用技巧之JS去除重复项

4.1K5 0

js数组去除重复数据

} return hash; } 2、数组下标判断法与第一种方法类似，先遍历，然后判断当前数组的第i项在数组中第一次出现的位置是否与i相等，不是则说明重复...hash.push(arr[i]); } } return hash; } 3、排序后判断对数组进行排序后，将新数组的最后一个值与旧数组的当前值进行比较，如果相等说明重复...它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构。

5.6K4 0

常用技巧之JS去除重复项

这几天一直在更新一些排序啊，去重方面的内容，是因为这些说是技巧，其实都是JS的基本功，不管是新人，还是老鸟，都要加强加强再加强。...那今天我们就一起来学习下JS的去除重复项，说是一起学习，真的就是一起学习，我给你们讲，首先我得自己学会，，先上代码哈： function isCheckArr(arr){ var newArr...，，重复几次啊都简单。。...，push加入newArr 最后返回的就是没有重复项的新数组啦。。...怎么样，这个简单吧，就是个for循环，然后indexOf查找而已，，查看以下文章：常用技巧之JS判断数组中某元素出现次数常用技巧之JS判断重复

3K6 0

js算法之查找重复元素

思路：//如果第一个与后面的所有比有重复就push。...var arr2=[]; var d=0; for(var i=0;i<arr.length;i++) { //如果第一个与后面的所有比有重复就

2.3K2 0

JS合并数组对象中重复数据

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内...

4.9K3 0

js 简单对a标签限制重复点击下载

<a id="download_url" style="background: #66cc00" href="http://down.s" class="dow...

5.6K1 0

js节流函数和js防止重复提交的N种方法

应用情景经典使用情景：js的一些事件，比如：onresize、scroll、mousemove、mousehover等；还比如：手抖、手误、服务器没有响应之前的重复点击；这些都是没有意义的，重复的无效的操作...节流函数所谓的节流函数顾名思义，就是某个时刻限制函数的重复调用。同样节流函数也是为了解决函数重复提交的问题，而防止重复提交的方法，不止节流函数一种实现。...方法汇总本文整理了我在工作实践当中，觉的防止js重复提交，比较好用的方法，在这里和大家分享一下。...一、setTimeout + clearTimeout（节流函数）　　本文提供两种实现方式：普通节流函数和闭包节流函数二、设定flag/js加锁三、通过disable 四、添加浮层比如loading...二、设定flag/js加锁 var lock = false; jQuery("#submit").on('click', function () { if (lock) { return

8.6K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭