JS表单对象

JS表单对象

表单是页面向后端传输数据的一个非常常见的方式,因此在发送请求之前,我们在页面进行一些校验,不仅可以节省不必要的错误传输,也可以提高用户的体验.

获取表单

<form id='myform' name="myform"  action="" method="post"></form>	
<form id='myform2' name="myform2" action="" method="post"></form>

1>、document.表单名称

var myform = document.myform;
console.log(myform);

2>、document.getElementById(表单 id);

var myform2 = document.getElementById(“myform2”);
console.log(myform2);

3>、document.forms[表单名称]

var forms = document.forms; //所有表单

console.log(forms);

forms = document.forms[myform];//获取myform这个表单

console.log(forms);

4>、document.forms[索引]; //从 0 开始

console.log(forms[1]);

获取表单元素

元素分类
表单元素
元素节点.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’

获取下拉选项

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属性

提交表单

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按钮 + οnclick="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按钮 + οnclick="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>