关于layui表单中按钮自动提交的解决方法


Posted in Javascript onSeptember 09, 2019

layui表单中的按钮会自动提交,这是一个很麻烦的事情。

这几天项目中多次用到表单按钮,仔细研究了下,找到了解决方法:

1、如果不需要放在表单中的按钮,最好不要放在表单中,不在layui的form中的按钮就不会进行自动提交了;

2、放在表单中的按钮可以通过js中的回调函数里添加 return false制止。filter中的参数指的是按钮中的lay-filter属性中的值,这个可以自己随便设。

比如:

form.on('submit(filter)',function(data){
  ......
  return false;
});

但是,这里有一个很容易忽视的问题:如果按钮中没有添加lay-submit属性,layui的form.on的表单提交监听不到这个按钮,那么return false对提交的制止也就失效了。

3、还有一种方法,就是使用a标签做成的按钮来替代button。

````````````````````````````````````````````````````````````````````````````````

4、感谢评论区大佬的指正:

button的type设置为button就不会自动提交,默认是submit,此时就会自动提交。

以上这篇关于layui表单中按钮自动提交的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
js获取height和width的方法说明
Jan 06 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
layui原生表单验证的实例
Sep 09 #Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 #Javascript
layui插件表单验证提交触发提交的例子
Sep 09 #Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 #Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 #Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 #Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 #Javascript
You might like
理解php原理的opcodes(操作码)
2010/10/26 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python的Flask框架与数据库连接的教程
2015/04/20 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python numpy格式化打印的实例
2018/05/14 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
教师简历自我评价
2014/02/03 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript