关于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 相关文章推荐
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
javascript数组排序汇总
Jul 07 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
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
第一个无线电台是由谁发明的
2021/03/01 无线电
4.与数据库的连接
2006/10/09 PHP
php文件上传简单实现方法
2015/01/24 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
js输出列表实现代码
2010/09/12 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
社区七一党员活动方案
2014/01/25 职场文书
优秀党员事迹材料
2014/12/18 职场文书
元宵节寄语大全
2015/02/27 职场文书
团队拓展训练感想
2015/08/07 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL