javascript-对表单的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <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();
1
2
3
4
| //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
1
2
3
4
| //var myform=document.forms[0];
//var myform=document.forms["myform"];
//var myform=document.forms.myform;
//alert(myform.name)
|
3>通过name直接获取“（只适用于表单）
document.name
1
2
| //var myform=document.myform;
//alert(myform.name);
|
二、获得表单元素的引用
1>直接获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
1
2
3
4
5
6
| //直接获取
// var names=document.getElementById("names").value;
// alert(names)
//var names=document.getElementsByName("names")[0].value
// alert(names)
|
2>通过集合来获取
表单对象.elements 获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements[“name”]
表单对象.elements.name
1
2
3
4
5
6
7
| //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
1
2
3
4
5
| //var age=document.myform.age.value;
//alert(age);
// var info=document.myform.info.value;
// alert(info)
|
三、表单元素共同的属性和方法
** 1>获取表单元素的值**
表单元素对象.value 获取或是设置值
1
2
| // document.getElementById("fom1").names
// document.forms[0].elements[0]
|
** 2>属性**
disabled 获取或设置表单控件是否禁用 true false
1
2
3
| //disabled
//var names=document.myform.names.disabled =true;
//var school=document.myform.school.disabled =true;
|
form 指向包含本元素的表单的引用
1
2
3
| //form
//var age=document.forms[0].elements.age.form
//alert(age.name);
|
** 3>方法**
blur()失去焦点
focus() 获得焦点
1
2
| //foucs
var name=document.forms.myform.elements.names.focus();
|
四、文本域
***********************************
操作文本域的值
value 属性 设置或者获取值
1
2
3
| //文本域
//var names=document.forms[0].elements.names.value="lisi";
//alert(names)
|
***********************************
五、单选按钮
*******************************************
checked 返回或者设置单选的选中状态
true 选中 false 未选中
value 属性 获取选中的值，必须先判断选中状态。
1
2
3
4
5
6
7
| 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 属性 获取选中的值，必须先判断选中状态。
1
2
3
4
5
6
| 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 设置或返回下拉框被选中的索引号
1
2
3
4
5
6
7
| //var school=document.myform.school;
// var school=document.myform.school.options;
//alert(school.length)
//selected设置选中状态
//school[1].selected=true;
//selectedIndex设置选中状态
//school.selectedIndex=2;
|
************************************************
八、文本区域
***************************************
value 操作值
1
2
3
| <form name="myform">
<textarea name="info" rows="7" cols="60"></textarea>
</form>
|
九、验证表单
1.事件
onsubmit 当表单提交的时候触发的事件
onblur
onfocus
onchange
2.return false; 阻止事件的默认行为(适用于所有事件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <!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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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>
|
