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

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

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

20200401134307494.png

一、动态生成文本框

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>

3.页面实现效果

下面是实现的页面显示图

20200401134307494.png

通过点击【增加登录参数】,动态生成文本框。如下所示

20200401134307494.png

获取参数数据:

20200401134307494.png

本熊第一次写博客,希望能对大家有所帮助。哈哈。


相关文章
|
6月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
26天前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
44 4
|
3月前
|
JavaScript 前端开发 数据处理
在vue中的form表单中下拉框中的数据来自数据库查询到的数据
这篇文章介绍了如何在Vue框架的表单中将下拉框的数据通过后端接口从数据库动态查询并加载,包括前端HTML代码、JavaScript数据处理、后端接口实现以及表单提交的完整流程。
在vue中的form表单中下拉框中的数据来自数据库查询到的数据
|
6月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
|
前端开发 数据库
通过ajax调用数据字典数据动态添加到网页下拉列表
通过ajax调用数据字典数据动态添加到网页下拉列表
|
JSON 前端开发 数据格式
ajax读取数据后使用jqchart显示图表的方法
ajax读取数据后使用jqchart显示图表的方法
|
资源调度 前端开发
让后台查询+表格这种页面更加快速和简便
让后台查询+表格这种页面更加快速和简便
152 0
|
存储 JSON 前端开发
前端实现动态生成表格,是蒸的C
前言 动态生成表格是前端开发中非常重要的内容,常常是后端返回数据(大多是json类型),我们前端通过js循环来动态添加,所以这部分内容是十分重要的,今天我就来写写这部分内容,其实也很简单的,仔细看哦!!!
442 0
前端实现动态生成表格,是蒸的C
|
数据库
分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?
目的: 1、一个页面(DataList.aspx)可以显示多个模块的列表功能。      一般是有一个列表需求就需要一个aspx文件,如果有100个列表,那么就会有100个aspx文件,这么多的文件(包括.aspx.cs文件)里面的内容基本是一样的,这样写起来麻烦,管理起来也不容易,命名就是一个比较头痛的问题。
1073 0