提交form表单的两种方式

最新推荐文章于 2024-09-29 16:02:24 发布

cccrush_

最新推荐文章于 2024-09-29 16:02:24 发布

阅读量4.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42621338/article/details/84032134

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表单的onsubmit事件提交

onsubmit事件的函数一定要是 return 函数名()

为了让表单提交前判断账号密码是否正确，需要在onsubmit事件函数中进行判断。如果不符合要求，一定要返回false，这样onsubmit事件的return run()才有效果，完成阻止不合格表单的提交以及页面的跳转。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="success.html" method="post" onsubmit="return run()">
		账号<input type="text" id="num" name="num"/><br/>
		密码<input type="text" id="password" name="password"><br/>
		<input type="submit" id="button" value="提交" />
	</form>
</body>
	<script type="text/javascript">
		function run(){
			var name = document.getElementById("num").value;
			if (name==""||name.length == 0) {
				alert("请输入正确的账号");
				return false;
			}
		}
	</script>
</html>

Js函数提交表单

当一个页面需要提交的表单过多或者发生嵌套时，推荐使用JS提交。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form id="formId" name="formName" action="success.html" method="post" />
		账号<input type="text" id="num" name="num"/><br/>
		密码<input type="text" id="password" name="password"><br/>
		<input type="button" value="提交" onclick="run()">
	</form>
</body>
	<script type="text/javascript">
		function run(){
			//方法一：通过id获取表单
			//var form = document.getElementById("formId");
			//方法二：通过name属性获取表单
			var form = document.formName;

			//获得表单内部输入值
			//var name = document.formName.num.value;
			//alert(name);
			
			//设置提交路径方法
			form.action = "success.html";
			form.method = "get";
			//提交表单
			form.submit();
		}
	</script>
</html>