点击button按钮提交两次

最新推荐文章于 2023-10-24 17:24:42 发布

原创最新推荐文章于 2023-10-24 17:24:42 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#button提交了两次 #button的type #button的onlick

还在入门专栏收录该内容

26 篇文章

订阅专栏

本文解析了HTML按钮导致重复提交的原因，一是按钮类型默认为submit，二是onclick事件中调用了自定义提交方法。通过将按钮类型更改为button，避免了重复提交的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的页面代码是这样

<button id="btnSubmit" class="btn btn-primary" type="submit" value="保 存" style="height:42px" onclick="dosubmit()"><i class="fa fa-save">&nbsp;保存</i></button>

点击这个按钮，会执行两次保存方法。我一直以为是button在陷害我，然而并不是，是我自己傻不拉几。

执行两次提交方法是因为：1.button的type是submit；2.该button的onclick也执行了一次。

因为要使用自定义的提交方法dosubmit;所以将button的type改成button即可。

同理，如果你发现你点了下你的button但是提交了表单，原因可能如下：

1.看看你的按钮是不是有type="submit"

2.没有定义type的话，button默认type为submit，所以可以设置为type="button",或者将button用a标签代替

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叫我豆豆哥哥

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

按钮的Ajax请求时一次点击两次提交的解决方法

10-21

在使用JavaScript的Ajax请求时，如果在Ajax请求完成后没有阻止按钮的默认行为，即表单提交，就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一：更改按钮的type属性第一种...

js控制再次点击按钮之间的间隔时间可防止重复提交

10-25

在网页交互中，防止用户快速多次点击提交按钮导致重复提交是一项重要的用户体验优化。这通常通过JavaScript来实现，通过控制按钮的可用状态和设置点击间隔时间，确保用户在一定时间内只能进行一次提交操作。以下是...

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

关于button绑定事件提交时会出现提交两次的问题

夏微微的博客

05-29

1001

1.button标签默认的type属性是submit，所以点击button会触发表单的submit事件，这种情况下改变type的属性为button就好给 <button onclick="create()">创建</button> 添加 <button type="button" onclick="create()">创建</button> 2.如果第一种解决不了，看一下是不是第二种情况，有没有重复提交button，这样会重复绑定事件，可以每次先解绑cl

form表单重复提交，button问题

daisy7828的专栏

06-26

639

script language="javascript"> function add(){ $('#addForm').attr("action","/account/list"); $('#addForm').submit(); } script> form method="post" id="addForm" > button type="submi

button标签重复提交的原因

miemieY89

09-02

553

form表单中使用<button> 有可能会在造成表单重复提交的问题，原因是 <button> 的type属性是有默认值的。 IE浏览器默认值是 "button" 即 <button type = "button">按钮</button> ；而其他浏览器默认值是"submit" 即<button type = "submit">按钮</button>；众所周知，...

Button提交两次问题排除

简简单单兔呦

10-12

3196

在form表单中，通过button按钮绑定点击事件发送请求，发现表单被重复提交了， &lt;form&gt; .... &lt;div class="form-group form-ops"&gt; &lt;button class="form-btn btn-info" oncli

vue　button　多次点击重复提交

dilong6852的博客

05-02

279

／／发表评论 sendComment () { this.disabled = true if (this.text == ''){ this.$message({ type:'error', message:'输入内容不能为空', }) this.disabled = false }else{ this.$post('/xx/xx/IdleGoodsComment',{ goods_i...

在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码

10-31

- `return false`：阻止表单的默认提交行为，确保能够连续提交两次。 ### 总结通过上述分析，我们可以看到如何在一个表单中使用单个提交按钮将表单数据提交到两个不同的处理页面。这种方法虽然不常见，但在某些...

javascript设置连续两次点击按钮时间间隔的方法

12-10

在JavaScript编程中，有时我们需要控制用户对某个按钮的连续点击行为，例如防止短时间内连续点击按钮导致多次请求。本文介绍了一种方法，通过设置时间间隔来限制用户连续点击按钮的频率。这种方法可以应用于各种场景...

layui点击按钮页面会自动刷新的解决方案

10-16

在HTML标准中，<button>标签默认的type是submit，这意味着如果按钮被点击且位于表单内，浏览器会尝试提交表单。通过显式设置type为"button"，则无论在哪个浏览器下，按钮都不会有提交表单的效果，也就不会引起页面...

button事件要点两次的问题

Object_prototype的博客

01-20

960

问题:部分手机输入框在得到焦点，后去点击button事件要点两次的问题原因是：点击click事件时会先执行input失去焦点的事件，导致第一次button事件没有执行 jq：解决方法：将button的click方法改为mousedown就可以了下面是一些其他框架的方法 JS： onmousedown 小程序： touchstart Vue： touchstart ...

表单提交时要点击两次按钮（Validform验证）才能成功的解决方法

Carey

09-05

5911

原因分析：因为表单控件中含有ajax验证，所以在点击提交按钮时，会先执行submit，但由于此时含有ajax验证的控件还未执行验证，所以并未提交成功，然后再执行控件的blur事件对控件内容进行验证，如果验证通过，那么此时再点击一次提交按钮就会提交成功。解决方法：修改验证的触发事件，Validform默认的验证触发事件是blur，可以修改为在触发keyup事件时进行验证，在用户输入时即时验证，

解决按钮多次点击重复提交数据问题

weixin_39347584的博客

06-08

1275

项目场景：提示：重复点击：解决按钮多次点击重复提交数据问题问题描述：在一些涉及库存等项目中，如果连续两次提交请求，而后端就会扣减两次库存，造成很多返工问题；但这种彻底解决方案还是要在后端接口处做限制，前端只能曲线救国一下了（不想和他们扯皮）。 doubleclick() { uppicsignature().then(response => { getMessageBox(this, re

Button需要点击两次才触发点击事件问题

qq_31608451的博客

03-28

6922

在做Mstar的平板项目时，因为要用到遥控器和触摸双控制，所以在做launcher的时候将button按键的属性设置成android:focusableInTouchMode="true"，达到了想要的结果，触摸跳转到相关应用退出后会在button上聚焦，方便这时可以遥控操作，但是 button的点击事件就出现问题了，第一次点击只是button聚焦，需要第二次点击button的点击事件才会被触发，

C# 第一次按下button 执行一件事情,第二次按下button 执行另一件事情

caixiaobai2019的博客

11-02

6026

方法一：那么第三次按下时呢，执行哪个事件？ private void button1_Click(object sender, System.EventArgs e) { int clickTimes; //按下du次数 //获取按zhi下次数 object tag = this.button1.Tag; if (tag == null) { clickTimes = 0; } else { clickTimes = Convert.ToInt32(tag); } //增加并记录按下次数 this.but

LayerUI中按钮点击一次，触发了两次事件