防止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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 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脚本的10个技巧(5)
2006/10/09 PHP
学习php笔记 字符串处理
2010/10/19 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
php判断当前操作系统类型
2015/10/28 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python 为什么说eval要慎用
2019/03/26 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Django中多种重定向方法使用详解
2019/07/17 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
药品质量检测应届生求职信
2013/11/14 职场文书
小学生倡议书范文
2014/05/13 职场文书
研修心得体会
2014/09/04 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python