首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据

表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。...jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码。 [html] view plain copy print ?...设置三秒后提交按钮 显示 }) 附:其他的实现方法,也使用了js 第一种: [html] view plain copy...后台代码控制表单提交有一个好的办法就是使用session, 具体可以参考下面这篇博文: JavaWeb学习总结(十三)——使用Session防止表单重复提交 http://www.cnblogs.com...在页面中添加Token防止越权访问-也可做表单重复提交,使用的原理也是Token!

3.9K20

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

应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之前的重复点击; 这些都是没有意义的,重复的无效的操作...同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中,觉的防止js重复提交,比较好用的方法,在这里和大家分享一下。...一、setTimeout + clearTimeout(节流函数)   本文提供两种实现方式:普通节流函数和闭包节流函数 二、设定flag/js加锁 三、通过disable 四、添加浮层比如loading...图层防止多次点击 具体实现 一、setTimeout + clearTimeout(节流函数) 方式一:闭包节流函数(可传递多个参数) /** * 闭包节流函数方法(可传参数) * @param Function...,建议使用闭包,如果是表单提交,适度使用后两种比较稳妥。

8.6K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之前的重复点击; 这些都是没有意义的,重复的无效的操作...同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中,觉的防止js重复提交,比较好用的方法,在这里和大家分享一下。...一、setTimeout + clearTimeout(节流函数)   本文提供两种实现方式:普通节流函数和闭包节流函数 二、设定flag/js加锁 三、通过disable 四、添加浮层比如loading...图层防止多次点击 具体实现 一、setTimeout + clearTimeout(节流函数) 方式一:闭包节流函数(可传递多个参数) /** * 闭包节流函数方法(可传参数) * @param Function...,建议使用闭包,如果是表单提交,适度使用后两种比较稳妥。

    4.7K120

    JS框架榜单官方结果令人惊讶!感谢大佬凌晨3给 Strve.js 提交的PR!

    作为开发人员,这一我很佩服!就在早晨,作者还特意给我回了消息,“Chrome 115发布了” !真是太有心了!...贡献 Strve.js 登上JS框架的榜单之后,我也发布了一篇文章,反响挺不错的,收到了很多朋友们的赞和鼓励。在这里,非常感谢大家长期以来对我的支持!...你创建的程序令人兴奋,所以我阅读并探索了你的代码和提交历史,直到接近 3.00。我相信通过你的代码我能理解你的大部分想法。如果你允许的话,我愿意成为你的伙伴。该程序正在开发中。它具有更大的优化潜力。...尤其是第二条,大佬居然阅读代码接近 3,当时我看时间也相近,确实没有错。非常感谢这位大佬对 Strve.js 的贡献,也希望我们国内社区能有越来越多这样的大佬。...如果大家觉得 Strve.js 不错,麻烦帮我下 Star 吧!

    28330

    readonly 和 disable的区别

    button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。...(回车是默认的submit触发按键) 我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复提交按钮导致数据冗余地存入数据库...disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的: 如果一个输入项的...disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一是当提交表单时,这个表单输入项将不会被提交。...而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交

    1.4K40

    JSP 防止网页刷新重复提交数据

    网页如何防止刷新重复提交与如何防止后退的解决方法 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,按F5刷新怎么办?...或者“怎样才能防止用户点击后退按钮返回以前浏览过的页面?” 遗憾的是,我们无法禁用浏览器的后退按钮。...防止网页后退--新开窗口 用window.open弹出表单页面,提交后关闭该页;处理提交的ASP页也是用弹出,设定表单的target,提交时window.open("XXX.asp","_blank..."),然后用JS提交表单,完成后window.close(); 简单的说,就是提交表单的时候弹出新窗口,关闭本窗口。...参考推荐: 网页如何防止刷新重复提交与如何防止后退的解决方法

    11.5K20

    uniapp 中的交互反馈 API【提示框】

    前言 ---- uniapp 交互反馈文档: https://uniapp.dcloud.net.cn/api/ui/prompt.html 消息提示 是项目中不可缺少一个功能,比如: 表单提交成功后的提示...参数 类型 必填 说明 title string 是 提示的内容,可显示的长度和 icon 取值有关 icon string 否 提示框的图标,可取值详见下方说明 mask boolean 否 是否防止触摸穿透...否 提示框的显示时间,单位毫秒,默认 1500 最简单的用法: uni.showToast({ title: '操作成功' }) 常用的参数选项: uni.showToast({ title: '提交成功...,也可以同时有确认和取消按钮,类似于一个 API 中整合了 js 中的 alert、confirm uni.showModal({ title: '确认删除吗?'...js 的 confirm 弹窗 uni.showModal({ title: '确认删除吗?'

    2.4K20

    php防止表单重复提交实例讲解

    在公司后台做表单提交,一是自己员工用,二是 html 自己来写的,没有验证表单重复提交,结果出错了。写出来记录下以便提醒自己,时刻不能疏忽。 解决方法 其实方法有很多种,只举例几个简单的来说说。...框架 很多框架都有防止重复提交的功能,大家应该都有了解,这里不再赘述。 前端 原理很简单,用户点击提交之后,使用 JS提交按钮置灰即可。...后端 也就是使用 PHP 进行验证,当然不局限以下几种 Cookie 用户提交表单到后端,在 Cookie 中做标记,指定时间内重复提交无效。但是用户禁用 Cookie 这个方法就失效了。 <?...第一次提交的时候,对比成功删除 Session 中的值。 <?php if (!isset($_SESSION['formFlag']) || $_POST['formFlag'] !...= $_SESSION['formFlag']) { exit('error'); } // 处理数据 unset($_SESSION['formFlag']); 上面就是本次介绍PHP防止重复提交表单的全部内容

    2.6K20

    Ajax等待返回结果时,弹出一个友好的等待提示

    巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。...complete: function(){        // Handle the complete event       }       // ......   });   防止重复数据...在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库...要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态。..."application/json",       url: "/Home/Submit",       beforeSend: function () {           // 禁用按钮防止重复提交

    5K100

    Ajax等待返回结果时,弹出一个友好的等待提示

    巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。...    },       complete: function(){        // Handle the complete event       }       // ......   });   防止重复数据...在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加...要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态。.../json",       url: "/Home/Submit",       beforeSend: function () {           // 禁用按钮防止重复提交

    3.9K10

    如何在十分钟内创建一个Chrome 插件

    不知道你如何看待这一,但对我来说,我的手指动作通常比我的大脑快。为了预防可能的失误,我们将为 ChatGPT 构建一个 “molly-guard” 。...如果你在疑惑什么是 “molly-guard”,它最初是用来指一个放在按钮或开关上的盾牌,以防止意外激活。在我们的上下文中,它是一个数字守护者,确保我们不会过度分享信息。...如果我们试图向ChatGPT提交包含这些词的信息,扩展将立即启动,禁用提交按钮,并防止我们可能的疏忽。 什么是Google Chrome扩展?...version:一个到四个用分隔的整数,用于标识扩展的版本。 description:一个纯文本字符串(不包含 HTML,最多 132 个字符),用于描述扩展。...步骤4:添加样式 虽然我们扩展的核心功能是防止特定的提交行为,但让用户能立即识别出为什么他们的操作被阻止也非常重要。让我们添加一些样式,以提供视觉提示并增强用户体验。 下面是我们要使用的样式规则。

    61651

    Git 项目推荐 | javascript ajax 代理调用工具

    插件依赖: jQuery-1.7.1以上版本 bootstrap 3 的button.js插件 JDialog 插件消息弹出框 如果需要进行表单提交验证则需要引进 JForm.js 示例代码:..."callBefore":"function() {test(data);}", "callBack":"test(data);"}'>提交表单 //js $...类选择器,要执行ajax代理调用的所有a标签的class名称 callbackDelay int 在执行代理ajax以后的回调函数的延时,默认为1000(1秒) timeInterval int 每次点击按钮的时间间隔...,防止多次点击默认为1000毫秒 proxy属性说明: A标签的proxy属性是传递该次代理掉用的配置参数的,使用json数据格式,参数说明如下: method => 传送方法,默认为GET 方法....formId => 要提交的表单ID,如果method为POST则此处必须传入参数 callBefore => 在提交ajax请求之前调用的方法,这个函数必须先在外部定义,允许传入一个data参数,注意

    1.7K90

    JavaScript表单基础

    表单基础 表单在html中以标签元素展示,在js中它用HTMLFormElemnt类型表示。 介绍一下HTMLFormElement类型的属性和方法。...提交表单 只要有表单就肯定会有提交表单,提交表单的方法我们上面也有,就是submit方法。 一般我们都会写一个button按钮,给他设定type值为提交。 <form action="....,用户点击<em>提交</em>后其实是给服务器发送了表单,但是我们<em>防止</em>用户二次<em>提交</em>,会在<em>提交</em>后执行这个方法,阻止之后的<em>提交</em>。...还有一种方法就是直接禁用<em>提交</em><em>按钮</em>,给它设置一个disabled属性。 表单字段的公共属性 前面提到disabled属性,这个就是禁用。我们看一下表单里面都有什么公共属性。...对文件输入字段来说,这个属性是只读的,仅包含计算机上 表单字段的公共方法 就俩个哈哈 focus() 表示获取焦点 blur() 失去焦点 我们可以根据需求在<em>js</em>中操作这些内容,反正我感觉是挺好玩的

    1.1K20
    领券