关于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 相关文章推荐
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
Bootstrap表单布局
Jul 19 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
Vue中jsx不完全应用指南小结
Nov 01 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
Vue制作Todo List网页
2017/04/26 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue中监听返回键问题
2019/08/28 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
教研活动总结
2014/04/28 职场文书
保研推荐信
2014/05/09 职场文书
驻村工作先进事迹
2014/08/14 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android