美文网首页
javascript-对表单的操作

javascript-对表单的操作

作者: ssttIsme | 来源:发表于2020-01-04 20:30 被阅读0次

    javascript对表单的操作

    一、获取对表单的引用

    A.直接通过定位的方式获取

    document.getElementById("表单id");
    document.getElementsByName("表单name")[下标];
    document.getElementsByTagName("form")[下标];
    

    B.通过集合的方式来获取

    document.forms[下标]
    document.forms["表单name"]
    document.forms.表单name
    

    C.通过name直接获取
    document.表单name

    <body>
    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username"/><br/>
        年龄:<input type="text" name="age"/><br/>
        性别:<input type="radio" name="gender" value="man"/>男
        <input type="radio" name="gender" value="woman"/>女<br/>
        爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
        <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
        <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        简介:<br/>
        <textarea cols="60" rows="10" name="info"></textarea><br/>
        <input type="button" value="提交"/>
    </form>
    <div id="content"></div>
    <script>
        var div=document.getElementById("content");
        /*var myForm=document.getElementById("form1");
       div.innerHTML=myForm.name;*/
    
        /*var myForm=document.getElementsByName("myForm")[0];
        div.innerHTML=myForm.name;*/
    
       /* var myForm=document.getElementsByTagName("form")[0];
        var div=document.getElementById("content");
        div.innerHTML=myForm.name;*/
    
       /*var myForm=document.forms[0];
        div.innerHTML=myForm.name;*/
    
       /*var myForm=document.forms["myForm"];
       div.innerHTML=myForm.name;*/
    
       /*var myForm=document.forms.myForm;
       div.innerHTML=myForm.name;*/
    
       var myForm=document.myForm;
       div.innerHTML=myForm.name;
    </script>
    </body>
    

    二、获取表单元素的引用

    A.直接获取

    document.getElementById("表单元素id");
    document.getElementsByName("表单元素name")[下标];
    document.getElementsByTagName("表单元素")[下标];
    

    B.通过集合的方式来获取
    表单对象.elements获取表单里面所有元素的集合

    表单对象.elements[下标]
    表单对象.elements[表单元素name]
    表单对象.elements.表单元素name
    

    C.直接通过name的方式
    document.表单name.表单元素name

    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" id="username" value="张三"/><br/>
        年龄:<input type="text" name="age"/><br/>
        性别:<input type="radio" name="gender" value="man"/>男
        <input type="radio" name="gender" value="woman"/>女<br/>
        爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
        <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
        <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        简介:<br/>
        <textarea cols="60" rows="10" name="info"></textarea><br/>
        <input type="button" value="提交"/>
    </form>
    <div id="content"></div>
    <script>
        var div=document.getElementById("content");
        // var username=document.getElementById("username").value;
        // var username=document.getElementsByName("username")[0].value;
        // var username=document.getElementsByTagName("input")[0].value;
        //var eles=document.myForm.elements;
        //alert(eles);
        //var username=document.myForm.elements[0].value;
        //var username=document.myForm.elements["username"].value;
        //var username=document.myForm.elements.username.value;
        var username=document.myForm.username.value;
        div.innerHTML=username;
    </script>
    

    三、表单元素共同的属性和方法

    3.1获取表单元素的值

    表单元素对象.value获取或者设置值

    3.2属性

    disabled获取或者设置表单是否禁用

    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" id="username" value="张三"/><br/>
        年龄:<input type="text" name="age" value="13"/><br/>
        性别:<input type="radio" name="gender" value="man"/>男
        <input type="radio" name="gender" value="woman"/>女<br/>
        爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
        <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
        <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        简介:<br/>
        <textarea cols="60" rows="10" name="info"></textarea><br/>
        <input type="button" value="提交"/>
    </form>
    
    <script>
        document.myForm.username.disabled=true;
        document.myForm.address.disabled=true;
    </script>
    

    form指向包含本元素的表单的引用

    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" id="username" value="张三"/><br/>
        年龄:<input type="text" name="age" value="13"/><br/>
        性别:<input type="radio" name="gender" value="man"/>男
        <input type="radio" name="gender" value="woman"/>女<br/>
        爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
        <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
        <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        简介:<br/>
        <textarea cols="60" rows="10" name="info"></textarea><br/>
        <input type="button" value="提交"/>
    </form>
    <div id="content"></div>
    <script>
        var div=document.getElementById("content");
        var age=document.forms[0].elements.age;
        div.innerHTML="age:"+age.value+" age所在表单名为:"+age.form.name;
    </script>
    

    3.3方法

    blur()失去焦点
    foucus()获得焦点

    <body>
    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" /><br/>
        <input type="button" value="提交"/>
    </form>
    <script>
        var username=document.myForm.username;
        username.focus();
    </script>
    
    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" value="张三" onblur="getUserName()"/><br/>
    </form>
    <div id="content"></div>
    <script>
        var div=document.getElementById("content");
        document.myForm.username.focus();
        function getUserName(){
            div.innerHTML=document.myForm.username.value;
        }
    </script>
    

    四、表单元素特殊属性和方法

    4.1、文本域

    <input type="text"/>
    操作文本域的值
    value属性,设置或者获取值

    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" value="张三"/><br/>
    </form>
    <div id="content"></div>
    <script>
        var div=document.getElementById("content");
        var username=document.forms[0].elements.username.value;
        div.innerHTML=username;
    </script>
    
    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" value="张三"/><br/>
    </form>
    <div id="content"></div>
    <script>
        var div=document.getElementById("content");
        var username=document.forms[0].elements.username.value="李四";
        div.innerHTML=username;
    </script>
    

    提示内容例子

    <form name="myForm" id="form1" action="" method="post">
      <input type="text" name="q" value="请输入搜索内容" onfocus="if (this.value=='请输入搜索内容')this.value='' "
      onblur="this.value=(this.value==''?'请输入搜索内容':this.value)"/>
        <button>搜索</button>
    </form>
    

    4.2、单选按钮

    checked返回或者设置单选按钮的选中状态。true选中,false未选中。value属性:获取值。获取选中的值,
    必须先判断选中状态

    <form name="myForm" id="form1" method="post">
        性别:<input type="radio" name="gender" value="man"/>男
        <input type="radio" name="gender" value="woman" checked/>女<br/>
        <input type="button" onclick="getGender()"  value="提交">
    </form>
    <div id="content"></div>
    <script>
        var gender=document.myForm.gender;
       function getGender(){
           for (var i=0;i<gender.length;i++){
               if(gender[i].checked){
                  alert(gender[i].value);
               }
           }
       }
    </script>
    

    4.3、多选按钮

    checked返回或者设置多选按钮的选中状态。true选中,false未选中。value属性:获取值。获取选中的值,
    必须先判断选中状态

    <form name="myForm" id="form1" method="post">
        爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
        <input type="checkbox" name="hobby[]" value="yoga" checked/>瑜伽
        <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
        <input type="button" onclick="getHobby()"  value="提交">
    </form>
    <div id="content"></div>
    <script>
       function getHobby(){
           var div=document.getElementById("content");
           var hobby=document.myForm["hobby[]"];
           var hobbyArray=[];
           for (var i=0;i<hobby.length;i++){
               if(hobby[i].checked){
                  hobbyArray.push(hobby[i].value);
               }
           }
           div.innerHTML=hobbyArray;
       }
    </script>
    

    4.4、下拉框

    selected返回或者设置下拉框的选中状态。true选中,false未选中。
    selectedIndex设置或者返回下拉框被选中的索引号。

    <form name="myForm" id="form1" method="post">
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        <input type="button" onclick="getAddr()"  value="提交">
    </form>
    <div id="content"></div>
    <script>
        var address=document.myForm.address;
        address[1].selected=true;//上海
    </script>
    
    <form name="myForm" id="form1" method="post">
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        <input type="button" onclick="getAddr()"  value="提交">
    </form>
    <div id="content"></div>
    <script>
        var address=document.myForm.address;
        address.selectedIndex=1;//上海
    </script>
    
    <form name="myForm" id="form1" method="post">
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        <input type="button" onclick="getAddr()"  value="提交">
    </form>
    <hr>
    <div id="content"></div>
    <script>
           var div=document.getElementById("content");
           var address=document.myForm.address;
           function getAddr() {
               div.innerHTML=address[address.selectedIndex].value;
           }
    </script>
    
    <form name="myForm" id="form1" method="post">
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        <input type="button" onclick="getAddr()"  value="提交">
    </form>
    <hr>
    <div id="content"></div>
    <script>
           var div=document.getElementById("content");
           var address=document.myForm.address;
           address.onchange=function () {
               div.innerHTML=address[address.selectedIndex].value;
           }
    </script>
    

    4.5、文本区域

    <textarea></textarea>操作文本区域的值value属性,设置或者获取值

    <form name="myForm" id="form1" action="" method="post">
        简介:<br/>
        <textarea cols="60" rows="10" name="info"></textarea>
        <div id="content">一共能输入20个字符,已输入0个,还剩余20个</div>
        <input type="button" value="提交"/>
    </form>
    
    <script>
        var div=document.getElementById("content");
        var info=document.myForm.info;
        function check(str) {
            var num=0;
            for(var i=0;i<str.length;i++){
                if(str.charCodeAt(i)>=0&&str.charCodeAt(i)<=255){
                    num++;
                }else{
                    num=num+2;
                }
            }
            return num;
        }
        info.onkeyup=info.onkeydown=function () {
            var str=info.value;
            var lengths=check(str);
            var totalLength=20;
            if(lengths>=totalLength){
                lengths=totalLength;
                info.style.borderColor="red";
                info.value=str.substring(0,totalLength);
            }else{
                info.style.borderColor="cyan";
            }
            div.innerHTML="一共能输入"+totalLength+"个字符,已输入"+lengths+"个,还剩余"+(totalLength-lengths)+"个";
        }
    </script>
    

    五、验证表单

    1.事件
    onsubmit当表单提交的时候触发的事件
    onblur失去焦点
    onfocus获得焦点

    <form name="myForm" id="form1" action="" method="post" onsubmit="return valid(this)">
        姓名:<input type="text" name="username" /><br/>
        年龄:<input type="text" name="age" /><br/>
        性别:<input type="radio" name="gender" value="man"/>男
        <input type="radio" name="gender" value="woman"/>女<br/>
        爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
        <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
        <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
        地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
        简介:<br/>
        <textarea cols="60" rows="10" name="info"></textarea><br/>
        <input type="submit" value="提交"/>
    </form>
    <script>
        function valid(obj) {
            if(!obj.username.value){
                alert("姓名不能为空!") ;
                return false;
            }
            if(!obj.age.value){
                alert("年龄不能为空!") ;
                return false;
            }
            var status=0;
            for(var i=0;i<obj.gender.length;i++){
                if(obj.gender[i].checked){
                    status=1;
                }
            }
            if(!status){
                alert("请选择性别");
                return false;
            }
        }
    </script>
    

    提交方法

    表单方法表单对象.submit()

    <form name="myForm" id="form1" action="" method="post">
        姓名:<input type="text" name="username" /><br/>
        <input type="button" value="提交" name="submitBtn"/>
    </form>
    <script>
    
            var submitBtn=document.myForm.submitBtn;
            submitBtn.onclick=function () {
                document.myForm.action="history1.html";
                document.myForm.submit();
            };
            setTimeout(function(){
                alert("超时,结束考试");
                document.myForm.action="history1.html";
                document.myForm.submit();
            },3000);
    </script>
    

    相关文章

      网友评论

          本文标题:javascript-对表单的操作

          本文链接:https://www.haomeiwen.com/subject/kjufactx.html