点击button自动提交表单原因及解决方案

最新推荐文章于 2023-07-21 16:11:54 发布
最新推荐文章于 2023-07-21 16:11:54 发布
阅读量729 收藏
点赞数
分类专栏： html css js 文章标签： js登录 登录button自动提交表单 登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/svygh123/article/details/103751237
版权
js 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
html
15 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

在做登录的时候,需要ajax提交验证,但是发现点击button会自动submit表单,代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #3C8DBC;
}

form {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  position: absolute;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 15px 0 15px -15px #000, -15px 0 15px -15px #000; -
  -borderWidth: 2px;
  border-radius: var(- -borderWidth);
}

h1 {
  color: #FFF;
  font-weight: bold;
  text-shadow: 2px 2px 5px #002478;
}

.loginInput {
  width: 173px;
  height: 24px;
}

.loginBtn {
  height: 30px;
  color: white;
  font-size: 16px;
  background-color: #3C8DBC;
  border-color: #3C8DBC;
  border-radius: 4px;
}

.loginBtn:hover {
  background-color: #1360a7;
  border-color: #1360a7;
}
</style>
</head>
<body>
  <form action="login.do">
    <h1>系统登陆</h1>
    <hr>
    <input type="text" class="loginInput" placeholder="登录帐号"><br> <input
      type="password" class="loginInput" placeholder="登录密码"><br>
    <button class="loginInput loginBtn">按钮点击</button>
  </form>
</body>
</html>

点击提交后,会提交到form指定的action

原来是button在form里面会submit事件,最后只能改成input,然后将类型设置为submit,然后写js方法返回false即可不自动提交表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #3C8DBC;
}

form {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  position: absolute;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 15px 0 15px -15px #000, -15px 0 15px -15px #000; -
  -borderWidth: 2px;
  border-radius: var(- -borderWidth);
}

h1 {
  color: #FFF;
  font-weight: bold;
  text-shadow: 2px 2px 5px #002478;
}

.loginInput {
  width: 173px;
  height: 24px;
}

.loginBtn {
  height: 30px;
  color: white;
  font-size: 16px;
  background-color: #3C8DBC;
  border-color: #3C8DBC;
  border-radius: 4px;
}

.loginBtn:hover {
  background-color: #1360a7;
  border-color: #1360a7;
}
</style>
</head>
<body>
  <form action="login.do" onsubmit="return login();">
    <h1>系统登陆</h1>
    <hr>
    <input type="text" class="loginInput" placeholder="登录帐号"><br> 
    <input type="password" class="loginInput" placeholder="登录密码"><br>
    <input type="submit" class="loginInput loginBtn" value="登录"><br>
  </form>
  <script type="text/javascript">
  	function login() {
  	  // 此处写 ajax 请求后台代码
  	  alert('登录成功');
  	  return false;
  	}
  </script>
</body>
</html>

 

svygh123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
网页中表单按回车就自动提交的问题的解决方案
09-04
在网页设计中，表单是用户与服务器交互的重要组成部分，其中的一个常见问题是在表单内...无论是希望回车键立即提交表单（如搜索引擎的搜索框），还是防止在复杂表单中因误操作引发的提前提交，都能找到合适的处理方式。
关于点击button按钮为何会自动提交数据的问题-0613
兜兜的博客
06-14 1125
关于点击button按钮为何会自动提交数据的问题，button的type属性。
layui踩坑记录之form表单下的button按钮默认自动提交
最新发布
acoolgiser的博客
07-21 2299
因此，当我们在使用form的时候，如果没有添加标准的提交按钮，会自动默认把其他的普通按钮认为是提交按钮，因为button的type默认值为“submit”。其实就是使用form的时候，应该对应有一个提交按钮，配套使用。其他功能按钮相加多少就加多少，但是必须要有一个提交按钮。2.在不需要提交的场景使用form时尽量使用a标签按钮来代替button，比如筛选功能中的查询按钮；1.在form中使用button时添加type属性：button、submit、reset；layui的官网说的也是比较清楚的，通过。
Angular【form 表单】自动提交问题
^Being^
04-19 987
使用 angular 中的 form 表单，表单内任意 input 输入框聚焦时，点击键盘上的 enter 键，form 表单会自动提交......
layui form表单下的button按钮会自动提交表单的问题以及解决方案
weixin_40460171的博客
05-06 4025
layui表单自动提交问题 最近使用layui的表单提交时，遇到了这个问题：在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题，很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧。 <form class="layui-form"> <label class="layui-form-label">银行卡号</label> <input type="text" name="bankCard" lay-veri
关于layui表单中按钮自动提交的解决方法
10-16
另一个解决方案是使用`<a>`标签模拟按钮，因为`<a>`标签不会导致表单提交。你可以通过CSS样式来使它看起来像按钮： ```html <!-- 表单内容 --> ()">提交 ``` 然后在JavaScript中定义`mySubmitFunction()`...
Form表单按回车自动提交表单的实现方法
09-01
在前端开发中，表单交互是用户界面的重要组成部分，而其中的一个常见需求是让用户通过按回车键自动提交表单。本文将详细讲解如何实现这一功能，并探讨在不同情况下是否需要自动提交表单。 首先，当一个`<form>`表单...
IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法
10-16
在IE浏览器中，JavaScript脚本用于提交表单时，可能会遇到一个问题：表单数据无法自动提示，即浏览器不会记住用户之前输入的内容。这个问题是IE特有的，其他浏览器如Chrome、Firefox等通常不会有这样的问题。要解决...
阻止表单提交按钮多次提交的完美解决方法
09-02
一种常见的解决方案是在表单提交时改变提交按钮的状态。在HTML中，我们可以将表单的提交按钮设置为`input type="button"`而不是`input type="submit"`。这样，我们可以通过JavaScript或jQuery来处理提交事件，而不是...
form中button会自动提交的问题（实用，赞）
chelen_jak的专栏
11-13 1233
原文出处：https://blog.csdn.net/hani_wen/article/details/88413957 <form> ...... <button class='btn' (click)='handleClick'>选择</button> ...... </form> 当点击选择按钮butt...
button按钮提交表单问题
牧小七的博客
02-24 2246
问题描述： 表单中嵌套按钮，在点击按钮时会自动提交表单 <form action="/save"> <button>提交</button> </form> 原因分析： 表单中的button按钮，没有指定 type="button"，则默认是 submit 类型，所以当点击按钮时会提交表单 解决方案： 在 button 标签中添加 type="button" 属性 <form action="/save"> <button
button 和 submit 的使用
qq_43619832的博客
03-24 1787
(关于button 和 submit 的使用区别) button 和 submit 的使用 1.button-普通按钮，submit-提交按钮 2.submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。 3.submit默认为form提交，可以提交表单（form）. button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做任何事情.当...
＜form＞表单中＜button＞自动提交的问题
m0_51512780的博客
04-13 606
最近想在<form>表单中，添加一个取消按钮，通过设置他的onclik来返回原来的界面，但是出现了一个很奇怪的现象，我点了这个取消的<button>却提交了，非常奇怪。一番搜索后，才发现原来是我没有指定<button>的type，而<button>的type如果不指定，那么默认就是submit。至此，解决办法就显而易见，指定<button>的type为button即可。 举例： 未指定type的<button>： ...
用button提交表单php,JavaScript在form表单中使用button按钮实现submit提交方法
weixin_32597009的博客
03-11 1740
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法：使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaS...
表单中的button标签会自动提交表单问题
Byte_Dance的博客
02-15 736
在form表单内插入一个button按钮,按钮点击后会自动提交表单,本来是想用Jquery给button添加一个事件用来设置多选框的全选 全不选和反选的问题的,但是发现定义在form标签区域内的button点击之后没有反应,闪一下就过去了.于是给form表单的action属性赋了一个值,发现点击button按钮后表单提交了.于是将button按钮定义在form表单外部,以防止表单自动提交,还可以不...
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
No8g攻城狮的博客
07-31 7269
情景描述 有时候我们可能需要在表单中放置多个按钮，比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件，在单击响应事件中进行提交表单，这没有任何问题。点击取消按钮的时候，触发对应的单击响应事件，这个单击响应事件中主要处理关闭表单页面逻辑，所以会关闭页面，这也正常。但是！打开控制台监听请求会发现，它也会提交表单。 项目应用 项目中有个需求：点击一个按钮查询当前IP所在地的经纬度。...
使用Button提交表单
04-06
要使用按钮提交表单，您需要在HTML中使用标签来创建表单，并在表单中包含一个<button>元素来触发提交操作。 以下是一个简单的示例： ```html <label for="name">Name: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

svygh123

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值