js操作form表单

最新推荐文章于 2022-10-26 17:18:28 发布

道法—自然

最新推荐文章于 2022-10-26 17:18:28 发布

阅读量392

点赞数 1

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103543178

版权

前端页面专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<title>js操作form表单</title>
		<!--
			js操作form表单
				特点：
					通过js操作form表单，可以实现动态的改变提交地址和提交方式
					同时通过表单对象.submit()，实现了普通按钮具备提交功能。
				表单域标签属性：
					readonly="readonly":用户不能修改数据，但是依然会提交。
					disabled="disabled":用户不能进行操作，也不会提交
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//操作form表单
			function operForm(){
				//获取form表单
					var  fm=document.getElementById("fm");
				//操作form属性
					fm.action="#";
					fm.method="get";
				//提交
					fm.submit();
			}
			//公司协议功能
			function testAgree(){
				/*//获取协议多选按钮
				var chk=document.getElementById("agree");
				//获取按钮对象
				var btn=document.getElementById("btn"); 
				//判断
				if(chk.checked){
					btn.disabled=false;
				}else{
					btn.disabled=true;
				}*/
				document.getElementById("btn").disabled=!document.getElementById("agree").checked;
			}
		</script>
	</head>
	<body>
		<h3>js操作form表单</h3>
		<hr />
		<form action="#" method="get" id="fm">
			用户名: <input type="text" id="uname" name="uname" value="张三" readonly="readonly"/><br />
			密码: <input type="password" name="pwd" id="pwd" value="123" disabled="disabled"/><br />
			<input type="checkbox" name="agree" id="agree" value="" onclick="testAgree()" />是否同意本公司的协议<br />
			<input type="button" value="登录" id="btn" onclick="operForm()" disabled="disabled"/>
		</form>
	</body>
</html>

道法—自然

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作form表单

<html> <head> <meta charset="utf-8"> <title>js操作form表单</title> <!-- js操作form表单特点：通过js操作form表单，可以实现动态的改变提交地址和提交方式同时通过表单对象.submit()，实现了普通按钮具备...
复制链接

扫一扫