关于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 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php获取linux命令结果的实例
2017/03/13 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
详解http访问解析流程原理
2017/10/18 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python中@property的理解和使用示例
2019/06/11 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
搞笑的获奖感言
2014/08/16 职场文书
岳庙导游词
2015/02/04 职场文书
初中运动会前导词
2015/07/20 职场文书
小学新课改心得体会
2016/01/22 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书