防止Layui form表单重复提交的实现方法


Posted in Javascript onSeptember 10, 2019

在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是:

在<form>里面,加上 lay-filter="formConfig" , οnsubmit="return false" , 其中 “formConfig” 为自定义,然后在 提交的按钮事件内:

form.on("submit(formConfig)",function(data){
  return false;
 });

具体做法:

1、在form 里面:

<form class="layui-form" id="addform" name="addform" lay-filter="formConfig" method="post" action="" enctype="multipart/form-data" οnsubmit="return false" > 

   <button type="submit" class="btn btn-primary radius" id="btnSave" >提交</button>

2、在提交的按钮事件:

$(function(){
  $("#btnSave").click(function(){
     layui.use('form',function(){
        var form=layui.form;
        form.render();
        form.on("submit(formConfig)",function(data){
        return false;
        });
     });

     $.ajax({

       // to do......

     });

   });

以上这篇防止Layui form表单重复提交的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js原生appendChild的bug解决心得分享
Jul 01 Javascript
用console.table()调试javascript
Sep 04 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 #Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 #Javascript
解决layui弹框失效的问题
Sep 09 #Javascript
vue给对象动态添加属性和值的实例
Sep 09 #Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 #Javascript
layui原生表单验证的实例
Sep 09 #Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 #Javascript
You might like
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
javascript几个易错点记录
2014/11/26 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python实现图片彩色转化为素描
2019/01/15 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
水利水电专业自荐信
2014/07/08 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python