在form表单中的button按钮

最新推荐文章于 2024-09-29 17:38:30 发布
最新推荐文章于 2024-09-29 17:38:30 发布
阅读量591 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J78807/article/details/127416651
版权
本文探讨了在HTML form表单中，button按钮的默认行为，即submit提交和reset重置。通过实验发现，问题并非由事件冒泡引起，而是需要使用preventDefault方法来阻止浏览器的默认操作。点击重置按钮后，发现reset事件正常触发，而submit事件未执行。文章详细解释了如何运用preventDefault防止表单的提交与重置行为。
摘要由CSDN通过智能技术生成

 button按钮在form表单中具有默认功能，提交（submit)和重置(reset)数据

解决方案

用preventDefault方法，取消浏览器对当前事件的默认行为。（最开始我其实以为是要用stopPropagation方法，组织事件冒泡—组织事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前结点上其他的事件监听函数—因为一开始我认为是button按钮产生了冒泡事件，让form表单提交和重置了，实验后才知道不是。）

7720039ab82741ffbce05503a7f3ff91.png

 bfcc34e2014347d9803a3e805fd6f9fd.png

 点击重置按钮后，发现reset重置事件发生但submit提交未发生

bebe4f23841e464dbbf3f2fdbe3119af.png

 

J78807
关注
form表单的两种提交方式，submit和button的用法
honey_Claire的专栏
06-13 63万+
1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。 方法一： 在jsp的前端页面的头部插入一个js方法：  function checkUser(){    var result = document.getElementById("userid").value;
微信小程序form表单中button按钮、input框样式修改
HuLuWa1997的博客
10-06 2587
<form catchsubmit="formSubmit" catchreset="formReset"> <view class="weui-cell__bd" style="margin: 30rpx 0"> <text class="label">学生姓名</text> <input class="weui-input" name="学生姓名" placeholder="请输入" pla..
JavaScript在form表单中使用button按钮实现submit提交方法
10-20
在form表单提交中，使用button来间接完成submit的提交更为灵活。接下来通过本文给大家介绍JavaScript在form表单中使用button按钮实现submit提交方法，需要的朋友参考下吧
form表单中的button自动刷新页面问题
leechoy
12-26 2255
form表单中的button自动刷新页面问题 form表单中如果存在button的话，有可能会出现一个问题：点击button，触发了页面的自动刷新事件。 原因是因为标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。 <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个。 1.在标签中添加属性type=“button”。 2
如何将form表单中button按钮，设计为点击按钮后，不触发提交事件
最新发布
weixin_47138801的博客
09-29 207
解决办法：在button元素标签后面添加button的类型，type="button",添加过后，button按钮就只是一个按钮，就不会触发提交操作了。在form表单中，总会出现触发提交事件，这是因为在form表单中button的默认类型是。，如果不明确button的type，那可能触发提交事件。
form表单的button
weixin_34138056的博客
01-21 173
今天用form表单做了一个查询列表的功能，但是点击button后页面整体刷新，很是郁闷，后来到网上看了看，是因为form中button类型默认时submit，后来改为type="button"解决，其实知识很基本，但是时间久了就忘记了，还是记下来吧，方便以后查看。 转载于:https://www.cnblogs.com/samsara-yx/p/10299494.html...
form中的button问题
qq_25302061的博客
10-15 1469
当一个form中需要用button实现除提交form外的功能时，需要给该button加上type=‘button’，否则默认为提交form。
form中的button类型及其作用
Eighteen Z
05-24 7661
form中的button类型及其作用 在form中的button与在form外的不同 在form内button的type如果不设置 默认为submit 这样就会有一个问题: 如果你的form中除了提交按钮还有别的按钮，例如你要选取一张别的图片，选取一个视频等，需要这个按钮去触发 同时，你的表单中设置了必填选项，那么如果该选项未填的情况下去选择图片，就会触发提交。 然后检测到有...
form表单里的button按钮
BeWorriedJava的博客
03-01 2068
最好不要在form表单里写button按钮，因为button标签的默认type是submit类型，会自动提交表单，button按钮自动跳转刷新。
解决layui中的form表单与button的点击事件冲突问题
12-01
然而，在实际使用中，有时会出现一些意料之外的问题，例如本文提到的 "layui 中的 form 表单与 button 的点击事件冲突问题"。 当 layui 的 form 表单元素与 button 元素位置重合时，可能会导致 button 的 click ...
layui中如果button按钮在form表单外面如何提交
oCaiWen的博客
02-27 3579
HTML部分： <div> <form class="layui-form" lay-filter="addForm" method="" action=""> <button class="submit disliay-n" lay-submit lay-filter="add">确定</button> </form> <...
通过button将form表单的数据提交到action层的实例
08-29
在我们的实例中，我们使用 Button 元素来提交 Form 表单数据，我们将 onclick 属性设置为一个 JavaScript 函数，该函数将 Form 表单数据提交到 Action 层。 知识点 2: 使用 Ajax 提交 Form 表单数据 在现代 Web ...
关于form表单中button的使用
weixin_42812634的博客
03-27 3169
如图中所示，form表单中存在button按钮，此时该如何写这个button呢？ 1、错误写法，点击时相当于直接提交表单； <button onclick="xx()">投影机参数</button> 2、正确写法一 <button type="button" onclick="xx()">投影机参数</button> 3、正确写法二 <i...
form表单中 button 、 input type="button" 、 input type="submit" 的区别
shijiujiu33的博客
10-18 3017
1.&amp;lt; button &amp;gt;与&amp;lt; input type=“button” &amp;gt;其中一个重要的区别就是： 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。 &amp;lt; button &amp;gt; 控件 与 &amp;lt; input type=“button” &amp;gt; 相比，提供了更为强大的功能和更丰富的
form表单里面 button标签自动提交表单的问题
java，docker，ai
04-20 1294
问题描述： 在form中，当有按钮时，点击按钮就会提交表单，即使不是submit类型也会提交，很奇怪。 解决办法。 1 将button标签这只上 type="button"的属性 即可解决问题 2 用 标签也可以解决问题
Form表单中的button按钮，默认会自动提交表单
zhou_1997的博客
01-02 3058
Form表单中的button按钮，默认会自动提交表单 在表单页面中，需要添加个其他功能按钮，不需要提交表单或刷新。 但表单内设置< input type=“button” >时，如果没有指定其type类型的时，默认为type=”submit”。那么将该input的button设置一个类型type=“button”，就可以啦。 而且表单提交的url为其action属性的值，如果没有设置a...
踩坑：form表单中button按钮，点击后提交表单
这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！
05-22 1139
我当时是在JSP中写的这段代码，我一直以为只是JSP的问题，然后又开始怀疑jQuery的问题，都没有解决。然后终于在网上找到了相关的文章。以下来自MDN的官网文档中的说明。
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
10-31
在一个网页表单(form)中，通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而，在某些特定情况下，我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个...
JavaScript获取按钮所在form表单id的方法
12-12
本文实例讲述了JavaScript获取按钮所在form表单id的方法。分享给大家供大家参考。具体如下： 这里使用javascript获取form表单按钮的id，可以通过下面的JS代码获取。 <!DOCTYPE html> <html> <body> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值