防止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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
javascript 写类方式之二
Jul 05 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 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 error_log 函数的使用
2009/04/13 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
什么是python的函数体
2020/06/19 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
2014年公司植树节活动方案
2014/03/04 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android