javascript-对表单的操作
<form name="myform" id="form1" action="" method="post"> 姓名:<input type="text" name="names" id="names" value="zhangsan"><br/> 年龄:<input type="text" name="age" value="19"><br/> 性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/> 爱好:<input type="checkbox" name="like[]" value="play">玩 <input type="checkbox" name="like[]" value="run">跑步 <input type="checkbox" name="like[]" value="study">学习<br/> 毕业院校: <select name="school"> <option> 北京大学 </option> <option> 清华大学 </option> <option> 南开大学 </option> </select> <br/> 简介：<textarea cols="60" rows="10" name="info">测试</textarea><br/> <input type="button" value="提交"> </form>
一、获得表单引用
1>通过直接定位的方式来获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
//var myform=document.getElementById("form1"); //alert(myform.name); //var myform=document.getElementsByName("myform")[0]; // alert(myform.name);
2>通过集合的方式来获取引用
document.forms[下标]
document.forms["name"]
document.forms.name
//var myform=document.forms[0]; //var myform=document.forms["myform"]; //var myform=document.forms.myform; //alert(myform.name)
3>通过name直接获取“（只适用于表单）
document.name
//var myform=document.myform; //alert(myform.name);
二、获得表单元素的引用
1>直接获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
//直接获取 // var names=document.getElementById("names").value; // alert(names) //var names=document.getElementsByName("names")[0].value // alert(names)
2>通过集合来获取
表单对象.elements 获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements["name"]
表单对象.elements.name
//var eles=document.myform.elements.length; //alert(eles) //var names=document.myform.elements[0].value; //var names=document.myform.elements["names"].value; // var names=document.myform.elements.names.value; //alert(names)
3>直接通过name的形式
表单对象.name
//var age=document.myform.age.value; //alert(age); // var info=document.myform.info.value; // alert(info)
三、表单元素共同的属性和方法
1>获取表单元素的值
表单元素对象.value 获取或是设置值
// document.getElementById("fom1").names // document.forms[0].elements[0]
2>属性
disabled 获取或设置表单控件是否禁用 true false
//disabled //var names=document.myform.names.disabled =true; //var school=document.myform.school.disabled =true;
form 指向包含本元素的表单的引用
//form //var age=document.forms[0].elements.age.form //alert(age.name);
3>方法
blur()失去焦点
focus() 获得焦点
//foucs var name=document.forms.myform.elements.names.focus();
四、文本域
<input type="text" >
***********************************
操作文本域的值
value 属性 设置或者获取值
//文本域 //var names=document.forms[0].elements.names.value="lisi"; //alert(names)
***********************************
五、单选按钮
*******************************************
checked 返回或者设置单选的选中状态
true 选中 false 未选中
value 属性 获取选中的值，必须先判断选中状态。
var sex=document.myform.sex; sex[0].checked=true; for (var i=0; i<sex.length; i++) { if(sex[i].checked){ alert(sex[i].value) } }
*******************************************
六、多选按钮
*******************************************
checked 返回或者设置单选的选中状态
true 选中 false 未选中
value 属性 获取选中的值，必须先判断选中状态。
var likes=document.forms.myform["like[]"]; likes[2].checked=true; for (var i=0; i<likes.length; i++) { if(likes[i].checked){ alert(likes[i].value); }
*******************************************
七、下拉框
************************************************
selected 设置或返回下拉框的选中状态
true 选中 false 未选中
selectedIndex 设置或返回下拉框被选中的索引号
//var school=document.myform.school; // var school=document.myform.school.options; //alert(school.length) //selected设置选中状态 //school[1].selected=true; //selectedIndex设置选中状态 //school.selectedIndex=2;
************************************************
八、文本区域
***************************************
<textarea></textarea>
value 操作值
<form name="myform"> <textarea name="info" rows="7" cols="60"></textarea> </form>
var str=info.value;
***************************************
九、验证表单
1.事件
onsubmit 当表单提交的时候触发的事件
onblur
onfocus
onchange
2.return false; 阻止事件的默认行为(适用于所有事件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript-对表单的操作实例讲解(上)</title> <script> function check (obj) { if(obj.names.value==""){ alert("姓名不能为空"); return false; } if(obj.age.value==""){ alert("年龄不能为空"); return false; } var statu=0; for (var i=0; i<obj.sex.length; i++) { if(obj.sex[i].checked){ statu=1; } } if(!statu){ alert("性别不能为空"); return false; } } </script> </head> <body> <form name="myform" id="form1" action="" method="post" onsubmit=" return check(this)"> 姓名:<input type="text" name="names" id="names" ><br/> 年龄:<input type="text" name="age" ><br/> 性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/> 爱好:<input type="checkbox" name="like[]" value="play">玩 <input type="checkbox" name="like[]" value="run">跑步 <input type="checkbox" name="like[]" value="study">学习<br/> 毕业院校: <select name="school"> <option> 北京大学 </option> <option> 清华大学 </option> <option> 南开大学 </option> </select> <br/> 简介：<textarea cols="60" rows="10" name="info">测试</textarea><br/> <input type="submit" value="提交"> </form> </body> </html>
十、提交方法
表单的方法
表单对象.submit()
<script> window.onload=function () { var subs=document.myform.subs; subs.onclick=function () { document.myform.action="1.html"; document.myform.submit(); } setTimeout(function () { document.myform.action="2.html"; document.myform.submit(); },4000) } </script>