JavaScript 与表单

2021-05-06 12:50:30 更新

B站关联视频教程:https://www.bilibili.com/video/BV1RA41137yd?p=21

目录:

一、事件绑定

二、表单提交 【表单提交验证的3种写法】

    1、绑定到<form上的 onSubmit事件

    2、绑定到真正的提交按钮上的

    3、绑定到伪提交按钮上

三、表单元素值的获取及赋值

1、js原生写法,主要有四种获取html对象写法: 

    1)document.getElementById("html元素的id属性值");

    2)document.getElementsByName("html元素的name属性值");

    3)document.getElementsByClassName('html元素的class属性值');

    4)document.getElementsByTagName('html元素的标签名')

2、主要有五种html表单元素:

    input 文本

    textarea 文本域

    radio 单选

    checkbox 多选

    select 下拉



内容:

一、事件绑定

常见常用事件:

1、鼠标;2、键盘;3、文档;4、表单


二、表单提交 【表单提交验证的3种写法】

1、绑定到<form上的 onSubmit事件 

<form action="abc.html" method="post"  onSubmit=" return checksub();">

<form action="" method="post" onsubmit="return checksub();">
    用户名:
    <input type="text" id="username" name="username"/><br/>
    密码:
    <input type="text" id="password" name="password"/><br/>
 
    <input type="submit" value="提交"/>
</form>

<script>
    function checksub(){
        uname=document.getElementById("username").value;
        alert("您的用户名是:"+uname);//弹出输入的用户名信息
        return false;
    }
</script>

2、绑定到真正的提交按钮上的

<input type="submit" value="提交" onClick="return checksub();" /> 

<form action="" method="post">
    用户名:
    <input type="text" id="username" name="username"/><br/>
    密码:
    <input type="text" id="password" name="password"/><br/>
 
    <input type="submit" value="提交" onclick="return checksub();"/>
</form>

<script>
    function checksub(){
        uname=document.getElementById("username").value;
        alert("您的用户名是:"+uname);//弹出输入的用户名信息
        return false;
    }
</script>

3、绑定到伪提交按钮上,如: 

<a href="#none" onClick="checksub();">提交按钮</a>

<form action="" method="post">
    用户名:
    <input type="text" id="username" name="username"/><br/>
    密码:
    <input type="text" id="password" name="password"/><br/>
    
    <a href="#none" onClick="checksub();">提交按钮</a>
   
</form>

<script>
    function checksub(){
        uname=document.getElementById("username").value;
        alert("您的用户名是:"+uname);//弹出输入的用户名信息
        return false;
    }
</script>

上面这个写法,可以验证数据,但是无法提交表单。针对伪提交按钮,我们需要操作form表单执行提交动作 document.getElementById("表单id").submit(); 看如下代码:

<form action="" method="post" id="f" >
    <input type="text" id="username" name="username" />
    <!--<input type="submit" value="提交" onclick="return checksub();"/>-->
    <a href="#none" onclick="checksub();">提交</a>
</form>
<script>
    function checksub(){
        //alert(666);
        username=document.getElementById("username").value;
        if(username){
            document.getElementById("f").submit();
        }else{
            alert("请输入用户名");
        }
    }

</script>


三、表单元素值的获取及赋值

1、js原生写法,主要有四种获取html对象写法: 

1)document.getElementById("html元素的id属性值");

2)document.getElementsByName("html元素的name属性值");

3)document.getElementsByClassName('html元素的class属性值');

4)document.getElementsByTagName('html元素的标签名')

//注:根据html的id,获得单个元素对象
document.getElementById("html元素的id属性值");//获得对象
document.getElementById("html元素的id属性值").value;//获得对象的value

//注:根据html的name,获得多个元素对象
document.getElementsByName("html元素的name属性值");

//注:根据html的class,获得多个元素对象
document.getElementsByName("html元素的class属性值");

//注:根据html的标签名,获得多个元素对象
document.getElementsByName("html元素的标签名");

1)document.getElementById("html元素的id属性值");

<input type="text" id="value" value="itwenda.com"/>
<script>
   var v=document.getElementById('value').value;
   document.write(v);//itwenda.com
</script>

2)document.getElementsByName("html元素的name属性值");

<input  type="radio" value='1' name='sex'/>男
<input  type="radio" value='0' name='sex'/>女
<script>
        var obj = document.getElementsByName("sex");
        document.write("<br/>");
        document.write(obj[0].value);//1
        document.write("<br/>");
        document.write(obj[1].value);//0
</script>

3)document.getElementsByClassName('html元素的class属性值')

<input type="text" id="value" class="classname" value="itwenda.com"/>
<script>
   var v=document.getElementsByClassName('classname')[0].value;
   document.write(v);//itwenda.com
</script>

4)document.getElementsByTagName('html元素的标签名')

<input type="text" id="value" class="classname" value="itwenda.com"/>
<script>
   var v=document.getElementsByTagName('input')[0].value;
   document.write(v);//itwenda.com
</script>

2、主要有五种html表单元素:

input text文本

获得:

<input type="text" id="value" placeholder="要获取的输入的值"/>
<input type="button" value="获得input值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value;
        alert(v);
    }
</script>

赋值:

<input type="text" id="value" placeholder="要获取的输入的值"/>
<input type="button" value="赋值input值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value=666;
        //alert(v);
    }
</script>

textarea 文本域

获得:

<textarea  id="value" placeholder="要获取的输入的值"></textarea>
<input type="button" value="获得textarea值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value;
        alert(v);
    }
</script>

赋值:

<textarea  id="value" placeholder="要获取的输入的值"></textarea>
<input type="button" value="定义textarea值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value=666;
        // alert(v);
    }
</script>


radio 单选

获的:

<input  type="radio" value='1' name='sex'/>男
<input  type="radio" value='0' name='sex'/>女

<input type="button" value="获得radio值" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        alert(select_value("sex"))
    }
    //str是radio的name
    function select_value(str){
        var obj = document.getElementsByName(str);
        var obj_value;
        for (var i=0; i < obj.length; i++){
            if (obj[i].checked){
                obj_value = obj[i].value;
            }
        }
        return obj_value;
    }
</script>

选中:【对象.checked = true;

<input  type="radio" id="value" value='1' name='sex'/>男
<input  type="radio" id="value" value='0' name='sex'/>女

<input type="button" value="赋值radio,选择值为1的‘男’" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        // alert(select_value("sex"))
        select_value("sex",1)
    }
    //str是radio的name
    function select_value(str,v){
        var obj = document.getElementsByName(str);
        var obj_value;
        for (var i=0; i < obj.length; i++){
            // if (obj[i].checked){
            //     obj_value = obj[i].value;
            // }
            if (obj[i].value==v){
               obj[i].checked = true;
            }
        }
        return obj_value;
    }
</script>


checkbox 多选

获得:

<input  type="checkbox" id="value" value='1' name='web[]'/>php
<input  type="checkbox" id="value" value='0' name='web[]'/>js

<input type="button" value="获得checkbox值" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        alert(select_value("web[]"))
    }
    //str是checkbox的name
    function select_value(str){
        var obj = document.getElementsByName(str);
       
        var obj_value=[];
        for (var i=0; i < obj.length; i++){
            if (obj[i].checked){
                obj_value.push(obj[i].value);
            }
        }
        return obj_value;
    }
</script>

选中:【对象.checked = true;

<input  type="checkbox" id="value" value='1' name='web[]'/>php
<input  type="checkbox" id="value" value='0' name='web[]'/>js

<input type="button" value="值为1或0的被选中,点击" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        // alert(select_value("web[]"))
        select_value("web[]","1,0")
    }
    //str是checkbox的name
    function select_value(str,v){
        var obj = document.getElementsByName(str);
       
        // var obj_value=[];
         arr=v.split(",");//[1,0]
        for (var i=0; i < obj.length; i++){
            // if (obj[i].checked){
            //     obj_value.push(obj[i].value);
            // }
            for(var j=0;j<arr.length;j++){
                if(arr[j]==obj[i].value){
                    obj[i].checked=true;
                }
            }
           
        }
        return obj_value;
    }
</script>


select 对象.selected= true;

获得:

<select name="web" id="value">
    <option value="1">男</option>
    <option value="0">女</option>
</select>

<input type="button" value="获得select值" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        alert(select_value("value"))
    }
    //str是select的id
    function select_value(str){
        var obj = document.getElementById(str);
        for (var i=0; i < obj.length; i++){
            if (obj[i].selected){
                obj_value=obj[i].value;
                break;
            }
        }
        return obj_value;
    }
</script>

选中:

<select name="web" id="value">
    <option value="1">男</option>
    <option value="0">女</option>
</select>

<input type="button" value="点击,选中女" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        // alert(select_value("value"))
        select_value("value",0)
    }
    //str是select的id
    function select_value(str,v){
        var obj = document.getElementById(str);
        for (var i=0; i < obj.length; i++){
            // if (obj[i].selected){
            //     obj_value=obj[i].value;
            //     break;
            // }
            if(obj[i].value==v){
                obj[i].selected=true;
                break;
            }
        }
        return obj_value;
    }
</script>

总结:

1、input text文本,select 下拉,textarea 文本域使用:document.getElementById("标签id")得到的是单个对象

document.getElementById("标签id")

2、radio 单选,checkbox多选使用:getElementsByName("标签name")得到的是多个对象。

注意:虽然radio是单选,但是也是多个值中选择。

document.getElementsByName("标签name")