防止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 添加和移除函数的通用方法
Oct 20 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
关于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警告错误信息的解决方法
2013/06/03 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python如何实现代码检查
2019/06/28 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
后进生评语大全
2015/01/04 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
老乡会致辞
2015/07/28 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL
python井字棋游戏实现人机对战
2022/04/28 Python
Redis唯一ID生成器的实现
2022/07/07 Redis
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python