javascript之表单

长平狐 发布于 2012/11/12 11:45
阅读 35
收藏 0

漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获.

写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.


1.Form对象

除了通过ID TagName等来获得form对象  还可以直接通过document.formName获得

 例子1-1:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
vara = document.form1;
alert(a);
}
</script>
 
</head>
 
<body>
<formid="form1" name="form1" method="post"action="">
  <p>
    <label>
      <input type="radio"name="RadioGroup1" value="A" id="RadioGroup1_0"/>
      AA</label>
    <br />
    <label>
      <input type="radio"name="RadioGroup1" value="B" id="RadioGroup1_1"/>
      BBB</label>
    <br />
    <label>
      <input type="radio"name="RadioGroup1" value="C" id="RadioGroup1_2"/>
      CCC</label>
    <br />
  </p>
</form>
</body>
</html>

注意:如果name重名了  返回一个节点列表NodeList(尽量不要重名),可以通过索引访问

 

2.获取表单元素

 

1)在form 访问表单控件 ,可直接通过name访问(同样重名会返回一个类数组)

 

window.onload =function (){
var a = document.form1;
alert(a.RadioGroup1[0].value);//返回A
}

 

2 form对象有个elements属性,包含了所有的表单控件(不包括div之类的)

window.onload =function (){
var a = document.form1;
alert(a.elements.length);//返回3
}
 

3form对象有个onsubmit事件  ,当表单提交,就会发生submit事件,我们可以通过这个来检测内容是否正确

返回false  就不会提交

 
window.onload =function (){
varf = document.form1;
f.onsubmit=function(){
if(true/*要检测内容*/) return true;
else return false;}
}
 

4.checked

单选按钮和复选框 都有一个checked属性 ,表示是否被选中

window.onload =function (){
var f = document.form1;
if(f.RadioGroup1[0].checked) alert(true);//如果被选中,checked属性就是true ,就会返回true
}
 

 

5.文本框

文本框的value表示内容  defaultValue表示默认内容

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
var f = document.form1;
f.onsubmit=function(){alert(f.input.value);}
}
</script>
 
</head>
 
<body>
<formid="form1" name="form1" method="post"action="aaa">
  <input type="text"value="阿斯蒂芬" name='input'/>
  <input name=""type="submit" />
</form>
</body>
</html>


 

6.复选框select对象

 

1select对象有个value属性,表示当前选中的内容

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
var f = document.form1;
f.onsubmit=function(){alert(f.s.value);return false;}
}
</script>
 
</head>
 
<body>
<formid="form1" name="form1" method="post"action="aaa">
 <select name="s">
   <optionvalue="A">a</option>
   <optionvalue="B">b</option>
 </select>
  <input name=""type="submit" />
</form>
</body>
</html>
//点击提交返回A


 

2)有个selectedIndex属性  ,表示选中的内容的下标   第一个为0,第二为1

window.onload =function (){
var f = document.form1;
f.onsubmit=function(){alert(f.s.selectedIndex);return false;}
}
//如果选中第一个返回0

 

3)有个options类数组,包含了所有的option

window.onload =function (){
varf = document.form1;
f.onsubmit=function(){alert(f.s.options.length);return false;}
}
//返回2

注意这个options和数组很像,可以改变length  ,可以直接对options[0]赋值

var o = newOption("t",'v');

f.options[0] = o;

 

3)添加option

可以通过creatElement appendChild方法添加

但是有更好的方法

var f = document.form1.s;//获得select对象
var o = new Option("t",'v');//创建一个option对象  new Option('text值','value值')
f.add(o,f.options[0]);//select对象的add方法 添加option  add(‘要添加的option对象’,‘已存在的option对象’)将会添加到这个已存在对象的前面  如果想要添加到最后 add(‘要添加对象’,null);

 

4)删除option

selectremove方法  select.remove(下标)

window.onload =function (){
var f = document.form1.s;
var o = new Option("t",'v');
f.remove(0);
}



原文链接:http://blog.csdn.net/rainkin1993/article/details/7880483
加载中
返回顶部
顶部