JavaScript DOM表单相关操作之获取表单数据的方式

时间：2024-01-23 20:45:25

在与表单相关的操作中，我们用的最多的就是获取表单中的数据。想要获取指定输入框的数据，首先就需要获取到这个输入框对象。

1、通过id属性获取表单数据

​

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <input type="text" id="username">
    <button type="button" onclick="getObj()">获取表单对象</button>
</form>
</body>
<script>
    function getObj(){
        var obj = document.getElementById('username');
        console.log(obj);
    }
</script>
</html>

// 通过表单元素特有的一些属性和方法就可以操作表单了，例如通过表单元素的属性获取到表单元素的值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <input type="text" id="username">
    <button type="button" onclick="getObj()">获取表单对象</button>
</form>
</body>
<script>
    function getObj(){
        var obj = document.getElementById('username');
        var value = obj.value;  // 获取表单元素的值
        console.log(value);
    }
</script>
</html>

2、通过name属性获取表单数据

​

// name属性在表单中是最常见的，服务器端获取表单提交的数据主要就是通过name属性来识别不同输入框的值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <input type="text" name="username">
    <button type="button" onclick="getObj()">获取表单对象</button>
</form>
</body>
<script>
    function getObj(){
        var obj = document.getElementsByName('username');
        console.log(obj);
    }
</script>
</html>

// 通过name属性获取的表单数据并不是一个具体的表单元素，而是一个节点数组，这个数组的第一个元素是一个
// input对象，这样我们想要得到某个元素只需要通过该与纳素的数组下标就可以实现
function getObj(){
        var obj = document.getElementsByName('username');
        console.log(obj);
        console.log(obj[0].value)
}

3、通过标签名获取表单数据

​

// 我们还可以通过标签名来获取表单数据，常见的用法就是获取input标签元素
// 得到的是一个数组，循环这个数组，通过判断每个对象的type或name属性来得到指定的表单数据
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    用户名：<input type="text" name="username"><br>
    密  码：<input type="text" name="password"><br>
    性  别：<input type="radio" name="sex" value="男">男<br>
            <input type="radio" name="sex" value="女">女<br>
    爱  好：<input type="checkbox" name="hobby" value="php">php<br>
            <input type="checkbox" name="hobby" value="python">python<br>
            <input type="checkbox" name="hobby" value="javascript">javascript
    <button type="button" onclick="getObj()">获取表单对象</button>
</form>
</body>
<script>
    function getObj(){
        var obj = document.getElementsByTagName('input'); // 获取所有input对象
        var hobbys = new Array();  // 选中的爱好
        // 循环遍历数组中的对象
        for(i=0;i<obj.length;i++){
            // 通过name进行判断，得到对应的表单对象
            if (obj[i].name == 'username'){
                console.log('用户名为：' + obj[i].value);
            }else if (obj[i].name == 'password'){
                console.log('密码为：' + obj[i].value);
            }else if (obj[i].name == 'sex'){
                // 进行radio的选中判断
                if(obj[i].checked == true){
                    console.log('性别为：' + obj[i].value);
                }
            }else if (obj[i].name == 'hobby'){
                // 进行checkbox的选中判断
                if (obj[i].checked == true){
                    // console.log(hobbys.length);
                    hobbys[hobbys.length] = obj[i].value;
                }
            }
        }
        console.log(hobbys);
    }
</script>
</html>

相关文章