关于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圆形浮动菜单特效代码
Mar 03 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
JS实现音乐钢琴特效
Jan 06 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
php5 图片验证码实现代码
2009/12/11 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php简单实现快速排序的方法
2015/04/04 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python去掉行尾的换行符方法
2017/01/04 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python调用C语言的实现
2019/07/26 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
广告语设计及教案
2014/03/21 职场文书
刘公岛导游词
2015/02/05 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python