表单操作

最新推荐文章于 2021-11-22 20:50:14 发布

bkdl047

最新推荐文章于 2021-11-22 20:50:14 发布

阅读量185

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/bkdl047/article/details/94549948

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

·获取表单
1、document.表单名称
2、document.getElementById(表单id)
3、document.forms[表单名称]
4、document.forms[索引] //从0开始

<script type="text/javascript">
		/*获取表单*/
		
		// 1、document.表单名称
		console.log(document.myform);
		
		// 2、document.getElementById(表单 id);
		console.log(document.getElementById("myform"));
		
		// 获取文档做所有的表单集合
		console.log(document.forms);
		
		// 3、document.forms[表单名称]
		console.log(document.forms["myform2"]);
		
		// 4、document.forms[索引]; //从 0 开始
		console.log(document.forms[1]);
		
	</script>

·获取input的元素
如：text password hidden textarea等，前两种常用。
1)、通过id获取：document.getElementById(元素ID)；
2)、通过form.名称形式获取：myform.元素名称; name 属性值
3)、桶过name获取：document.getElementsByName(元素名称)[索引] //从0开始
4)、通过tagName数组：document.getElementsByTagName(‘input’)[索引] //从0开始

<script type="text/javascript">
		/**
		 * 获取元素内容
		 */
		function getTxt() {
			// 获取表单对象
			var myform = document.myform; // document.表单的name属性值
			// 获取表单元素
			// 1)、通过 id 获取：document.getElementById(元素 id);
			console.log(document.getElementById("uname"));
			console.log(document.getElementById("uname").value);
			
			// 2)、通过 form.名称形式获取: myform.元素名称;  name 属性值
			console.log(myform.upwd);
			console.log(myform.upwd.value);
			
			// 3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
			console.log(document.getElementsByName("uno")[0]);
			console.log(document.getElementsByName("uno")[0].value);
			
			// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
			console.log(document.getElementsByTagName("textarea")[0]);
			console.log(document.getElementsByTagName("textarea")[0].value);
		}
	</script>

·获取单选按钮
前提：将一组单选按钮设置相同的name属性值
(1)、获取单选按钮组
document.getElementsByName(“name属性值”)
(2)、遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定：checked='checked’或checked='true’或checked
未选中状态设定；没有checked属性或checked=‘false’

<script type="text/javascript">
		// 获取一组单选按钮
		var radios = document.getElementsByName("sex");
		// 遍历数组，得到选中项的值
		for (var i = 0; i < radios.length; i++) {
			// 判断是否被选中
			if (radios[i].checked) {
				console.log("选中的值是：" + radios[i].value);
			} else {
				console.log("未选中的值是：" + radios[i].value);
			}
		}
	</script>

·获取多选按钮
前提：将一组多选按钮设置相同的name属性值
(1)、获取多选按钮组：
document.getElementsByName(“name属性值”)
(2)、遍历每个多选按钮，并查看多选按钮元素的checked属性
若属性为true 表示被选中，否则未被选中
选中状态设定：checked='checked’或checked='true’或checked
未选中状态设定;没有checked属性或checked=‘false’

·获取下拉选项
(1)、获取select对象
var uform = document.getElementById(“uform”); //uform为select下拉框的id
(2)、获取选中项的索引
var idx = uform.selectedIndex;
(3)、获取选中项options的value属性值
var val = uform.options[idx].value;
注意：当通过options获取选中框的value属性值时，
若没有value属性，则获取option标签的内容
若存在value属性，则获取value属性的值
(4)、获取选中项options的text；
var txt = uform.options[idx].text;
选中状态设定：selected=‘selected’、selected=‘true’
未选中状态设定:不设selected属性

·提交表单

注：提交表单时，表单元素必须设置name属性值
请求类型：

get请求：
	参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自定刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
post请求：
	参数不会跟在地址栏后面显示,请求参数长度不限(其实有长度限制，与服务器相关)，相对而言安全，会自动刷新缓存；请求速度相对而言慢。
	通常做查询操作，使用get请求；增删改查使用post请求

提交表单
(1)、使用普通button 按钮+onclick事件+事件中编写代码；
获取表单.submit();
(2)、使用submit 按钮+οnclick=“return函数()”+函数编写代码；
最后必须返回:return true|false;
(3)、使用submit 按钮/图片提交按钮+表单οnsubmit=“return 函数();”+函数编写代码：
最后必须返回：return true|false;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交表单</title>
	</head>
	<body>
		<form action="01-获取表单.html" method="get">
			姓名：<input type="text" name="uname" />
			<input type="submit" value="提交" onclick="return checkForm1()"/>
		</form>
		
		<form action="01-获取表单.html" method="get" onsubmit="return checkForm2()">
			姓名：<input type="text" name="uname" />
			<input type="submit" value="提交" />‘
			
		</form>
		
		<form action="01-获取表单.html" method="get" >
			姓名：<input type="text" name="uname1" />
			<input type="button" value="提交" onclick="checkForm3()" />
			<span id="msg" style="font-size: 12px;color: red;"></span>
		</form>
		
	</body>
	
	<!--
		提交表单
			（1）使用普通 button 按钮+onclick 事件+事件中编写代码:
			获取表单.submit();
			（2）使用 submit 按钮 + onclick="return 函数()" +函数编写代码: 
			最后必须返回：return true|false;
			（3）使用 submit 按钮/图片提交按钮 + 表单 onsubmit="return 函数();" +函数编写代码: 
			最后必须返回：return true|false;
	-->
	
	<script type="text/javascript">
		/*提交方式一：submit按钮 + onclick事件*/
		// 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
		//如果return true，则提交表单；return false不提交；若直接return也会提交表单
		function checkForm1() {
			//return true; // 提交表单
			return false; // 不提交表单
			//return; // 无效，不会阻止表单提交
		}
		
		
		/*提交方式二：submit按钮 + onsubmit事件*/
		// 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
		//如果return true，则提交表单；return false不提交；若直接return也会提交表单
		function checkForm2() {
			return true; // 提交表单
			//return false; // 不提交表单
			//return; // 无效，不会阻止表单提交
		}
		
		/*提交方式三：button按钮+点击事件*/
		// 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
		function checkForm3() {
			var uname = document.getElementsByName("uname1")[0].value;
			if ( uname == null || uname.trim() == "") {
				console.log("用户名不能为空！");
				document.getElementById("msg").innerHTML = "用户名不能为空！";
				return;
			}
			
			// 手动提交表单
			document.forms[2].submit();
		}

	</script>
</html>