防止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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
js实现橱窗展示效果
Jan 11 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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中替换换行符的几种方法小结
2012/10/15 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
javascript编写简易计算器
2017/05/06 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python中的格式化输出用法总结
2016/07/28 Python
解析Python的缩进规则的使用
2019/01/16 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
年终总结会主持词
2014/03/25 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015年团支部工作总结
2015/04/03 职场文书
手机销售员岗位职责
2015/04/11 职场文书
Redis可视化客户端小结
2021/06/10 Redis
PyQt5实现多张图片显示并滚动
2021/06/11 Python