JavaScript操作表单元素

怼烎@ 2021-09-30 15:16 361阅读 0赞

表单元素在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。下面将介绍一些常用的使用JavaScript操作表单元素的方法。

# 1、表单（form） #

### 1.1 使用JavaScript脚本提交form表单 ###

//提交表单
    myForm.method = 'POST';
    myForm.action = "action.html";
    myForm.submit();

## 1.2 使用JavaScript脚本重置form表单 ##

//重置表单
    document.getElementsByName("myForm")[0].reset();

# 2、文本框（text） #

## 2.1 禁用文本框 ##

//禁用文本框
    document.getElementById("txtBlogInfo").setAttribute("disabled", "disabled");

**示例：**创建页面，使用JavaScript禁用文本框。

<html>
    <head>
        <title>使用JavaScript禁用文本框</title>
        <meta name="author" content="pan_junbiao的博客">
        <style>
            input{
                padding: 3px;
                width: 300px;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>博客信息：</td>
                <td><input type="text" id="txtBlogInfo"/></td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td><input type="text" id="txtBlogUrl"/></td>
            </tr>
        </table>
    </body>
    <script>
        window.onload = function () {
            //禁用文本框
            let blogInfo = document.getElementById("txtBlogInfo");
            let blogUrl = document.getElementById("txtBlogUrl");
    
            //文本框赋值
            blogInfo.value = "您好，欢迎访问 pan_junbiao的博客!";
            blogUrl.value = "https://blog.csdn.net/pan_junbiao";
    
            //禁用文本框
            blogInfo.setAttribute("disabled", "disabled");
            blogUrl.setAttribute("disabled", "disabled");
        }
    </script>
    </html>

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

## 2.2 文本框获得焦点 ##

document.getElementById("txtBlogInfo").focus();

# 3、下拉列表框（select） #

在Web项目开发中，经常使用下拉框的级联功能，下面将介绍如何使用JavaScript实现下拉框的动态绑定与级联功能。

## 3.1 清空下拉框选项 ##

在每次绑定下拉框选择项数据前，都需要先清除该下拉框原有的选择项数据。

//获取下拉框对象
    let selProvince = document.getElementById("selProvince");
     
    //清空下拉框选项
    selProvince.options.length = 0;
    selProvince.add(new Option("请选择", ""));

## 3.2 动态绑定下拉框选项 ##

下拉框对象的 add() 方法用于向该下拉框中添加一个 <option> 元素。

**语法：**

selectObject.add(option,before)

**参数说明：**

option：必需。要添加选项元素。必需是 option 或 optgroup 元素。Option 对象代表 HTML 表单中下拉列表中的一个选项。

before：非必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。

//获取下拉框对象
    let selProvince = document.getElementById("selProvince");
     
    //绑定下拉框选项
    let json = '[{"key":"广东省","value":"1001"},{"key":"湖南省","value":"1002"}]';
    let arr = eval("(" + json + ")"); //转换后的JSON对象
    for (let i = 0; i < arr.length; i++) {
        let key = arr[i].key;
        let value = arr[i].value;
        selProvince.add(new Option(key, value));
    }

## 3.3 onchange事件 ##

给下拉框添加 onchange 事件，Select 对象的 onchange 属性引用了一个事件句柄函数。当改变选择时调用的事件句柄。

# 4、复选框（checkbox） #

## 4.1 选中复选框项。 ##

//选中复选框项
    document.getElementById("ckbId").checked = true;

## 4.2 判断复选框是否有选中 ##

//判断复选框是否选中
    let isCheck = false;
    for (let i = 0; i < myForm.hobby.length; i++) {
        if (myForm.hobby[i].checked) {
            isCheck = true;
            break;
        }
    }
    if (!isCheck) {
        alert("复选框未被选中");
        return;
    }

## 4.3 获取复选框选中的值 ##

//获取复选框对象
    let bobbyArr = document.getElementsByName("hobby");
    
    //获取选中值
    let result = "";
    for (let i = 0; i < bobbyArr.length; i++) {
        if (bobbyArr[i].checked) {
            result += bobbyArr[i].value + "；";
        }
    }

**示例：**实现复选框的全选、反选、校验、获取选中值。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>复选框的使用</title>
        <meta name="author" content="pan_junbiao的博客">
        <meta charset="UTF-8">
    </head>
    <body>
    <input id="lq" name="hobby" type="checkbox" value="篮球">
    <label for="lq">篮球</label><br>
    <input id="zq" name="hobby" type="checkbox" value="足球">
    <label for="zq">足球</label><br>
    <input id="ymq" name="hobby" type="checkbox" value="羽毛球">
    <label for="ymq">羽毛球</label><br>
    <input id="ppq" name="hobby" type="checkbox" value="乒乓球">
    <label for="ppq">乒乓球</label><br>
    <input id="yy" name="hobby" type="checkbox" value="游泳">
    <label for="yy">游泳</label><br>
    <input type="button" value="全选" onclick="checkAll()"/>
    <input type="button" value="反选" onclick="checkTurn()"/>
    <input type="button" value="校验" onclick="checkVerify()"/>
    <input type="button" value="获取选中值" onclick="getCheck()"/>
    </body>
    <script>
        //全选
        function checkAll()
        {
            //获取复选框对象
            let bobbyArr = document.getElementsByName("hobby");
    
            //将复选框设置为选中状态
            for(let i=0; i<bobbyArr.length; i++)
            {
                bobbyArr[i].checked = true;
            }
        }
    
        //反选
        function checkTurn()
        {
            //获取复选框对象
            let bobbyArr = document.getElementsByName("hobby");
    
            //将复选框设置为反选状态
            for(let i=0; i<bobbyArr.length; i++)
            {
                bobbyArr[i].checked = !bobbyArr[i].checked;
            }
        }
    
        //校验
        function checkVerify()
        {
            //获取复选框对象
            let bobbyArr = document.getElementsByName("hobby");
    
            //判断复选框是否选中
            let isCheck = false;
            for (let i = 0; i < bobbyArr.length; i++) {
                if (bobbyArr[i].checked) {
                    isCheck = true;
                    break;
                }
            }
            if (isCheck) {
                alert("复选框有选中项！");
            }
            else {
                alert("复选框无选中项！");
            }
        }
    
        //获取选中值
        function getCheck()
        {
            //获取复选框对象
            let bobbyArr = document.getElementsByName("hobby");
    
            //获取选中值
            let result = "";
            for (let i = 0; i < bobbyArr.length; i++) {
                if (bobbyArr[i].checked) {
                    result += bobbyArr[i].value + "；";
                }
            }
    
            //输出结果
            alert(result);
        }
    </script>
    </html>

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1][]

# 综合示例 #

**示例：**使用JavaScript操作表单元素，

**要求：**

（1）实现绑定用户信息功能。

（2）实现下拉框动态绑定与级联功能。

（3）提交表单前校验数据，并动态提交表单。

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 2][]

**完整代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>实现绑定用户信息</title>
        <meta name="author" content="pan_junbiao的博客">
        <style>
            table{
                border-top: 1px solid #000000;
                border-left: 1px solid #000000;
                border-collapse: collapse; /*设置单元格的边框合并为1*/
            }
            th, td{
                border-bottom: 1px solid #000000;
                border-right: 1px solid #000000;
                padding: 5px 10px;
            }
            select{
                width: 100px;
                padding: 3px;
            }
            .txtBox{
                padding: 3px;
                width: 300px;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
    <form action="" method="post" name="myForm">
        <table align="center">
            <caption>用户注册</caption>
            <tr>
                <th>博客信息：</th>
                <td>
                    <input class="txtBox" type="text" name="blogInfo"/>
                </td>
            </tr>
            <tr>
                <th>博客地址：</th>
                <td>
                    <input class="txtBox" type="text" name="blogUrl"/>
                </td>
            </tr>
            <tr>
                <th>省份：</th>
                <td>
                    <select name="selProvince" onchange="bindCity()">
                        <option>请选择</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>城市：</th>
                <td>
                    <select name="selCity" id="selCity">
                        <option>请选择</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>性别：</th>
                <td>
                    <input id="male" name="sex" type="radio" value="1"/>
                    <label for="male">男</label>
                    <input id="female" name="sex" type="radio" value="2"/>
                    <label for="female">女</label>
                    <input id="secrecy" name="sex" type="radio" value="3" checked="checked"/>
                    <label for="secrecy">保密</label>
                </td>
            </tr>
            <tr>
                <th>兴趣爱好：</th>
                <td>
                    <input id="lq" name="hobby" type="checkbox" value="篮球">
                    <label for="lq">篮球</label>
                    <input id="zq" name="hobby" type="checkbox" value="足球">
                    <label for="zq">足球</label>
                    <input id="ymq" name="hobby" type="checkbox" value="羽毛球">
                    <label for="ymq">羽毛球</label>
                    <input id="ppq" name="hobby" type="checkbox" value="乒乓球">
                    <label for="ppq">乒乓球</label>
                    <input id="yy" name="hobby" type="checkbox" value="游泳">
                    <label for="yy">游泳</label>
                </td>
            </tr>
            
            <tr>
                <td colspan="2" style="text-align: center; padding: 5px;">
                    <input class="b_button" type="button" value="提交" onclick="submitForm()"/>
                    <input class="b_button" type="button" value="重置" onclick="resetForm()"/>
                </td>
            </tr>
        </table>
    </form>
    <script>
        //初始化
        window.onload = function()
        {
            //绑定省份下拉框
            bindProvince();
    
            //获取用户对象
            let user = getUser();
    
            //绑定用户信息
            bindUser(user);
        }
    
        //绑定用户信息
        function bindUser(user)
        {
            myForm.blogInfo.value = user.blogInfo;
            myForm.blogUrl.value = user.blogUrl;
            myForm.selProvince.value = user.provinceCode;
            myForm.sex.value = user.sex;
            bindCity(user.cityCode); //获取城市下拉框，并绑定选中值
            bingHobby(user.hobby);   //绑定兴趣爱好（复选框）
        }
    
        //获取用户对象
        function getUser()
        {
            let user = {};
            user.blogInfo = "您好，欢迎访问 pan_junbiao的博客!";
            user.blogUrl = "https://blog.csdn.net/pan_junbiao";
            user.provinceCode = "1001";
            user.cityCode = "1001001";
            user.sex = 1;
            user.hobby = "篮球；羽毛球；游泳";
            return user;
        }
    
        //绑定省份下拉框
        function bindProvince()
        {
            //获取下拉框对象
            let selProvince = myForm.selProvince;
    
            //清空下拉框选项
            selProvince.options.length = 0;
            selProvince.add(new Option("请选择", ""));
    
            //绑定下拉框选项
            let json = '[{"key":"广东省","value":"1001"},{"key":"湖南省","value":"1002"}]';
            let arr = eval("(" + json + ")"); //转换后的JSON对象
            for (let i = 0; i < arr.length; i++) {
                let key = arr[i].key;
                let value = arr[i].value;
                selProvince.add(new Option(key, value));
            }
        }
    
        //获取城市下拉框，并绑定选中值
        function bindCity(selVaule)
        {
            //获取下拉框对象
            let selProvince = myForm.selProvince;
            let selCity = myForm.selCity;
    
            //清空下拉框选项
            selCity.options.length = 0;
            selCity.add(new Option("请选择", ""));
    
            //获取省份的选项值
            let province = selProvince.value;
    
            //根据省份获取城市列表
            let json = "";
            switch (province) {
                case "1001": {
                    json = '[{"key":"深圳市","value":"1001001"},{"key":"广州市","value":"1001002"}]';
                    break;
                }
                case "1002": {
                    json = '[{"key":"长沙市","value":"1002001"},{"key":"怀化市","value":"1002002"}]';
                    break;
                }
                default: {
                    break;
                }
            }
    
            if(json){
                //绑定下拉框选项
                let arr = eval("(" + json + ")"); //转换后的JSON对象
                for (let i = 0; i < arr.length; i++) {
                    let key = arr[i].key;
                    let value = arr[i].value;
                    selCity.add(new Option(key, value));
                }
            }
    
            //选中值
            if (selVaule) {
                selCity.value = selVaule;
            }
        }
    
        //绑定兴趣爱好（复选框）
        function bingHobby(hobbyStr)
        {
            if (!hobbyStr) {
                return;
            }
    
            var hArr = hobbyStr.split("；");
            for (let i = 0; i < hArr.length; i++) {
                for (let j = 0; j < myForm.hobby.length; j++) {
                    if (myForm.hobby[j].value == hArr[i]) {
                        myForm.hobby[j].checked = true;
                        break;
                    }
                }
            }
        }
    
        //提交
        function submitForm()
        {
            if (!myForm.blogInfo.value) {
                alert("请输入博客信息！");
                myForm.blogInfo.focus();
                return;
            }
    
            if (!myForm.blogUrl.value) {
                alert("请输入博客地址！");
                myForm.blogUrl.focus();
                return;
            }
    
            if (!myForm.selProvince.value) {
                alert("请选择省份！");
                return;
            }
    
            if (!myForm.selCity.value) {
                alert("请选择城市！");
                return;
            }
    
            //校验复选框是否选中
            let isCheck = false;
            for (let i = 0; i < myForm.hobby.length; i++) {
                if (myForm.hobby[i].checked) {
                    isCheck = true;
                    break;
                }
            }
            if (!isCheck) {
                alert("请选择兴趣爱好！");
                return;
            }
    
            //提交表单
            myForm.method = 'POST';
            myForm.action = "action.html";
            myForm.submit();
        }
    
        //重置
        function resetForm() {
            //重置表单
            document.getElementsByName("myForm")[0].reset();
    
            //清空下拉框选项
            let selCity = myForm.selCity;
            selCity.options.length = 0;
            selCity.add(new Option("请选择", ""));
        }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/2d4b73441504422891695b0fe5d2728f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1]: /images/20210724/d96064a954a74bda8c4336b7599254f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 2]: /images/20210724/85c20d08b18d4ccbb9c083cc5706d5d1.png