JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）

最新推荐文章于 2024-02-07 08:43:17 发布

吴声子夜歌

最新推荐文章于 2024-02-07 08:43:17 发布

阅读量1.4w

点赞数 10

分类专栏： JavaScript 文章标签： JavaScript 提交表单取消默认提交表单

本文链接：https://blog.csdn.net/cold___play/article/details/101566365

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

提交表单

使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时，就会提交表单。

submit事件类型仅在表单内提交按钮，或者在文本框中输入文本时按回车键触发。

示例1：单击【提交】按钮后，触发submit事件，该函数禁止表单提交，而是弹出提示框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form id="form1" name="form1" method="post" action="" onsubmit="return fun()">
			<input type="text" name="t" id="t" />
			<input type="submit"/>
		</form>
		<script>
			function fun(){
				var t = document.getElementById("t");
				alert(t.value);
				return false;
			}
		</script>
	</body>
</html>

在这里插入图片描述
注意：当表单没有包含提交按钮时，在文本框中输入文本之后，只要按回车键一样能够触发submit事件。
**特殊情况：**在< textarea >文本区中回车只会换行，不会提交表单。

示例2：调用prevetnDefault()方法阻止事件的默认行为取消表单提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form id="form1" name="form1" method="post" action="" onsubmit="return fun()">
			<input type="text" name="t" id="t" />
		</form>
		<script>
			var t = document.getElementById("t");
			var f = document.getElementById("form1");
			f.onsubmit = function(e){
				if(t.value.length < 1){
					var event = e || window.event;
					if(event.preventDefault){
						event.preventDefault();
					}else{
						event.returnValue = false;
					}
				}
			}
		</script>
	</body>
</html>

如果文本框为空，单击回车表单并不提交。

示例3：禁用回车提交表单

<script>
	var t = document.getElementById("form1");
	t.onkeypress = function(e){
		var e = e || window.event;
		return e.keyCode != 13;//按下回车时，返回false
	}
</script>

示例4：调用submit()方法提交表单,不需要提交按钮

var t = document.getElementById("t");
var f = doument.getElementById("form1");
t.onchange = function(){
	f.submit();
}

注意：在调用submit()方法时，不会触发submit事件，因此在调用此方法之前先要验证表单数据。

重置表单

为< input >或< button >标签设置type=“reset"属性可以定义重置按钮。

<inpu type="reset" value="重置">
<button type="reset">重置</button>

当单击重置按钮时，表单将被重置，所有表单字段恢复为初始值。这是会触发reset事件。

示例1：单击【重置】按钮，弹出提示，恢复文本框默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="form1" name="form1" method="post" action="">
			<input type="text" name="t" id="t" />
			<input type="reset"  name="重置"/>
		</form>
		<script>
			var t = document.getElementsByTagName("input")[0];
			var f = document.getElementById("form1");
			f.onreset = function(e){
				alert(t.value);
			}
		</script>
	</body>
</html>

在这里插入图片描述
示例2：当输入字符大于10个字符，取消重置操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="form1" name="form1" method="post" action="">
			<input type="text" name="t" id="t" />
			<input type="reset"  name="重置"/>
		</form>
		<script>
			var t = document.getElementsByTagName("input")[0];
			var f = document.getElementById("form1");
			f.onreset = function(e){
				if(t.value.length > 10){
					var event = e || window.event;
					if(event.preventDefault){
						event.preventDefault();
					}else{
						event.returnValue = false;
					}
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

提示：也可以使用form.reset()方法重置表单，这样就不需要包含重置按钮

吴声子夜歌

关注

10
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）

提交表单使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时，就会提交表单。submit事件类型仅在表单内提交按钮，或者在文本框中输入文本时按回车键触发。示例1：单击【提交】按钮后，触发sub...
复制链接

扫一扫