关于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中的括号()用法小结
Apr 14 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
js倒计时显示实例
Dec 11 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
微信小程序实现点击页面出现文字
Sep 21 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
如何在PHP中进行身份认证
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Python深入学习之内存管理
2014/08/31 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
对python 自定义协议的方法详解
2019/02/13 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
几个人围成一圈的问题
2013/09/26 面试题
linux面试题参考答案(4)
2014/09/21 面试题
为什么需要版本控制?
2013/08/08 面试题
护理职业生涯规划书
2014/01/24 职场文书
鉴定评语大全
2014/05/05 职场文书
在校实习生求职信
2014/06/18 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js