关于layui表单中按钮自动提交的解决方法

2024-09-28 12:07:00

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表单中按钮自动提交的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

解决Layui 表单提交数据为空的问题

坑的外观最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的. 今天踩了个坑,就是使用layui表单提交时,提交的数据为空. 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象. <form class="layui-form" action=""> <div class="layui-form-item"> <label cla
layui插件表单验证提交触发提交的例子

废话不多说,大家直接看代码吧!  <form class="layui-form" action="{:url('login/login')}" method="post"> <div class="logi_content"> <p class="tit">管理系统</p> <div clas
layui的表单提交以及验证和修改弹框的实例

HTML <div class="layui-form"> <input type="text" class="txt" name="newName" lay-verify="newName" lay-verType="tips" placeholder="请输入姓名"> <input type="text" clas
layui弹出层按钮提交iframe表单的方法

如下所示: layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 type: 2, title:'添加人员信息', area: ['600px','340px'], btn: ['保存','关闭'], yes: function(index, layero){ var inputForm = $(window.frames["layui-layer-iframe" + index].document).contents().find(&quo
关于layui表单中按钮自动提交的解决方法

layui表单中的按钮会自动提交,这是一个很麻烦的事情. 这几天项目中多次用到表单按钮,仔细研究了下,找到了解决方法: 1.如果不需要放在表单中的按钮,最好不要放在表单中,不在layui的form中的按钮就不会进行自动提交了: 2.放在表单中的按钮可以通过js中的回调函数里添加 return false制止.filter中的参数指的是按钮中的lay-filter属性中的值,这个可以自己随便设. 比如: form.on('submit(filter)',function(data){ ......
jQuery UI Dialog控件中的表单无法正常提交的解决方法

最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化
ThinkPHP提交表单时默认自动转义的解决方法

本文实例讲述了ThinkPHP提交表单时默认自动转义的解决方法.分享给大家供大家参考.具体方法如下: 一.问题: 在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不想给单引号和双引号加上反斜线. 在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不想给单引号和双引号加上反斜线,在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不
jQuery实现数秒后自动提交form的方法

本文实例讲述了jqury实现数秒后自动提交form的方法.分享给大家供大家参考.具体如下: 很多下载网站都设置了此代码,下载按钮数秒,数完后,可以点击提交制作很简单: 1. js部分代码如下: <script language='javascript'> <!-- $(document).ready(function(){ // #formDownload ajaxForm $('#formDownload').ajaxForm({ target:'#formDownloadWindo
YII2框架实现表单中上传单个文件的方法示例

本文实例讲述了YII2框架实现表单中上传单个文件的方法.分享给大家供大家参考,具体如下: 有些时候我们提交的表单中含有文件.怎么样让表单里的数据和文件一起提交. 我的数据表tb_user内容如下: CREATE TABLE `tb_user` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '用户ID', `name` varchar(32) DEFAULT '' COMMENT '用户名', `pwd` varchar(64) D
PostgreSQL更新表时时间戳不会自动更新的解决方法

PostgreSQL更新表时时间戳不会自动更新的解决方法,具体如下操作系统:CentOS7.3.1611_x64 PostgreSQL版本:9.6 问题描述 PostgreSQL执行Insert语句时,自动填入时间的功能可以在创建表时实现,但更新表时时间戳不会自动自动更新. 在mysql中可以在创建表时定义自动更新字段,比如 : create table ab ( id int, changetimestamp timestamp NOT NULL default CURRENT_TIMEST
Ajax提交表单页面刷新很快的解决方法

注:使用ajax 提交表单时 type类型最好不用submit 用button合适 <form> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <input type="button" class="btn btn-info" value="重置" onclick="return resetaa()">
按钮的Ajax请求时一次点击两次提交的解决方法

页面中的按钮的type是submit的: <input type="submit" value="Create" id="submit" /> ajax的请求,在JQuery中是: $(function () { $('#submit').click(function () { var createGenreForm = $('#createGenreForm'); if (createGenreForm.valid()) { var
jQuery实现批量判断表单中文本框非空的方法(2种方法)

本文实例讲述了jQuery实现批量判断表单中文本框非空的方法.分享给大家供大家参考,具体如下: 方法一: <script type="text/javascript"> /* * 批量验证表单非空 * 需要非空验证控件的样式class="mustadd" */ $(".mustadd").each(function(){ if($(this).val() == ''){ alert("该项不可为空!"); $(th
PHP+Session防止表单重复提交的解决方法

index.php 当前表单页面is_submit设为0 SESSION_START(); $_SESSION['is_submit'] = 0; <form id="reg" action="post.php" method="post"> <p>用户名:<input type="text" class="input" name="username" i

关于layui表单中按钮自动提交的解决方法

相关推荐

随机推荐