如何在表单中动态添加表单行答案

【问题标题】：How to add dynamically form-row in a form如何在表单中动态添加表单行
【发布时间】：2021-07-10 17:14:58
【问题描述】：

我有一个这样的表格。

<form action="{{route('order.store')}}" method="post">
                @csrf
                <div class="form-row">
                    <div class="col-6">
                        <label>Produit</label>
                        <div class="col-10">
                            <select class="form-control" name="ordered_products" id="ordered_products" required>
                                @foreach ($products as $product)
                                    <option name="ordered_products" required value="{{$product->id}}">{{$product->product_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                        <label>Quantité</label>
                        <div class="col-10">
                            <input class="form-control" type="number" name="ordered_quantities" id="ordered_quantities" required>
                        </div>
                    </div>
                </div>
</form>

我还有一个按钮。当用户单击按钮时，我想在表单中动态添加<div class="form-row> 中的所有内容。有谁知道该怎么做？非常感谢。

【问题讨论】：

这是什么意思：我想在用户点击按钮时动态添加表单中

标签： javascript php html laravel

【解决方案1】：

试试这个：

document.getElementById("clickMe").onclick = function () { 
        //first div
        var newDivCol = document.createElement("div");
        newDivCol.setAttribute("class","col-md-4");
        //second div
        var newDivForm = document.createElement("div");
        newDivForm.setAttribute("class","form-group label-floating");
        newDivCol.appendChild(newDivForm);

        //label
        var newlabel = document.createElement("label");
        newlabel.setAttribute("class","control-label");
        newlabel.innerHTML = "Here goes the text";
        newDivForm.appendChild(newlabel);

        //input
        var newInput = document.createElement("input");
        newInput.setAttribute("type","text");
        newInput.setAttribute("class","form-control");
        newInput.setAttribute("v-model","act");
        newDivForm.appendChild(newInput);

        var element = document.getElementById("addRowsHere");
        element.appendChild(newDivCol);
};

<div class="row" id="addRowsHere">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
</div>
<button id="clickMe">Add row</button>

【讨论】：