防止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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 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实现Mysql读写分离
2013/06/28 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python实现的桶排序算法示例
2017/11/29 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python自动识别文本编码格式代码
2019/12/26 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python文件操作基础流程解析
2020/03/19 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
详解python polyscope库的安装和例程
2020/11/13 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
先进集体申报材料
2014/12/25 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书