html 重复提交表单,表单重复提交问题的三种解决思路

前端开发中接触的表单提交还是很多的，有时候如果不对提交事件进行处理的话会遇到重复多次提交。

最近开发遇到一个问题，找了挺久才找到原因解决-_-||，表单一直提交两次，以为是双击重复提交了，就在提交之后禁用提交按钮了，but...

再试还是提交了两次，结果是label包裹input，点击label提交的时候提交两次

经过这次，总结出几条表单重复提交问题查找方向，主要从几个方面来考虑：

第一：如果是点击submit类型的按钮提交表单，就要先看是否是表单的默认提交事件，如果是，禁用默认提交事件(event.preventDefault();)或者改用button类型按钮提交

$('#submit').click(function(e){

e.preventDefault()

})

第二：如果是点击按钮ajax提交，就要在提交之后禁用掉按钮，以免重复提交，这个在平时各种情况下的表单提交都考虑进去

禁用按钮，加disabled属性，或者加pointer-event:none属性

$('#submit').click(function(){

$.ajax(...)

$(this).attr('disabled,true) // 禁用按钮or

$(this).css('pointer-event','none') // 来禁用点击事件

})

第三：如果是点击选项提交，那么就要考虑label和input的关联问题了，点击label，事件冒泡，input也会触发一次提交

可以这样来处理

$('label').click(function(e) {if($(e.target).is('input')){ //点击label的时候，如果事件源是input,那么就把它禁用掉

return;

}

});

html 重复提交表单,表单重复提交问题的三种解决思路相关推荐

MapperException: 无法获取实体类xxxxx对应的表名! 三种解决方法，总有一款适合你。
MapperException: 无法获取实体类xxxxx对应的表名! 三种解决方法,总有一款适合你. 参考文章: (1)MapperException: 无法获取实体类xxxxx对应的表名! 三种解 ...
oracle数据迁移过程中，把表中数据导出为txt文件的三种方法
在数据迁过程中需求需要将oracle数据库数据导出程txt格式然后再导入db2库中,经查询实验汇总三种方法: 1.plsqldev 里面有一个选项可以把表以excel格式到时 2.使用spool sq ...
SPA优缺点、解决单页面应用的SEO困难问题以及三种网页渲染方式
SPA特点优点缺点总结 1. 单页Web应用(SPA - Single Page web Application) 也就是说只有一个HTML文件的Web应用, 我们就称之为单页Web应用, 就称之为S ...
java 文本域不可编辑_实现表单input文本框不可编辑的三种方法
问题有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表单的不可编辑功能. 实现方式 1.οnfοcus=t ...
hive表分区上传数据出现的一个问题及解决思路
hive表分区用load上传数据时, 出现了报错: Failed with exception MetaException(message:For direct MetaStore DB conne ...
避免重复运行py文件绘制海龟图报错的一种解决办法
文章目录 -问题描述: -通过按键释放事件响应来避免报错 -总结 -问题描述: 使用Python 3.7.6中的turtle库绘制海龟图,首次运行py文件,在弹窗上的海龟图成功绘制完后,点击弹窗右上角 ...
【重复提交表单】表单重复提交的三种情况，解决办法
引入看一个重复提交表单的例子 F12可以看到,请求体中的参数在刷新页面之后仍然保留,因此每一次刷新页面,都会把现有的请求体中的表单数据提交一次到服务器,而接收的页面还是insert.jsp,于是造成 ...
数据库——数据库表和表的操作
每日一讲 SQL语句 SQL语句分类 SQL书写规范数据库操作查看创建 MySQL字符集 ci大小写不敏感,cs大小写敏感, 在Linux下配置MySQL utf8与utf8mb4的区别数据库 ...
oracle多表联合查询更新,ORACLE 两表关联更新三种方式
不多说了,我们来做实验吧. 创建如下表数据 select * from t1 ; select * from t2; 现需求:参照T2表,修改T1表,修改条件为两表的fname列内容一致. 方式1,u ...

html 重复提交表单,表单重复提交问题的三种解决思路

html 重复提交表单,表单重复提交问题的三种解决思路相关推荐

最新文章

热门文章