前端06-JS表单 获取表单、获取表单元素、提交表单

获取表单

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">
			//document.表单名称
			var myform = document.myform;
			console.log(myform);
			
			//document.getElementById(表单 id);
			var myform2 = document.getElementById("myform2");
			console.log(myform2);
			
			//document.forms[表单名称]
			var forms = document.forms;
			console.log(forms);
			
			//document.forms[索引]; //从 0 开始
			console.log(forms[1]);
		</script>

获取表单元素

元素分类
                表单元素
                    元素节点.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开始
                
            取单选按钮
                    若属性值为true表示被选中，否则未被选中    
                ​    选中状态设定：  checked='checked'  或  checked='true'  或  checked    
                ​    未选中状态设定：   没有checked属性   或  checked='false'
                
            获取下拉选项
            ​       选中状态设定：selected='selected'、selected=true、selected
            ​       未选中状态设定：不设selected属性

<form id='myform' name="myform" 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"  /> 2
			<button type="button" onclick="getCheckbox();">获取多选选中项</button>
		</form>
		
		<form id='myform' name="myform" 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" id="sub" name="sub">提交</button>
		</form>
		
		<script type="text/javascript">
			//获取元素内容
			function getTxt(){
				//通过 id 获取：document.getElementById(元素 id);
				var uname = document.getElementById("uname");
				console.log(uname.value);
				
				//通过 form.名称形式获取: myform.元素名称;    name属性值
				var form = document.myform;
				console.log(form.upwd.value);
				
				//通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
				var uno = document.getElementsByName("uno")[0];
				console.log(uno.value);
				
				//通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
				var inputs = document.getElementsByTagName("input");
				console.log(inputs[1].value);
			}
			
			
			
			//获取单选按钮选中项
			function getRadio(){
				var radios = document.getElementsByName("rad");
				for(var i = 0; i < radios.length; i++){
					if(radios[i].checked){
						console.log(radios[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));
			}
			
			//获取下拉选项
			document.getElementById("sub").onclick = function(){
				//获取下拉框
				var select = document.getElementById("ufrom");
				//获取下拉框的选项数组
				var options = select.options;
				//获取选中项的索引
				var index = select.selectedIndex;
				//获取选中项
				var selectedOp1 = options[index];
				var selectedOp2 = select.value;  //通过下拉框对象获取选中项的value
				console.log(selectedOp2);
			}
		</script>

提交表单

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

<form id='myform1' name="myform2" action="http://baidu.com" method="get">	
			<input  name="test"  id="uname"/>&nbsp;&nbsp;<span id="msg"></span><br />
			<!--通过js事件：sub()提交表单-->
			<input type="button" onclick="sub();" value="提交表单1" />
		</form>
		
		<form id='myform1' name="myform3" action="http://baidu.com" method="get">
			<input  name="test"  id="uname2"/>&nbsp;&nbsp;<span id="msg2"></span><br />
			<!--通过js事件：sub()提交表单-->
			<input type="submit" onclick="return sub2()" value="提交表单2" />
		</form>
		
		<form id='myform1' name="myform4" action="http://baidu.com" onsubmit="return sub4()" method="get">
			<input  name="test"  id="uname4"/>&nbsp;&nbsp;<span id="msg4"></span><br />
			<!--通过js事件：sub()提交表单-->
			<input type="submit" value="提交表单3" />
		</form>
		
		<script type="text/javascript">
			//使用普通button按钮+onclick事件+事件中编写代码:
			function sub(){
				//获取表单对象
				var myform2 = document.myform2;
				//获取用户输入的数据
				var uname = document.getElementById("uname").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg").innerHTML = "用户名不能为空";
					document.getElementById("msg").style.color = "red";
					//不能提交，阻止代码运行
					return;
				}
				
				//手动提交表单
				myform2.submit();
			}
		
			//使用submit按钮 + onclick="return 函数()" +函数编写代码: 
			function sub2(){
				//获取表单对象
				var myform3 = document.myform3;
				//获取用户输入的数据
				var uname = document.getElementById("uname2").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg2").innerHTML = "用户名不能为空";
					document.getElementById("msg2").style.color = "red";
					//不能提交，阻止代码运行
					return false;
				}
				return true;
			}
		
			//使用submit按钮 + onclick="return 函数()" +函数编写代码:
			function sub4(){
				//获取表单对象
				var myform4 = document.myform4;
				//获取用户输入的数据
				var uname = document.getElementById("uname4").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg4").innerHTML = "用户名不能为空";
					document.getElementById("msg4").style.color = "red";
					//不能提交，阻止代码运行
					return false;
				}
				return true;
			}
		</script>