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

痛定思痛。 2021-08-13 18:15 562阅读 0赞

#### 提交表单 ####

使用< 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
注意：当表单没有包含提交按钮时，在文本框中输入文本之后，只要按回车键一样能够触发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：禁用回车提交表单

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

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

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

#### 重置表单 ####

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

当单击重置按钮时，表单将被重置，所有表单字段恢复为初始值。这是会触发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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]  
示例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>

![在这里插入图片描述][20190927231057575.png]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/d2eca0f436ff448183df42f1b5b36ee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/dfb02c9cecd14a4683258ab0b5913e98.png
[20190927231057575.png]: /images/20210813/1b36a1660e024742b8b7d1d0535aa5a8.png