关于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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php session的锁和并发
2016/01/22 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
详解JS函数重载
2014/12/04 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
在python中的socket模块使用代理实例
2014/05/29 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
《生命的药方》教学反思
2014/04/08 职场文书
体育教师求职信
2014/05/24 职场文书
企业法人代表任命书
2014/06/06 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
长江七号观后感
2015/06/11 职场文书
《绝招》教学反思
2016/02/20 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
Python借助with语句实现代码段只执行有限次
2022/03/23 Python