form和button冲突

最新推荐文章于 2024-07-31 10:49:11 发布

吃葡萄要吐皮

最新推荐文章于 2024-07-31 10:49:11 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_40088443/article/details/90347147

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在写代码过程中发现一个很奇怪的事情，点击登录按钮的时候，居然没有出发按钮对应的ajax,显示被cancel了。而且观察url地址栏，发现url后面莫名其妙多了&username=....&password=.....

查了一下才知道，当有form表单的时候，内部的调整按钮不要用button,因为button的提交也会出发form的提交，然后form表单的请求以get的形式，拦截掉了本身的button对应的ajax。所以更改的方法要是把button改为a标签。具体代码例子如下：

 <div class="form-group">
       //<button>立即登录</button>    
       <a href="../pages/login.html">立即登录</a>
 </div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吃葡萄要吐皮

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决layui中的form表单与button的点击事件冲突问题

12-01

layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图：蓝色底为form的位置，“重新搜索”为<button>标签的位置，此时，button标签的click事件无法响应。必须将form的宽度减小，到不和button标签重合如下图：此时按钮正常响应click 以上这篇解决layui中的form表单与button的点击事件冲突问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

关于asp.net button按钮的OnClick和OnClientClick事件

01-21

为了避免这样的错误，可以考虑用服务端验证这样就省去了OnClientClick事件，就不用考虑和OnClick的冲突了。您可能感兴趣的文章:asp.net下linkbutton的前后台使用方法asp.net button 绑定多个参数js触发asp.net的B

参与评论您还未登录，请先登录后发表或查看评论

button 与 form表单问题

qq_37596695的博客

04-16

596

button 这样的写法在部分浏览器中有默认的submit属性，表面看是button但是一样会提交表单，一次养成良好习惯，button和input都要写上类型。

学习使用在form表单内设置button按钮不提交

最新发布

徊忆羽菲

07-31

470

要使form内的button不提交表单，可以在button元素上使用type="button"属性。这样，点击按钮时，不会触发表单的提交行为。

form表单的button

weixin_34138056的博客

01-21

169

今天用form表单做了一个查询列表的功能，但是点击button后页面整体刷新，很是郁闷，后来到网上看了看，是因为form中button类型默认时submit，后来改为type="button"解决，其实知识很基本，但是时间久了就忘记了，还是记下来吧，方便以后查看。转载于:https://www.cnblogs.com/samsara-yx/p/10299494.html...

form表单中 button 、 input type="button" 、 input type="submit" 的区别

shijiujiu33的博客

10-18

2999

1.&lt; button &gt;与&lt; input type=“button” &gt;其中一个重要的区别就是：在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。 &lt; button &gt; 控件与 &lt; input type=“button” &gt; 相比，提供了更为强大的功能和更丰富的

form标签和其内部的button标签的关系

豆之助

06-28

1085

form 标签中有button标签时，点击button会触发form的提交表单动作，哪怕form标签什么都没定义

js函数名与form表单元素同名冲突的问题

10-26

在Web开发中，为了避免JavaScript函数名和form表单元素id同名导致的冲突问题，推荐开发者在编写代码时遵循良好的命名习惯和规范，例如使用命名空间、前缀或后缀区分标识符，或使用闭包封装等方法来确保代码的健壮性...

使用jQuery时Form表单元素ID和name命名大忌

10-26

这种命名方式在JavaScript和jQuery中可能会引起冲突，因为"nodeName"是DOM元素的一个属性，它表示当前节点的名称。当在JavaScript代码中尝试访问具有该name属性的表单元素时，浏览器可能会将"nodeName"误解为对DOM...

关于<button><form>标签的正确使用

jianleking的专栏

11-18

2776

1.背景最近因为自己过失，遇到一个坑，问题不大自己折腾了很久。记录一下，代码如下： <form action='' id='userForm'> <input type='text' data-name='username' value='tom'/> <input type='password' data-name='password' value='1234

小白编程笔记——HTML中form，button，和Javascript操作的注意事项

Takumu的博客

07-19

250

编程的过程中可能会需要通过HTML上的button来实现表单的提交。我之前习惯是在表单tag中写button，然后在button的回调函数中实现form的提交，但是这个方式是存在一定的小问题的。比如说，如果我需要给回调函数增加一个确认，如果没有得到确认就不再执行form的提交，例如 if(!confrim("是否确认提交？")) return; 此时，我希望实现的是通过return来终止form的提交，但是如果这个button是写在form tag中的话，即使使用了return，form表单仍然会进行

form和button标签的几个注意事项

Mia_shaungchen的博客

06-08

474

1. 请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 2.form标签必须制定action属性，当form中包含提交按钮时，也就是类型为submit的button按钮或者input按钮，如果不指定action属性则会将表单数据提交给当前页面，相当于刷新页面，如果不想提交到

一个关于form标签和button标签的小坑

xiaoyao9524的博客

01-15

650

如果在form标签中嵌套了button标签，那么点击button时会自动提交form。 <form id="testForm" action="/test" method="POST"> <input id="testInp" size="50" placeholder="请输入内容"/> <butt

关于button和form提交的一些问题

anq46684的博客

06-22

166

1.form 中type 为submit 和button的区别 submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。或者在使用submi...

form表单里的button按钮

BeWorriedJava的博客

03-01

2054

最好不要在form表单里写button按钮，因为button标签的默认type是submit类型，会自动提交表单，button按钮自动跳转刷新。

ajax阻止表单提交时，form的提交按钮最好不要用button按钮

柒君的博客

07-26

370

使用jQuery的ajax做表单提交时，form的提交按钮最好不要用button。可以用div，模仿一个提交按钮用button可能会产生浏览器默认行为的，会造成，跳过ajax校验，直接提交 jquery的ajax中的dataType字段，是给ajax自己看的，不是给服务器看的。这是规定ajax应该以什么方式解析服务器返回的数据。如果你不写这个值，那么ajax就默认的根据http包的mime信息来智能判断数据类型，来操作服务器的responseText。前后端应该约定好，以什么格式进行交换数据。例

Form表单中的button按钮，默认会自动提交表单

zhou_1997的博客

01-02

3029

Form表单中的button按钮，默认会自动提交表单在表单页面中，需要添加个其他功能按钮，不需要提交表单或刷新。但表单内设置< input type=“button” >时，如果没有指定其type类型的时，默认为type=”submit”。那么将该input的button设置一个类型type=“button”，就可以啦。而且表单提交的url为其action属性的值，如果没有设置a...

在form表单中的button按钮

J78807的博客

10-19

579

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

踩坑：form表单中button按钮，点击后提交表单

这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！

05-22

1103

我当时是在JSP中写的这段代码，我一直以为只是JSP的问题，然后又开始怀疑jQuery的问题，都没有解决。然后终于在网上找到了相关的文章。以下来自MDN的官网文档中的说明。

Oracle Form开发错误处理与技巧

1. 所有Before-Block、After-Block、Before-Record、After-Record、When-Button-Pressed等触发器都有其特定的执行顺序和上下文。理解这些触发器的工作原理和相互影响对于编写高效无冲突的代码至关重要。 2. 触发器...