关于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 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
javaScript基础语法介绍
Feb 28 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
php结合js实现多条件组合查询
May 28 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
linux下安装php的memcached客户端
2014/08/03 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
初学JavaScript第二章
2008/09/30 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
python reduce 函数使用详解
2017/12/05 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
大学生求职自荐信
2013/12/12 职场文书
会计主管岗位职责
2014/01/03 职场文书
前处理班长职位说明书
2014/03/01 职场文书
环保倡议书50字
2014/05/15 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
R9700摩机记
2022/04/05 无线电
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
ubuntu下常用apt命令介绍
2022/06/05 Servers
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS