防止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 中的replace方法说明
Apr 13 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
js css自定义分页效果
Feb 24 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
vue的for循环使用方法
Feb 12 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 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数据缓存技术
2007/02/14 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
学习ExtJS form布局
2009/10/08 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python科学计算之NumPy入门教程
2017/01/15 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python读取各种文件数据方法解析
2018/12/29 Python
python3人脸识别的两种方法
2019/04/25 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
考试不及格的检讨书
2014/01/22 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
测试工程师职业规划书
2014/02/06 职场文书
3分钟演讲稿
2014/04/30 职场文书
2014年培训工作总结范文
2014/11/27 职场文书