layui表单动态添加输入框

一、功能需求

新增表单内，点击加号按钮动态增加输入框

红色部分为新增的输入框

二、页面html代码

代码如下（示例）：

<div class="layui-card-body">
    <div class="layui-fluid">
        <form class="layui-form" action="" lay-filter="example">
            <ul class="addlmrlist-contanerbox">
            <li id = "lmr-0">

                <div class="layui-form-item">
                    <label  class="layui-form-label layui-required" >测试项目</label>
                    <div class="layui-input-block">
                        <select name="taskId" id="taskId0" lay-filter="taskId0" lay-verify="required" lay-search><option value="">测试项目</option></select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label  class="layui-form-label layui-required" >样品名称</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="sampName" id="sampName0" value="" lay-verify="required" autocomplete="off" placeholder="样品名称">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label  class="layui-form-label" >序列号</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="sampSn" id="sampSn0" value="" lay-verify="sampSn" autocomplete="off" placeholder="序列号">
                    </div>
                </div>

                <div class="layui-form-item" >
                    <label  class="layui-form-label layui-required">来样单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="proline_name" id="proline_name0" lay-verify="required" autocomplete="off" placeholder="来样单位" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label  class="layui-form-label" >委托编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="oaId"  id="oaId0" lay-verify="oaId" autocomplete="off" placeholder="委托编号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required" for="sampDate0" >来样日期</label>
                    <div class="layui-input-block" style="width: 300px;">
                        <input type="text" name="sampDate"  id="sampDate0" value="" lay-verify="required"  autocomplete="off" placeholder="请选择来样日期" class="layui-input" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label  class="layui-form-label layui-required">产品类别</label>
                    <div class="layui-input-block" style="width: 300px;">
                        <select name="proCategory" lay-filter="proCategory" id="proCategory0" lay-verify="required" autocomplete="off" lay-search>
                            <option value="">请选择产品类别</option>
                            <option value="GD">集中式光伏及储能产品</option>
                            <option value="GX">组串式及户用光伏产品</option>
                            <option value="FB">风能变流器产品</option>
                            <option value="ZC">其它产品</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">来样样品数</label>
                    <div class="layui-input-block" style="width: 300px;">
                        <input type="text" onkeyup="verify(this)" name="modelSampNum" id="modelSampNum0"  lay-verify="required" autocomplete="off" placeholder="来样样品数" class="layui-input">
                        <p style="color: #1E9FFF">来样样品数1,2,3...</p>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label  class="layui-form-label layui-required" >规格型号</label>
                    <div class="layui-input-block" style="width: 300px;">
                        <textarea type="text" name="sampType" id="sampType0" value="" lay-verify="required" autocomplete="off" placeholder="请输入规格型号"  class="layui-textarea"></textarea>
                        <p style="color: #1E9FFF">若有多个来样型号，请用分号隔开并与样品数一一对应;若无分号隔开，默认样品使用统一规格型号<p>
                    </div>
                </div>

                <div class="layui-input-block" style="margin-left: 480px; top: -160px">
                    <button type="button" id="newaddbtn" style="margin-top: 5px;" class="layui-btn layui-btn-warm layui-btn-sm" toolTip="请选择来样日期" ><i class="layui-icon">&#xe654;</i></button>
                </div>

            </li>
            </ul>

            <div class="layui-form-item layui-hide">
                <button class="layui-btn" id="submit" lay-submit lay-filter="commit"></button>
            </div>

        </form>

    </div>
</div>

注释：来样日期:sampDate0，产品类别:proCategory0，来样样品数:modelSampNum0，规格型号:sampType0 。这个四个动态新增的输入框字段，初始id设置为0，新增的id依次递增

二、js代码

代码如下（示例）：

<script>
    layui.config({
        base:'../../../layuiadmin/',
        version:layui.data('version').v
    }).extend({
        index:"lib/index"
    }).use(['index','element','table','jquery', 'layer', 'form', 'laydate'], function () {
        var form =layui.form;
        var $=layui.jquery;
        var date=layui.laydate;
        var layer=layui.layer;
        var dates =new Date();
        var dateStr =dates.getTime();
        layer.load();
        // 选择测试项目
        var project;
        $.ajax({
            url:'../../../../worklog/GetTsSelect?ifilter=2&iWithMe=0&taskName=&date='+dateStr+'',
            async:false,
            success:function(data) {
                project =JSON.parse(data)
                for( i in  project) {
                    $("#taskId0").append('<option value='+project[i].taskId+'>'+project[i].projectName+'</option>');
                }
                if($("#task_id").val()!='') {
                    $("#taskId0").val($("#task_id").val());
                }
                form.render('select');
                layer.closeAll('loading'); //关闭loading
                }
            }
        );
        // 根据测试项目联动
        form.on('select(taskId0)',function(data) {
            var  test= project.filter(function(obj){
                return obj.taskId==data.value
            });
            $("#proline_name0").val(test[0].proline_name)
            $("#oaId0").val(test[0].OaNun)
        });
        date.render({
            elem: '#sampDate0',
            format: "yyyy-MM-dd HH:mm:ss",
            trigger: 'click',
        });
    })
    function verify(obj) {
        obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/,'$1$2.5');
    }
</script>

注释：初始新增表单js，这个有两个下拉框查询接口，不做过多介绍。

<script>
    layui.use(['jquery', 'form', 'laydate'], function () {
        // 设置递增初始值
        var lmrIndex = 0;
        var date = layui.laydate;
        // 动态添加按钮
        layui.$('#newaddbtn').on('click', function () {
            var form = layui.form;
            // 递增序号
            lmrIndex++;
            // id根据lmrIndex依次递增
            var taskNameList =
                '<div class="layui-form-item" hidden>' +
                '<label class="layui-form-label">测试项目</label>' +
                '<div class="layui-input-block">' +
                '<select type="text" id="taskId' + lmrIndex + '" name="taskId" lay-verify="taskId" autocomplete="off" placeholder="请选择测试项目" class="layui-input-inline"></select>' +
                '</div>' +
                '</div>'
            var sampNameList =
                '<div class="layui-form-item" hidden>' +
                '<label class="layui-form-label">样品名称</label>' +
                '<div class="layui-input-block">' +
                '<textarea type="text" id="sampName' + lmrIndex + '" value="" name="sampName" lay-verify="sampName" autocomplete="off" placeholder="请输入来样型号数" class="layui-textarea"></input>' +
                '</div>' +
                '</div>'
            var sampSnList =
                '<div class="layui-form-item" hidden>' +
                '<label class="layui-form-label">序列号</label>' +
                '<div class="layui-input-block">' +
                '<textarea type="text" id="sampSn' + lmrIndex + '" value="" name="sampSn" lay-verify="sampSn" autocomplete="off" placeholder="请输入来样型号数" class="layui-textarea"></textarea>' +
                '</div>' +
                '</div>'
            var prolineNameList =
                '<div class="layui-form-item" hidden>' +
                '<label class="layui-form-label">来样单位</label>' +
                '<div class="layui-input-block">' +
                '<textarea type="text" id="proline_name' + lmrIndex + '" value="" name="proline_name" lay-verify="proline_name" autocomplete="off" placeholder="请输入来样型号数" class="layui-textarea"></textarea>' +
                '</div>' +
                '</div>'
            var oaIdList =
                '<div class="layui-form-item" hidden>' +
                '<label class="layui-form-label">委托编号</label>' +
                '<div class="layui-input-block">' +
                '<input type="text" id="oaId' + lmrIndex + '" value="" name="oaId" lay-verify="oaId" autocomplete="off" placeholder="请输入来样型号数" class="layui-input">' +
                '</div>' +
                '</div>'
            var sampDateList =
                '<div class="layui-form-item">' +
                '<label class="layui-form-label layui-required">来样日期</label>' +
                '<div class="layui-input-block" style="width: 300px;">' +
                '<input type="text" id="sampDate' + lmrIndex + '" name="sampDate" value="" key="sampDate' + lmrIndex + '" lay-verify="required"  autocomplete="off" placeholder="请输入来样日期" class="layui-input">' +
                '</div>' +
                '</div>'
            var proCategoryList =
                '<div class="layui-form-item">' +
                '<label class="layui-form-label layui-required">产品类别</label>' +
                '<div class="layui-input-block" style="width: 300px;">' +
                '<select id="proCategory' + lmrIndex + '" value="" name="proCategory" lay-verify="required"  lay-filter="proCategory" placeholder="请选择产品类别" autocomplete="off" lay-search >' +
                '   <option value="">请选择产品类别</option>' +
                '   <option value="GD">集中式光伏及储能产品</option>' +
                '   <option value="GX">组串式及户用光伏产品</option>' +
                '   <option value="FB">风能变流器产品</option>' +
                '   <option value="ZC">其它产品</option>' +
                '</select>' +
                '</div>' +
                '</div>'
            var modelSampNumList =
                '<div class="layui-form-item">' +
                '<label class="layui-form-label layui-required">来样样品数</label>' +
                '<div class="layui-input-block" style="width: 300px;">' +
                '<input type="text" οnkeyup="verify(this)" id="modelSampNum' + lmrIndex + '" value=""  name="modelSampNum" lay-verify="required"  autocomplete="off" placeholder="请输入来样样品数1,2,3,..." class="layui-input">' +
                '</div>' +
                '</div>'
            var sampTypeList =
                '<div class="layui-form-item">' +
                '<label class="layui-form-label layui-required">规格型号</label>' +
                '<div class="layui-input-block" style="width: 300px;">' +
                '<textarea type="text" id="sampType' + lmrIndex + '" value="" name="sampType" lay-verify="required"  autocomplete="off" placeholder="请输入来样型号数" class="layui-textarea"></textarea>' +
                '</div>' +
                '</div>'
            var delList =
                '<div className="form-content-sty" style="margin-left: 480px; margin-top: -90px"' +
                '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass" id="delbtns" οnclick="dellmr(\'lmr-' + lmrIndex + '\')"><i class="layui-icon">&#xe67e;</i></button>' +
                '</div>'
             // 注意 显示出来的顺序在这里设置，跟上面绘制的顺序无关
            var wholeList = '<li id="lmr-' + lmrIndex + '"><div class="lmr-card box-shadow">' + taskNameList + sampNameList + sampSnList
                + prolineNameList + oaIdList + sampDateList + proCategoryList  + modelSampNumList + sampTypeList + delList + '</div></li>'
            $('.addlmrlist-contanerbox').append(wholeList);
            form.render();
            // **注意，新增页面动态添加的日期控件，必须与主页面的分开，不然laydate加载不出来**
            date.render({
                elem: '#sampDate' + lmrIndex,
                format: "yyyy-MM-dd HH:mm:ss",
                trigger: 'click'
            });
        });
        // 提交按钮
        layui.$('#submit').on('click', function () {//弹窗确定按钮
            var addSampData = [];
            for (var i = 0; i <= lmrIndex; i++) {
                var taskId = document.getElementById("taskId" + 0).value;
                var sampName = document.getElementById("sampName" + 0).value;
                var sampSn = document.getElementById("sampSn" + 0).value;
                var prolineName = document.getElementById("proline_name" + 0).value;
                var oaId = document.getElementById("oaId" + 0).value;
                var sampDate = document.getElementById("sampDate" + i).value;
                var proCategory = document.getElementById("proCategory" + i).value;
                var modelSampNum = document.getElementById("modelSampNum" + i).value;
                var sampType = document.getElementById("sampType" + i).value;
                addSampData.push({
                    taskId: taskId,
                    sampName: sampName,
                    sampType: sampType,
                    sampSn: sampSn,
                    prolineName: prolineName,
                    oaId: oaId,
                    sampDate: sampDate,
                    proCategory: proCategory,
                    modelSampNum: modelSampNum,
                });
            }
            $.ajax({
                url: '../../../../labctl/addSamp',
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(addSampData),
                success: function (data) {
                    if (data === 1) {
                        layer.msg('新增成功');
                    } else {
                        layer.msg('新增失败');
                        return false;
                    }
                }
            })
            parent.layer.closeAll();
            parent.location.reload(); // 父页面刷新
        });
    })
    //删除按钮
    function dellmr(id){
        var lmrIndex = id
        lmrIndex --;
        $("#"+id).remove();
    }
</script>

注释: 这里强调日期控件问题，代码中标出。需要跟固定输入框js分开

最后传入后台的数据为json数组。