Dynamically add multiple form elements in layui

---

foreword

This article is the situation I encountered when I was writing the project, and I hereby record it so that it can be used directly next time.

---

1. Functional requirements

When adding an order, multiple accessories may be involved, so form elements need to be added dynamically to meet functional requirements.

The framed part is a dynamically added form element

---

Two, HTML page code

The code is as follows (example):

<div class="layuimini-container">
    <div class="layuimini-main">
            <div id="bc">
                <div class="layui-form-item">
                    <label class="layui-form-label">配件</label>
                    <div class="layui-input-block">
                        <select name="accessory[0][accessory]" lay-verify="required">
                            <option value="">请选择配件</option>
                            {
    
    volist name='accessory' id = 'accessory'}
                            <option value="{$accessory.id}">{
    
    $accessory.name}</option>
                            {
    
    /volist}
                        </select>
                        <div class="layui-form-mid layui-word-aux">注：编辑订单时不用选择该项，新增订单时需要选择该项</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配件数量</label>
                    <div class="layui-input-block">
                        <input type="text" name="accessory[0][account]" lay-verify="required" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                        <div class="layui-form-mid layui-word-aux">注：编辑订单时不用选择该项，新增订单时需要选择该项</div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" onclick="insertInput()">增加配件</button>
                </div>
            </div>
        </div>
    </div>
</div>

Note: The code only intercepts the main part of the code. Since I use the PHP language, I can modify it to other languages ​​in the select selection box.

---

Three, js code

The code is as follows (example):

<script>
    //定义一个方法使得调用时使count加一
    function a(){
    
    
        count++
    }
    //定义全局变量count
    var count = 1
    layui.use(['form', 'layer'], function () {
    
    
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //动态增加表单元素方法
        window.insertInput = function () {
    
    
            //定义表单元素name名，使用二维数组方便后端接收
            var accessory = `accessory[${
    
    count}][accessory]`
            var account = `accessory[${
    
    count}][account]`
            //获取id为bc的所有元素
            let bc = document.getElementById('bc')
            //控制台输出bc
            console.log(bc)
            //克隆bc，cloneNode(true) 代表深克隆—完全把真节点的东西给复制了过来
            let bcClone = bc.cloneNode(true)
            //控制台输出所要克隆的元素的name，getAttribute 方法用于拿到设置的自定义属性的属性值，唯一一个参数就是搜索的自定义属性名（也要用引号包起来）
            console.log(bcClone.childNodes[1].childNodes[3].childNodes[1].getAttribute('name'))
            console.log(bcClone.childNodes[3].childNodes[3].childNodes[1].getAttribute('name'))
            //将克隆的内容的name值进行修改， setAttribute()   是用于设置自定义属性的方法,有两个参数，第一个是属性名，第二个是属性值，添加时必须用引号括起来
            bcClone.childNodes[1].childNodes[3].childNodes[1].setAttribute('name',accessory)
            bcClone.childNodes[3].childNodes[3].childNodes[1].setAttribute('name',account)
            //打印修改后的元素name
            console.log(bcClone.childNodes[1].childNodes[3].childNodes[1].getAttribute('name'))
            console.log(bcClone.childNodes[3].childNodes[3].childNodes[1].getAttribute('name'))
            //将克隆的内容加在bc后， after方法用于在元素后插入内容
            bc.after(bcClone)
            //调用a方法
            window.a()
            //重载模糊搜索框
            form.render('select');
            //控制台打印相关值
            console.log(count,accessory,account)
        };
    });
</script>

---

Summarize

The above records how I realized the functional requirements, plus the relevant code I realized the function.