防止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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
es6函数之尾调用优化实例分析
Apr 25 Javascript
写一个Vue loading 插件
Nov 09 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实现根据身份证获取精准年龄
2020/02/26 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
python中__call__方法示例分析
2014/10/11 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python requests指定出口ip的例子
2019/07/25 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python几种常用功能实现代码实例
2019/12/25 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
测试工程师职业规划书
2014/02/06 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
校运会班级霸气口号
2015/12/24 职场文书
晚会开幕词范文
2016/03/04 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电