防止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应用于login页面的问题及解决
Oct 17 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
javascript连续赋值问题
Jul 08 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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 ios推送(代码)
2013/07/01 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
javascript回到顶部特效
2016/07/30 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
kafka-python批量发送数据的实例
2018/12/27 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
学期研究性学习个人的自我评价
2014/01/09 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
建筑施工安全责任书
2014/07/24 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
学前班语言教学计划
2015/01/20 职场文书
蜗居观后感
2015/06/11 职场文书