JavaScript学习笔记——对表单的操作

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>