动态生成文本框并获取数据-阿里云开发者社区

动态生成文本框并获取数据

2022-12-05 205

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 动态生成文本框并获取数据

首先来描述一下业务需求：如图所示，当点击‘增加登录参数’按钮，会动态生成参数文本框，并能获取到数据

一、动态生成文本框

1、页面代码

        <%--Content  用来新增文本框 --%>
  <div style="" id="Content">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;color: #555;">登录参数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="paramName" required lay-verify="required"
                               placeholder="请输入参数名如：username" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="">
                        <input type="text" name="paramValue" required lay-verify="required" placeholder="请输入参数值如：abc"
                               autocomplete="off" class="layui-input">
                    </div>
    </div>
    <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;color: #555;"></label>
                    <div class="layui-input-inline">
                        <a type="button" id="add" onclick="addParam()"  autocomplete="off"
                           class="layui-input"
                           style="color: #0000FF;text-decoration:underline;line-height: 30px">增加登录参数</a>
                    </div>
    </div>

页面主要是通过一个div包含组件内容，通过一个点击按钮，触发文本框添加 addParam() 事件。

另外，我使用的是layui框架，得导入对应的css和js

      <link rel="stylesheet" href="/assets/layuiadmin/layui/css/layui.css" media="all">
      <script src="/js/jquery-1.8.3.min.js"></script>
      <script src="/assets/assets/layui.all.js"></script>

2、js代码

//动态添加文本框
    function addParam() {
        $("#Content").append('<div class="layui-form-item">\n' +
            '                    <label class="layui-form-label" style="width: 120px;color: #555;"></label>\n' +
            '                    <div class="layui-input-inline">\n' +
            '                        <input type="text"  name="paramName" required lay-verify="required"\n' +
            '                               placeholder="请输入参数名如：username"  autocomplete="off" class="layui-input">\n' +
            '                    </div>\n' +
            '                    <div class="layui-input-inline">\n' +
            '                        <input type="text"  name="paramValue" required lay-verify="required"  placeholder="请输入参数值如：abc"\n' +
            '                               autocomplete="off" class="layui-input"> \n' +
            '                    </div>\n    ' +
            '                    <div class="layui-input-inline" style="width: 30px">\n' +
            '                        <a type="button" onclick="delDevelopmentNumber(this)" style="display: inline-block"><i class="layui-icon" style="width: 18px;height: 18px;text-align: center;line-height: 26px">&#xe640;</i></a>\n' +
            '                    </div>\n' +
            '                </div>');
    }
    //移除文本框
    function delDevelopmentNumber(e) {
        //console.info(e);
       // console.info($(e).parent().parent());
        $(e).parent().parent().remove();
    }
    // 获取输入参数数据
    function getParam(){
        var paramName=[];
        var paramValue=[];
        var paramlist=[];
// 获取name为paramName输入框的值，并存入paramName
    $("#Content input[name='paramName']").each(function () {
        // console.log(this.value);
       paramName.push(this.value);
    });
    // 获取name为paramValue输入框的值，并存入paramValue
        $("#Content input[name='paramValue']").each(function () {
            // console.log(this.value);
            paramValue.push(this.value);
        });
        for(var i=0;i<paramName.length;i++){
            var param={};//创建 param json对象
            param.name=paramName[i];
            param.value=paramValue[i];
            paramlist[i]=param;
        }
    //控制台输出获取值
            console.log(paramlist)
    }
</script>