JS获取表单中的元素和取值方法

2024-04-02 19:04:59 208人浏览泡泡鱼

摘要

获取表单的四种方式 1、document.表单名称2、document.getElementById(表单 id);3、document.fORMs[表单名称]4、document.

获取表单的四种方式

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

	<body>
		<!-- 
			获取表单
				1、document.表单名称
				2、document.getElementById(表单 id);
				3、document.forms[表单名称]
				4、document.forms[索引]; //从 0 开始
		 -->
		<form id='myform' name="myform" action="" method="post"></form>
		<form id='myform2' name="myform2" action="" method="post"></form>
		
		<script type="text/javascript">
			//1、document.表单名称
			var form = document.myform;
			console.log(form);
			
			//2、document.getElementById(表单 id);
			var myform2 = document.getElementById("myform2");
			console.log(myform2);
			
			//3、document.forms[表单名称]
			var forms = document.forms;
			console.log(forms);
			console.log(forms['myform2']);
			
			//4、document.forms[索引]; //从 0 开始
			console.log(forms[0]);
		</script>
	</body>

表单的元素以及值获取

	<body>
		<!-- 
			获取元素的值
				获取表单元素的值
					表单元素节点.value;       取值
					表单元素节点.value = "值";  设置值
					
					文本框，密码框，单选，多选
					
				获取非表单元素的内容
					元素节点.innerhtml = "值";   设置值
					元素节点.innerHtml; 		 取值
				
				
			获取input元素
				1)、通过 id 获取： document.getElementById(元素 id);
				2)、通过 form.名称 形式获取: myform.元素名称;    name属性值
				3)、通过 name 获取 数组 :document.getElementsByName(name属性值)[索引] // 从0开始
				4)、通过 tagName   数组 :document.getElementsByTagName('input')[索引] // 从0开始
				
			获取单选按钮
				前提：将一组单选按钮设置相同的name属性值
					(1)获取单选按钮组：
						document.getElementsByName("name属性值");
				  	(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
						若属性值为true表示被选中，否则未被选中	
					选中状态设定：  checked='checked'  或  checked='true'  或  checked	
					未选中状态设定：   没有checked属性   或  checked='false'
				
				
			多选框
				前提：设置一组多选框为相同name属性值
				(1)获取多选按钮组：
					document.getElementsByName("name属性值");
				(2)遍历每个多选按钮，并查看多选按钮元素的checked属性
					若属性值为true表示被选中，否则未被选中	
					选中状态设定：  checked='checked'  或  checked='true'  或  checked	
					未选中状态设定：   没有checked属性   或  checked='false'
				
				
			获取下拉选项
				1）获取 select 对象：
					var ufrom = document.getElementById("ufrom");
				2）获取选中项的索引：
					var idx = ufrom.selectedIndex;
				3）获取选中项 options 的 value属性值：
					var val = ufrom.options[idx].value;
					注意：当通过options获取选中项的value属性值时，
						若没有value属性，则取option标签的内容
						若存在value属性，则取value属性的值
				4）获取选中项 options 的 text：
					var txt = ufrom.options[idx].text;
					
					选中状态设定：selected='selected'、selected=true、selected
					未选中状态设定：不设selected属性 
				
		 -->
		 
		<form id='myform' name="myform1" action="" method="get">		
			姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
			密码:<input type="passWord" id="upwd" name="upwd" value="1234"/><br />
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			个人说明:<textarea name="intro"></textarea>
			<button type="button" onclick="getTxt();" >获取元素内容</button>
		</form>
		
		


		<!-- 操作单选 -->
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="radio" name="rad" value="1" />	1
			<input type="radio" name="rad" value="2"  /> 2
			<button type="button" onclick="getRadio();" >获取单选内容</button>
		</form>
		
		


		<!-- 操作多选 -->
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="checkbox" name="hobby" value="1" />  1
			<input type="checkbox" name="hobby" value="2"  /> 2
			<input type="checkbox" name="hobby" value="3"  /> 3
			<button type="button" onclick="getCheckbox();" >获取多选内容</button>
		</form>
		
		<!-- 获取下拉框 -->
		<form id='myform' name="myform9" action="" method="">		
			来自:
			<select id="ufrom" name="ufrom">
				<option value="-1" >请选择</option>
				<option value="0" selected="selected">北京</option>
				<option value="1">上海</option>
			</select><br />
			<button type="button" onclick="getSelect();" >获取多选内容</button>
		</form>
		
		<script type="text/javascript">
			//获取元素内容
			function getTxt(){
				// 1)、通过 id 获取：document.getElementById(元素 id);
				var uname = document.getElementById("uname");
				console.log(uname.value);
				
				//2)、通过 form.名称形式获取: myform.元素名称;    name属性值
				var upwd = document.myform1.upwd;
				console.log(upwd);
				console.log(upwd.value);
				
				//3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
				var hid = document.getElementsByName("uno")[0];
				console.log(hid.value);
				
				// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
				var texta = document.getElementsByTagName("textarea")[0];
				console.log(texta.value);
			}
			
			//获取单选按钮中选中项
			function getRadio(){
				//获取所有单选
				var rads = document.getElementsByName("rad");
				
				//遍历每个单选
				for(var i = 0; i < rads.length; i++){
					if(rads[i].checked){
						console.log(rads[i].value);
					}
				}
			}
		
			//获取多选按钮中选中项
			function getCheckbox(){
				//获取所有多选
				var hobbys = document.getElementsByName("hobby");
				
				//遍历每个多选
				var str ="";
				for(var i = 0; i < hobbys.length; i++){
					if(hobbys[i].checked){
						str += hobbys[i].value + ",";
					}
				}
				console.log(str.substring(0,str.length-1));
			}
			
			//获取下拉选项
			function getSelect(){
				//获取下拉框
				var select = document.getElementsByName("ufrom")[0];
				//获取下拉框的选项
				var options = select.options;
				//获取下拉框选中索引
				var index = select.selectedIndex;
				//获取选中项 
				console.log(options[index]);
				//获取选中项的值
				console.log(select.value);
			}
		</script>
	</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS获取表单中的元素和取值方法

本文链接: https://www.lsjlt.com/news/147404.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341