button被点击时，form被自动提交

最新推荐文章于 2022-05-06 15:12:04 发布
最新推荐文章于 2022-05-06 15:12:04 发布
阅读量1w 收藏 6
点赞数 7
分类专栏： 小bug 文章标签： 表单自动提交 button自动提交表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43818686/article/details/84839216
版权

今天写用户登陆页面的时候，遇到了一个问题，就是要当对账户或密码进行非空验证，非空是可以检验出来，但是同时表单也提交了，送给了后台一个空表单，原来的代码是这样的

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="doLogin" method="post" id="loginForm">
		姓名：<input type="text" name="username" id="username">
		密码：<input type="text" name="pwd" id="pwd">
		<button  id="submitbut">提交</button>
	</form>
</body>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$("#submitbut").click(function(){
			var name = $.trim($("#username").val());
			
			var pwd = $.trim($("#pwd").val());
			if(name == ""){
				alert("姓名不能为空");
				return;
			}
			if(pwd == ""){
				alert("密码不能为空")
				return;
			}
			$("#loginForm").submit();
		});
		
	</script>
</html>

即使不填任何内容，表单也会被提交，后来把button按键换成了用div做的高仿按键或其他，都是正常的，于是就确定了问题的所在，后来查API看到button的属性：
在这里插入图片描述
发现button的type默认是submit，而我们在上面又没有对button的type设置，所以每次点击都会提交。
解决办法：在button里加type=“button” 即可解决

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="doLogin" method="post" id="loginForm">
		姓名：<input type="text" name="username" id="username">
		密码：<input type="text" name="pwd" id="pwd">
		<button type="button" id="submitbut">提交</button>
	</form>
</body>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$("#submitbut").click(function(){
			var name = $.trim($("#username").val());
			
			var pwd = $.trim($("#pwd").val());
			if(name == ""){
				alert("姓名不能为空");
				return;
			}
			if(pwd == ""){
				alert("密码不能为空")
				return;
			}
			$("#loginForm").submit();
		});
		
	</script>
</html>
一秋知鹤
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
网页中回车后form自动提交跳到其他页面的解决方法
09-28
这个`onsubmit`事件会在表单提交时触发，执行的JavaScript函数`search_wj()`应该包含了处理查询逻辑的代码。返回`false`会阻止表单的默认提交行为，防止页面跳转。 以下是这个解决方案的详细解释： 1. **表单的`...
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
10-20
以上方法都可以有效地防止只有一个input文本框的表单在按下回车键时自动提交。选择哪种方法取决于你的应用场景和对用户体验的考虑。需要注意的是，不同的浏览器可能会有不同的默认行为，因此在开发时需要充分考虑到...
button的点击事件会引起form表单提交
ChunKitAu的博客
07-19 1242
在实现添加多个附件时，按"新增一个附件"按钮后,页面自动跳转到servlet html代码 <form action="Servlet" method="post" enctype="multipart/form-data"> <input type="hidden" id="fileNum" name="fileNum" value="1"/> File1:&l...
表单元素盘点第三弹 ＜button＞＜select＞＜optgroup＞
GUIDM的博客
05-06 938
表单元素：<button><select><optgroup>
JavaScript笔记-点击button提交form表单
IT1995的博客
03-10 5526
功能如下： 点击购买后，点击确定。 确定调用了一个js函数，提交form表达给后端 代码如下： <div class="modal-footer"> <button type="button" class="btn text-white border bg-dark" data-bs-dismiss="modal">取消</button> <button type="button" class="btn text-white border bg
点击button自动提交表单
许诗宇的博客
12-29 6347
一个button在一个表单内，点击它直接会让表单提交 如一个&lt;button&gt;test&lt;/button&gt; 原因是button如果不设置它的type，它的type默认是submit，而button在表单会让它自动提交 所以要设置它的type="button"...
点击button标签会导致提交form
热门推荐
生而为人我很抱歉
11-25 1万+
button的type 属性，IE的默认是 “button”，非IE默认是 “submit”。 如果想不提交需要指定type为”button”。<form> <button type="button">button</button><!--不提交form--> <button type="submit">button</button><!--提交form--> <butto
layui form表单提交后实现自动刷新
01-21
1、提交表单，页面自动刷新。 出现这样的情况呢，搜索了一下是因为表单的提交按钮没有type类型。哪怕是button标签呢，也不行。我试了一下，使用这种情况的话，主要是在监听事件中并没有返回return false，如果返回了...
Form表单按回车自动提交表单的实现方法
09-01
如果不想让表单在按回车时自动提交，可以采取以下两种解决方案： 1. 添加一个隐藏的`<input type="text">`标签。通过设置`style='display:none'`，这个输入框不会在页面上显示，同时回车键也不会触发表单提交： ``...
JavaScript在form表单中使用button按钮实现submit提交方法
01-19
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的...
AutoClick 自动点击工具
12-18
AutoClick 自动点击工具，比按键精灵简单，易用
form表单中button按钮自动提交数据
hotchange的博客
07-07 7980
from表单中button按钮自动提交表单内容。 问题描述： 给button按钮绑定click事件，使用ajax向后台提交数据，在回调函数中无法实现页面跳转，并且页面会自动刷新。 有时回调函数中的语句还会出现不执行等情况。 这些情况的产生完全取决于form表单在button按钮被点击后什么时间自动刷新页面。 解决方案： 1、设置 form 的 onsubmit='return fal...
form中button提交表单
page_qiu的博客
05-11 2620
发现：springmvc 项目，js校验不通过，return后，表单依然可以提交。 原因：form表单下的按钮在没有指定type类型的时候，如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type ...
怎么让jsp页面自己定时点击提交按钮，完成form表单提交到servlet事件
信徒博客
10-13 2826
这个涉及到js的每隔几秒提交事件 &lt;script type="text/javascript"&gt; function dtime(){ setInterval(sub(), 30000); } function sub(){ document.getElementById("frm").submit(); } &lt;/script&gt; ...
点击button自动提交表单原因及解决方案
svygh123的专栏
12-29 734
在做登录的时候,需要ajax提交验证,但是发现点击button会自动submit表单,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <style type="text/css"> html { widt...
button 按钮，结合onclick事件，验证和提交表单
zzz19的博客
09-16 4091
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
form表单中 button 、 input type="button" 、 input type="submit" 的区别
shijiujiu33的博客
10-18 2972
1.&amp;lt; button &amp;gt;与&amp;lt; input type=“button” &amp;gt;其中一个重要的区别就是： 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。 &amp;lt; button &amp;gt; 控件 与 &amp;lt; input type=“button” &amp;gt; 相比，提供了更为强大的功能和更丰富的
怎么点击提交后自动刷新页面代码
最新发布
05-30
如果你想在表单提交后自动刷新页面，可以在表单中添加一个 JavaScript 函数，使用 `window.location.reload()` 方法来刷新页面。例如： ```html <form action="submit.php" method="POST" onsubmit="location.reload();"> <!-- 表单内容 --> <button type="submit">提交</button> </form> ``` 在这个例子中，我们在表单的 `onsubmit` 事件中添加了一个 JavaScript 函数 `location.reload()`。当用户点击提交按钮时，浏览器会执行这个函数，刷新当前页面。 如果你想在表单提交后跳转到另一个页面并刷新，可以使用 JavaScript 来实现。例如： ```html <form action="submit.php" method="POST" onsubmit="submitForm();"> <!-- 表单内容 --> <button type="submit">提交</button> </form> <script> function submitForm() { // 提交表单 document.forms[0].submit(); // 跳转到另一个页面 window.location.href = "result.php"; } </script> ``` 在这个例子中，我们定义了一个 JavaScript 函数 `submitForm()`，用于提交表单并跳转到另一个页面。当用户点击提交按钮时，浏览器会执行这个函数。函数中先使用 `document.forms[0].submit()` 方法提交表单，然后使用 `window.location.href` 属性跳转到另一个页面。在 `result.php` 页面中，你可以通过相应的方式处理表单提交的数据，并返回相应的结果。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值