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

最新推荐文章于 2022-06-15 16:53:52 发布
原创 最新推荐文章于 2022-06-15 16:53:52 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在未触发提交的情况下，form表单自动提交的原因，并提供了具体的排查步骤及解决方案，包括检查Button和a标签的默认行为。

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

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

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


layui按钮开关checkbox使用细节
the_love的博客
05-06 5995
layui按钮开关-checkbox摘要checkbox按钮使用 摘要 为啥要写摘要,其实我在使用layui的时候踩了很多坑,包括布局、表格、表单元素、提交的token问题 很让我心态炸裂,但是今天我在逛论坛的时候发现一个未被解决的问题,是我才解决没多久的,所以心情舒畅,就水了这么多字 checkbox按钮使用 直接先链接和图 按钮是表单中的元素,所以我们去找一些比较好看平滑的元素可以到表单中看看...
微信小程序开发笔记之”表单读不出数据“解决指南
最新发布
qq_46396470的博客
07-12 594
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
解决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 1366
Form表单Q中出现多个Button但是Button失效的问题 在这两种情况下，点击登录button是不会有反应的,正确代码应该如下： 注册 登陆
ASP.NET笔记之页面跳转、调试、form表单、viewstate、cookie的使用说明
01-20
在这个笔记中，我们将探讨几个关键概念，包括页面跳转、调试方法、表单处理、ViewState管理以及Cookie的使用。 1. **页面跳转**： - **服务器传输（Server.Transfer）**：此方法用于在服务器端进行页面跳转，它...
整理关于Bootstrap表单的慕课笔记
12-12
整理自慕课笔记 基础表单 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。...
HTML学习笔记（五）——表单
01-08
<input type="button" value="普通按钮"> 图片按钮"> ``` 单选按钮（`<input type="radio">`）和复选框（`<input type="checkbox">`）用于提供多个选项让用户选择。单选按钮在同一组内只能选一个，而复选框可选多个...
Flutter学习笔记 Form表单
weixin_42215775的博客
09-19 1030
Form表单需要设置一个全局类型的GlobalKey，通过这个key获取表单对象 GlobalKey<FormState> _formKey = new GlobalKey<FormState>(); //获取表单当前实例对象 _formKey.currentState; //重置表单内容 _formKey.currentState.reset(); //验证...
form表单内子元素组件按钮button事件冲突 - Vue
survivorsfyh的博客
11-24 1795
Vant 组件在调用 form 的时候遇到了子组件按钮 button 嵌套导致表单提交的按钮事件与表单内子元素按钮组件事件冲突的情况; form表单的button按钮事件与子组件的按钮方法事件并不是相同方法,但是表单中子组件button的点击事件触发后会联代form提交表单的事件一并执行,一来二去的尝试发现了一些奥妙; 解决办法 仔细观察会发现表单中的 button 按钮会有一个 native-type="submit" 的属性; 表单中的子元素 button 组件虽然没有配置该属性,但默认也会享有该属
阻止 form 表单 input 回车触发 button 按钮 click 事件
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
06-15 2460
如上代码，在 input 输入框中按下回车键会自动触发 Action 事件，这就会影响业务流程，也算是个bug，但这是为什么呢？方法1：给 button 加 type 类型 方法2：给 input 加阻止回车鼠标事件 相关链接 vue 阻止事件冒泡，捕获方法 阻止 form input 输入框按回车自动提交表单...
表单提交与按钮点击事件冲突
weixin_42214752的博客
07-30 4642
问题出现的原因：在提交表单的时候经常会需要判断表单内的内容是否合法，这时候就需要处理提交按钮点击事件与表单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 880
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 1063
在写代码过程中发现一个很奇怪的事情，点击登录按钮的时候，居然没有出发按钮对应的ajax,显示被cancel了。而且观察url地址栏，发现url后面莫名其妙多了&username=....&password=..... 查了一下才知道，当有form表单的时候，内部的调整按钮不要用button,因为button的提交也会出发form的提交，然后form表单的请求以get的形式，...
关于a标签提交表单，submit与onsubmit冲突的解决方案
KingTiger的博客
08-31 747
最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题，本来想在a标签中添加submit()进行表单的提交，然后在form中添加onsubmit事件触发验证方法。结果行不通，最后只能选择在java script中进行表单的提交。方案如下：   设置form头部如下：添加id是为了在java script脚本中进行中获取form对象 &lt;form method="p...
layui form表单下的button按钮会自动提交表单的问题以及解决方案
weixin_40460171的博客
05-06 4255
layui表单自动提交问题 最近使用layui的表单提交时，遇到了这个问题：在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题，很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧。 <form class="layui-form"> <label class="layui-form-label">银行卡号</label> <input type="text" name="bankCard" lay-veri
Bootstrap表单样式详解：form-control与布局控制
本篇笔记是关于Bootstrap学习系列中的第二部分，主要探讨CSS样式设计在Bootstrap中的应用。Bootstrap是一个流行的前端开发框架，它提供了丰富的预定义样式和组件，简化了网站设计和开发过程。这里重点关注的是表单...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

itxiaolong3

打赏可以，但别打我就行

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

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

打赏作者

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

抵扣说明：

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

余额充值