form表单底下的button按钮点击自动提交恶心问题的解决

最新推荐文章于 2022-04-13 15:26:46 发布
最新推荐文章于 2022-04-13 15:26:46 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML与CSS

今天遇到一个很恶心的问题，form表单底下的button按钮标签 每次点击 都会将表单自动提交，根本就起不到一个按钮的作用了，郁闷半天，搜索半天，终于顿悟，下面上来解决办法。

1  经过测试 将button标签这只上 type="button"的属性 即可解决问题

2  用<input type="button">  标签也可以解决问题

岂不知这是浏览器的问题 还是html的问题....关于form表单底下 button自动提交表单的问题 - 一个java爱好者的博客 - 一个java爱好者的博客


到西伯利亚浪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript在form表单中使用button按钮实现submit提交方法
01-19
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的区别介绍  在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法： 使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaScript中实现具体，代码如下： <head> [removed] functio
解决layui中的form表单与button的点击事件冲突问题
12-01
layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图： 蓝色底为form的位置，“重新搜索”为<button>标签的位置，此时，button标签的click事件无法响应。 必须将form的宽度减小，到不和button标签重合 如下图： 此时按钮正常响应click 以上这篇解决layui中的form表单与button的点击事件冲突问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Form表单按回车自动提交表单的实现方法
11-28
1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=”text”/>按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法： (1) 添加一个<input type=’text’
layui form表单下的button按钮会自动提交表单的问题以及解决方案
weixin_40460171的博客
05-06 3969
layui表单自动提交问题 最近使用layui的表单提交时，遇到了这个问题：在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题，很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧。 <form class="layui-form"> <label class="layui-form-label">银行卡号</label> <input type="text" name="bankCard" lay-veri
点击button自动提交表单原因及解决方案
Gabriel576282253的专栏
04-01 895
分析 情景描述 有时候我们可能需要在表单中放置多个按钮，比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件，在单击响应事件中进行提交表单，这没有任何问题。点击取消按钮的时候，触发对应的单击响应事件，这个单击响应事件中主要处理关闭表单页面逻辑，所以会关闭页面，这也正常。但是！打开控制台监听请求会发现，它也会提交表单。 图示 关于途中三个按钮的代码片段 <!-- 新增...
form中button会自动提交的问题（实用，赞）
chelen_jak的专栏
11-13 1175
原文出处：https://blog.csdn.net/hani_wen/article/details/88413957 <form> ...... <button class='btn' (click)='handleClick'>选择</button> ...... </form> 当点击选择按钮butt...
关于form表单底下 button自动提交表单的问题
02-24 1916
今天遇到一个很恶心的问题，form表单底下的button按钮标签 每次点击 都会将表单自动提交，根本就起不到一个按钮的作用了，郁闷半天，搜索半天，终于顿悟，下面上来解决办法。 1  经过测试 将button标签这只上 type="button"的属性 即可解决问题 2  用  标签也可以解决问题 岂不知这是浏览器的问题 还是html的问题.... 原文章：http://bl
form表单下的button按钮会自动提交表单的问题
热门推荐
orichisonic的专栏
01-05 2万+
form表单下的按钮在没有指定type类型的时候，如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了。如： function validate(){ alert("test"); } 于是我大胆猜测应该是form下的button 按钮在没有明确的给出type类型时，会有一个默认值为：type=”submit”.  带着这种猜测于
form表单下button默认提交
navigatorOpera的博客
07-13 5709
关于button默认提交的深入理解
form表单下的button不设置type会自动提交表单
zhuocr的博客
03-02 1万+
有时html页面button点击会出现自动提交表单的情况。 后来查资料得知，form表单下的按钮在没有指定type类型的时候，button会有一个默认的type=”submit” 解决办法： 给button设置一个类型type="button"，这样button的类型就不是默认的submit了，就不会自动提交表单了。
Form表单中的button按钮，默认会自动提交表单
zhou_1997的博客
01-02 2841
Form表单中的button按钮，默认会自动提交表单 在表单页面中，需要添加个其他功能按钮，不需要提交表单或刷新。 但表单内设置< input type=“button” >时，如果没有指定其type类型的时，默认为type=”submit”。那么将该input的button设置一个类型type=“button”，就可以啦。 而且表单提交的url为其action属性的值，如果没有设置a...
关于jQuery中button标签自动提交form表单的问题
weixin_41899827的博客
05-20 2281
在form表单中,当我们将button标签作为事件源,使用jQuery对其绑定一个事件,来造作多选框的同步多选,反选,或者解析输入文本进而匹配相应选项设置时会发现,在点击button之后,结果会出现,但却一闪而过.这是为什么嘛呢?当我们将form表单的"Method" 属性设置为"get",在地址栏或者查看网页源代码(F12--js)我们会发现:form表单被提交了.但我们我们明明并没有设置任何提...
＜form＞表单中＜button＞自动提交的问题
m0_51512780的博客
04-13 594
最近想在<form>表单中，添加一个取消按钮，通过设置他的onclik来返回原来的界面，但是出现了一个很奇怪的现象，我点了这个取消的<button>却提交了，非常奇怪。一番搜索后，才发现原来是我没有指定<button>的type，而<button>的type如果不指定，那么默认就是submit。至此，解决办法就显而易见，指定<button>的type为button即可。 举例： 未指定type的<button>： ...
点击button自动提交表单
许诗宇的博客
12-29 6318
一个button在一个表单内，点击它直接会让表单提交 如一个&lt;button&gt;test&lt;/button&gt; 原因是button如果不设置它的type，它的type默认是submit，而button在表单会让它自动提交 所以要设置它的type="button"...
一个表单里，如果有<button>标签存在，它会自动提交表单
weixin_34393428的博客
03-29 129
可以用button代替input type=”submit”吗? 在ie下，&lt;button&gt;标记恐怕还存在几个不大不小的问题。 在一个表单里，如果有一个以上"submit"类型的&lt;button&gt;标签存在，在表单被提交时，不管你点击哪个&lt;button&gt;，所有&lt;button&gt;的值都会被post/get。&lt;button&gt;的缺省type属...
JS设置自动点击按钮
qq_41467799的博客
07-16 1万+
&lt;p&gt;&lt;input type="button" id="change" class="button" hidden value="x" style="width: 20px;height:20px;text-align: center;position: absolute;top: -3px;right: 15px;margin: 0;padding: 0;backgroun
spring MVC关闭自动提交事务改为手动提交
幽灵
04-15 5316
package com.wanrong.distribution.server.impl; import javax.annotation.Resource; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Aut...
layui form表单点击按钮提交数据
最新发布
07-14
以下是一个示例代码，演示如何在点击按钮时提交表单数据： HTML代码： ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名 请输入用户名" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值