关于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 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
js date 格式化
Feb 15 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
如何使用python代码操作git代码
2020/02/29 Python
详解Python yaml模块
2020/09/23 Python
Python常用断言函数实例汇总
2020/11/30 Python
Python-split()函数实例用法讲解
2020/12/18 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
应届毕业生求职信范例分享
2013/12/17 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
联村联户简报
2015/07/21 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电