使用button提交表单与防止用户重复提交

字节骑士
• 阅读 5367

之前同事写项目都是用a标签或者div作为按钮,当时没有细问是为什么?直到昨天自己遇到了问题,现在还原下当时的情景。

(1)页面做好之后发现按钮可以多次提交,这显然是不行的,解决方法就是加个遮罩或者让按钮disabled,当时我的按钮标签使用的是divdivdisabled属性是不起作用的,于是我就把div标签改为了button标签,移动端测试没有问题,皆大欢喜。

(2)部署的时候发现点击按钮没有发送请求,获取的表单参数都跑到了地址栏上,部署前就改过这一个地方,于是把button改为div标签就可以了,之前移动端没有出问题估计是缓存的问题,之后使用button测试也是无法提交,当时自己的代码是这样的:

<form>
<button>提交<button>
</form>

查了下w3c,上面是这样说的:

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

form标签中没有action,没有method,而按钮默认是submit,点击按钮就把参数发到了地址栏(自己做了个测试,只要form内的表单带有name值,点击submit按钮地址栏就会出现参数),把按钮type设置为button就可以正常发送请求了,提交之后我们就可以使用disabled属性限制用户重复提交数据。

总结
(1)使用div作为按钮,为了防止重复提交在按钮上面加个遮罩层
(2)使用button作为按钮,设置type='button',使用其自带的disabled属性限制重复提交

PS:submit类型的按钮为什么会把参数发到地址栏,有知道原理的希望可以评论下。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
PHP 表单
1、一个简单的HTML表单POSt方法包含两个输入字段和一个提交按钮<html<body<formaction"welcome.php"method"post"Name:<inputtype"text"name"name"<brEmail:<inputty
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
ASP.NET WebApi服务接口如何防止重复请求实现HTTP幂等性
一、背景描述与课程介绍明人不说暗话,跟着阿笨一起玩WebApi。在我们平时开发项目中可能会出现下面这些情况;1)、由于用户误操作,多次点击网页表单提交按钮。由于网速等原因造成页面卡顿,用户重复刷新提交页面。黑客或恶意用户使用postman等工具重复恶意提交表单(攻击网站)。这些情况都会导致表单重复提交,造成数据重复
Stella981 Stella981
3年前
HTML5新增input标签属性
一.inputtype属性1<formaction""2邮箱<inputtype"email"name""id""<inputtype"submit"value"提交"<br/<br/3手机号码<inputtype"tel"name
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(