form表单跟button冲突的解决方法（个人笔记）

最新推荐文章于 2022-06-15 16:53:52 发布
最新推荐文章于 2022-06-15 16:53:52 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itxiaolong3/article/details/79978915
版权

问题描述：当点击Button 的时候form表单自动提交了，但我没有触发到submit，为什么会自动提交呢？

问题解析：form表单的提交也是一种按钮事件，有点击才会触发对应的Submit。我们知道有点击事件的标签有Button和a，那么我们就在自己的程序中看看是不是这两个标签的默认事件导致了form表达的自动刷新了。

解决方法：如果是a 标签引起的就去除a的默认点击事件，如果是button引起的就在 button中加入type="button"


itxiaolong3
关注
专栏目录
Flutter学习笔记 Form表单
weixin_42215775的博客
09-19 949
Form表单需要设置一个全局类型的GlobalKey，通过这个key获取表单对象 GlobalKey<FormState> _formKey = new GlobalKey<FormState>(); //获取表单当前实例对象 _formKey.currentState; //重置表单内容 _formKey.currentState.reset(); //验证...
解决layui中的form表单与button的点击事件冲突问题
12-01
layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图： 蓝色底为form的位置，“重新搜索”为<button>标签的位置，此时，button标签的click事件无法响应。 必须将form的宽度减小，到不和button标签重合 如下图： 此时按钮正常响应click 以上这篇解决layui中的form表单与button的点击事件冲突问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
layui 解决form表单点击无反应的问题
10-16
今天小编就为大家分享一篇layui 解决form表单点击无反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Form表单中出现多个Button冲突的问题。
清欢
02-27 1207
Form表单Q中出现多个Button但是Button失效的问题 在这两种情况下，点击登录button是不会有反应的,正确代码应该如下： 注册 登陆
ASP.NET笔记之页面跳转、调试、form表单、viewstate、cookie的使用说明
01-20
在这个笔记中，我们将探讨几个关键概念，包括页面跳转、调试方法、表单处理、ViewState管理以及Cookie的使用。 1. **页面跳转**： - **服务器传输（Server.Transfer）**：此方法用于在服务器端进行页面跳转，它...
HTML学习笔记（五）——表单
01-08
<input type="button" value="普通按钮"> 图片按钮"> ``` 单选按钮（`<input type="radio">`）和复选框（`<input type="checkbox">`）用于提供多个选项让用户选择。单选按钮在同一组内只能选一个，而复选框可选多个...
form表单内子元素组件按钮button事件冲突 - Vue
survivorsfyh的博客
11-24 1660
Vant 组件在调用 form 的时候遇到了子组件按钮 button 嵌套导致表单提交的按钮事件与表单内子元素按钮组件事件冲突的情况; form表单的button按钮事件与子组件的按钮方法事件并不是相同方法,但是表单中子组件button的点击事件触发后会联代form提交表单的事件一并执行,一来二去的尝试发现了一些奥妙; 解决办法 仔细观察会发现表单中的 button 按钮会有一个 native-type="submit" 的属性; 表单中的子元素 button 组件虽然没有配置该属性,但默认也会享有该属
阻止 form 表单 input 回车触发 button 按钮 click 事件
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
06-15 2294
如上代码，在 input 输入框中按下回车键会自动触发 Action 事件，这就会影响业务流程，也算是个bug，但这是为什么呢？方法1：给 button 加 type 类型 方法2：给 input 加阻止回车鼠标事件 相关链接 vue 阻止事件冒泡，捕获方法 阻止 form input 输入框按回车自动提交表单...
表单提交与按钮点击事件冲突
weixin_42214752的博客
07-30 4552
问题出现的原因：在提交表单的时候经常会需要判断表单内的内容是否合法，这时候就需要处理提交按钮点击事件与表单action属性的关系， 问题体现：无论表单内的内容是否合法，都会跳转到action绑定的地址。 解决办法： 一：用form表单的onsubmit方法添进行调用，不再使用按钮绑定事件。在表单进行提交时会先执行onsubmit()方法，然后根据返回值判断是否提交，只有在返回值为false的...
Layui数据表格的行按钮点击事件和行点击事件冲突（已解决）
热门推荐
Ambitiouss的博客
02-28 2万+
遇到问题过程 这个冲突是这样发生的: 用layui的数据表格，点击行里面的按钮就会冲突触发到行事件…导致我的按钮没有按到。我怀疑就是没有用它的layer.open({})方法,（ps：他的layer.open()里面肯定用了阻止事件冒泡）,但是呢，我又不能阻止事件冒泡！ 原因是这样： 点击行按钮会去触发数据表格的tool工具监听，但是紧接着会触发 row点击事件，还会去触发 checkbo...
关于 Ajax 与 form 表单提交冲突的问题
Cream_Bule的博客
08-25 773
Ajax 与 form 表单在提交数据的过程中，若 form 表单指定了数据提交方式或使用 sumbit 按钮提交数据，则会与 Ajax 发生冲突，导致后端无法获取用户输入数据，进而无法返回正确结果 解决方案 1、删除 form 表单 method 参数 2、将 Submit 按钮 – <input type="button" class="btn btn-success" id="btn">Submit</submit>，修改为 – <input type="button"
form和button冲突
qq_40088443的博客
05-19 1015
在写代码过程中发现一个很奇怪的事情，点击登录按钮的时候，居然没有出发按钮对应的ajax,显示被cancel了。而且观察url地址栏，发现url后面莫名其妙多了&username=....&password=..... 查了一下才知道，当有form表单的时候，内部的调整按钮不要用button,因为button的提交也会出发form的提交，然后form表单的请求以get的形式，...
关于a标签提交表单，submit与onsubmit冲突的解决方案
KingTiger的博客
08-31 690
最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题，本来想在a标签中添加submit()进行表单的提交，然后在form中添加onsubmit事件触发验证方法。结果行不通，最后只能选择在java script中进行表单的提交。方案如下：   设置form头部如下：添加id是为了在java script脚本中进行中获取form对象 &lt;form method="p...
layui form表单下的button按钮会自动提交表单的问题以及解决方案
weixin_40460171的博客
05-06 4106
layui表单自动提交问题 最近使用layui的表单提交时，遇到了这个问题：在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题，很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧。 <form class="layui-form"> <label class="layui-form-label">银行卡号</label> <input type="text" name="bankCard" lay-veri
layui常用的表单标签_对layui中表单元素的使用详解
weixin_42160425的博客
02-17 552
首先不管是单选框还是复选框或者是下拉框，都要在你写的标签外面套一层div或者是form标签，如：这样写好了以后，你如果是写在静态页面，这样式可以看见效果，如果写在js里，这样写了还有一步得写，那就是var form = layui.form();form.render("select"); //更新全部这样写是外面套的是form标签，如果是div，就写layui.div();即可。对于下拉框的事件...
Layui表格开关按钮，点击表格开关按钮修改状态前后台代码记录
焦糖橙子
09-28 2554
Layui表格开关按钮，点击表格开关按钮修改数据前后台代码记录 在日常开发过程中，难免少不了一些状态的修改，而打开编辑页面，修改状态再去保存无疑增加的繁琐程度，一直有简单的解决办法，今天他就在这里，你用还是不用.hhhhh~ 如图，这是一个菜品分类的表格，控制每一条的状态可以决定该分类是否在前端页面进行展示，这是一个简单的栗子，实际开发过程中肯定不止于此，大家举一反三。 下面给小伙伴们看一下前后端代码实现，前端最重要的是如何获取该行的唯一标识作为后台修改的参数，往下看。 首先是前端，使用Layui的表格组
Bootstrap表单样式详解：form-control与布局控制
本篇笔记是关于Bootstrap学习系列中的第二部分，主要探讨CSS样式设计在Bootstrap中的应用。Bootstrap是一个流行的前端开发框架，它提供了丰富的预定义样式和组件，简化了网站设计和开发过程。这里重点关注的是表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

itxiaolong3

打赏可以，但别打我就行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值