JavaScript 输出或存储多文本框内所有值

最新推荐文章于 2023-03-19 15:54:04 发布

週进

最新推荐文章于 2023-03-19 15:54:04 发布

阅读量828

点赞数 6

分类专栏： JavaScript 文章标签： javascript jquery html bootstrap

本文链接：https://blog.csdn.net/weixin_51190886/article/details/120367191

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用JavaScript输出多文本框内所有值
多文本框图如下：
在这里插入图片描述
HTML代码如下：

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取所有文本框里面的值</title>
    <link rel="stylesheet" href="bootstrap-3.4.1/dist/css/bootstrap.css">
</head>

<body>
    <!-- 12栅格布局 -->
    <div class="container">
        <div class="row">


                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">家庭住址:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">出生日期:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-2 control-label">健康情况:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">身高:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">体重:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">联系号码:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入文本信息..">
                        </div>
                    </div>

                </div>
                <!-- 提交按钮 -->
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <button type="button" class="btn btn-info btn-lg list">提交</button>
                    </div>
                </div>
    </div>

为了让样式更加的好看，我CSS导入了bootstrap，当然不导入也行

    <link rel="stylesheet" href="bootstrap-3.4.1/dist/css/bootstrap.css">

JavaScript代码：

//导入jQuery
 <script src="js/jquery-3.6.0.min.js"></script>
 <script>
        //jquery工厂函数
        $(document).ready(function(){

            //按钮点击事件
            $(".list").click(function(){
                //获取到第一个文本框
                var textData = $("input[type='text']:first");
                //获取文本框的数量（长度）
                var texts = $("input[type='text']").length;

                //定义数组 用于存储所有文本框的值
                var listData = new Array();

                //根据文本框的数量进行循环
                for(var i=0; i<texts; i++){
                    // console.log($(textData).val());
                    //将当前的值加入到数组
                    listData[i] = $(textData).val();
                    //将当前的下一个元素替换当前
                    textData = $(textData).parents(".form-group").next().find("input[type='text']");
                }
                //输出数组
                 console.log(listData);

            })
        })

  </script>

输出的结果：在这里插入图片描述
按F12点击Console既能看到结果

（注意）
当然这种方法存在局限性，比如在中间加一个div或者别的元素，当next()-> find() 就会找不到input[type=‘text’]导致后面的元素都为undefined

週进

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 输出或存储多文本框内所有值

使用JavaScript输出多文本框内所有值多文本框图如下：HTML代码如下：<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫