表单button按钮不绑定提交事件自动提交

最新推荐文章于 2023-07-21 16:11:54 发布

bulanche布兰奇

最新推荐文章于 2023-07-21 16:11:54 发布

阅读量816

点赞数 1

文章标签： html js

本文链接：https://blog.csdn.net/kapuqino/article/details/113770367

版权

表单button按钮不绑定提交事件自动提交

按钮自动提交表单问题

表单button按钮不绑定提交事件自动提交
前言
- 1.代码如下
- 2.原因解释以及解决方案

前言

在使用layui前端框架时，在form表单中添加了两个按钮，一个用来提交，一个绑定了下载事件，但是当我点击下载按钮时，竟然提交了。接下来我就讲讲是什么原因。

1.代码如下

<button id = "downStuff" class = "layui-btn layui-btn-xs">下载查看</button>

2.原因解释以及解决方案

1.button在没有添加type类型时，button的默认类型为submit，可以通过声明式添加type="button"防止表单提交

<button id = "downStuff" type = "button" class = "layui-btn layui-btn-xs">下载茶禅</button>

2.可以将button标签用a标签代替，代码如下

<a class="layui-btn layui-btn-xs">下载查看</a>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bulanche布兰奇

关注关注

1
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

layui表单模块提交无效

weixin_44724856的博客

07-16

977

button标签的type属性一定要放在最前！！今天用layui做了个表单，写完用layer.alert测试，发现提交无效，找了半天也没发现代码哪里有什么错误。最后和官方的示例代码比对，发现就是我写button按钮的地方不一样。开始我自己是这样写的 <button class="layui-btn" type="submit" layui-submit="" lay-filter="register">提交</button> 官方是这样写的 <button typ

html button 自动提交,html+js表单form验证自动提交的2种提交方式button和

weixin_35406812的博客

05-30

460

站长设计网页时用到大量的js代码，当然少不了js验证用户输入的合不合格式，格式对就通过验证，自动提交表单，格式不对就弹出错误对话框，重新输入表单。这种判断并提交表单的方法有2种：1、submit验证function checkUser(){var result = document.getElementById("userid").value;var password = document.get...

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

html按钮自动提交表单,HTML按钮不提交表单

weixin_35945980的博客

05-31

473

我有一个表格。在该表格之外，我有一个按钮。一个简单的按钮，如下所示：My Button不过，当我单击它时，它将提交表单。这是代码：My Button该按钮应该做的就是编写一些JavaScript。但是，即使看起来像上面的代码一样，它也会提交表单。当我将标签按钮更改为跨度时，它可以正常工作。但不幸的是，它必须是一个按钮。有什么方法可以阻止该按钮提交表单？像例如My Button#1楼...

点击表单中的button标签提交表单问题的解决办法

weixin_30951231的博客

12-21

321

介绍最近在公司写后台业务的时候发现，标签放到了表单中，点击这个button变成了提交，相当于。点击的话相当于请求了一次但是我们并不需要重新请求，我们需要将标签的请求取消解决办法在from表单中所在的button标签里面js fcuntion里return false，或者在onclick=“funtion();return false” 或...

form表单中的button按钮如何阻止提交

weixin_45386953的博客

03-27

1888

reset=表单复位当button的type属性值为button时，仅做为一个普通的按钮，并不会提交该表单，此时你可以通过js脚本来提交，而form中不需要加onsubmit事件。在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。原文链接：https://www.js1331.com/jiaocheng?、button有个type属性，属性值可为button、submit、reset。

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

12-01

在某些布局下，如果不注意调整，form 的宽度过大，可能会覆盖到 button，从而阻碍 click 事件的响应。解决这个问题的方法通常是调整 form 元素的宽度，确保它不会与 button 重叠。你可以通过 CSS 样式来修改 form ...

JavaScript给按钮绑定点击事件（onclick）的方法

10-24

比如，按钮默认的提交表单或跳转行为。这时，可以使用`event.preventDefault()`： ```javascript function preventDefaultAction(event) { event.preventDefault(); // 自定义操作 } ``` ### 6. 事件委托事件...

js实现表单多按钮提交action的处理方法

10-23

在JavaScript中，我们可以通过给按钮绑定不同的事件处理函数来实现这一需求。当某个按钮被点击时，触发相应的事件处理函数，在这个函数中我们可以修改表单的action属性，并调用表单的submit方法，从而实现表单的提交...

阻止表单提交按钮多次提交的完美解决方法

09-02

另一种方法是绑定到表单的`submit`事件，而不是按钮的`click`事件。这样，当表单提交时，会自动禁用提交按钮，防止用户在提交过程中再次点击： ```javascript $("form").submit(function() { $(":submit", this)....

表单中的button标签会自动提交表单问题

Byte_Dance的博客

02-15

745

在form表单内插入一个button按钮,按钮点击后会自动提交表单,本来是想用Jquery给button添加一个事件用来设置多选框的全选全不选和反选的问题的,但是发现定义在form标签区域内的button点击之后没有反应,闪一下就过去了.于是给form表单的action属性赋了一个值,发现点击button按钮后表单提交了.于是将button按钮定义在form表单外部,以防止表单自动提交,还可以不...

button按钮提交表单问题

牧小七的博客

02-24

2267

问题描述：表单中嵌套按钮，在点击按钮时会自动提交表单 <form action="/save"> <button>提交</button> </form> 原因分析：表单中的button按钮，没有指定 type="button"，则默认是 submit 类型，所以当点击按钮时会提交表单解决方案：在 button 标签中添加 type="button" 属性 <form action="/save"> <button

layui的普通按钮当成了提交按钮

qq_45045083的博客

03-06

315

layui的按钮默认会是提交今天不辱使命，又写出了一个bug，真好???????????? 看下方图片可以看到问题所在不错把我的一个按钮当做提交的按钮，因为有非空验证，那么下面这张图就更直观的看到了问题所在看到最后可以看到，当做了非空验证的输入框为空时，点击添加的按钮则会提示信息，那么看到源码的时候就会明白，刚接触，不是太懂layui，最后发现是type的属性没写，最后修改后就可以了，真的是要处处小心???????????????????? 修改后的代码昨日已逝明日未知 ...

layui踩坑记录之form表单下的button按钮默认自动提交

最新发布

acoolgiser的博客

07-21

2465

因此，当我们在使用form的时候，如果没有添加标准的提交按钮，会自动默认把其他的普通按钮认为是提交按钮，因为button的type默认值为“submit”。其实就是使用form的时候，应该对应有一个提交按钮，配套使用。其他功能按钮相加多少就加多少，但是必须要有一个提交按钮。2.在不需要提交的场景使用form时尽量使用a标签按钮来代替button，比如筛选功能中的查询按钮；1.在form中使用button时添加type属性：button、submit、reset；layui的官网说的也是比较清楚的，通过。

Html中button按钮和input按钮在form中的不同效果

yicunyangguang的博客

03-16

506

button按钮和input按钮在form标签内存在不同的效果

layui按下回车键提交表单

qq_40787608的博客

04-08

4016

layui默认的提交表单的方式submit(filter) layui.use(['form'],function () { var form = layui.form; form.on('submit(login)',function (data) { ajaxPost('/a/login',data.field,'/a/index') }) }) layui提供的提交表单方式需要我们点击button才能提交表单，有时候我们

layui使用中实现选中不提交以及跳过验证

乖乖康少

06-21

1489

ayui使用中的问题（选中不提交、跳过验证等），layui实现暂存功能

html点击按钮后页面刷新的问题，form表单中button按钮触发submit点击事件

MaYuKang的博客

10-09

7049

html点击按钮有如下form表单，包含了一个button按钮：情况1： <form action=""> <button onclick="">我是按钮</button> </from> 尽管button按钮没有执行任函数，但是点击按钮后，页面刷新。情况2： <form action="http://www.baidu.com"> <button onclick="">我是按钮</button> </fr

将按钮绑定到表单提交事件上

05-10

可以使用JavaScript将按钮绑定到表单提交事件上，示例如下： ```html <form id="myForm">  <button type="submit" id="submitBtn">提交</button> </form> <script> // 获取表单和按钮元素 const form = document.getElementById('myForm'); const button = document.getElementById('submitBtn'); // 将按钮绑定到表单提交事件 form.addEventListener('submit', function(event) { event.preventDefault(); // 防止表单默认提交 // 在这里添加表单提交的逻辑 }); </script> ``` 在上面的示例中，我们先获取了表单和按钮元素，然后使用`addEventListener`方法将按钮绑定到表单提交事件上。在表单提交事件处理程序中，我们可以添加表单提交的逻辑。使用`event.preventDefault()`防止表单默认提交，因为我们要通过JavaScript处理表单提交。