防止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中封装window.open解决不兼容问题
Sep 28 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
jQuery使用手册之一
2007/03/24 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python版大富翁源代码分享
2018/11/19 Python
详解python深浅拷贝区别
2019/06/24 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
2014年老干部工作总结
2014/11/21 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
辩护意见书
2015/06/04 职场文书
雷锋的故事观后感
2015/06/10 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Go语言入门exec的基本使用
2022/05/20 Golang
Python中的 No Module named ***问题及解决
2022/07/23 Python