防止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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
Jquery性能优化详解
May 15 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 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
PHP中Session可能会引起并发问题
2015/06/26 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
Vue.use源码分析
2017/04/22 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python线程中同步锁详解
2018/04/27 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
化学实验员岗位职责
2013/12/28 职场文书
校园活动策划书范文
2014/01/10 职场文书
七年级作文之冬景
2019/11/07 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技