javascript - Laravel:提交动态生成的表单字段

Question

我正在尝试使用 Ajax 向 Controller 提交一个具有动态生成字段的表单。就像发票一样。有永久性的日期、客户、小计、税和 ttl 字段(发票抬头)。然后有 n 个动态生成的表单字段(发票行)。这是动态生成的html。每个输入字段都有不同的名称和 ID。

<tbody id="list">
    <tr>
        <td>
            <input name="sku1" id="sku1" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name1" id="name1" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate1" id="rate1" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty1" id="qty1" readonly="" type="text" value="2">
            </td>
        <td>
            <input name="disc1" id="disc1" readonly="" type="text" value="0">
        </td>
        <td>
            <input name="ttl1" id="ttl1" readonly="" type="text" value="90.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
    <tr>
        <td>
            <input name="sku2" id="sku2" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name2" id="name2" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate2" id="rate2" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty2" id="qty2" readonly="" type="text" value="2">
        </td>
        <td>
            <input name="disc2" id="disc2" readonly="" type="text" value="10">
        </td>
        <td>
            <input name="ttl2" id="ttl2" readonly="" type="text" value="80.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
</tbody>

永久字段 HTML

        <div class="form-group">
            <label for="date">Date</label>
            <input type="text" class="form-control" id="date" name="date" placeholder="00/00/0000"></input>
        </div>
        <div class="form-group">
            <label for="customer">Customer</label>
            <select class="form-control" id="customer">
                @foreach($customers as $customer)
                    <option value="{{$customer->id}}">{{$customer->name}}</option>
                @endforeach
            </select>
        </div>

        <div class="card p-3">
            <table>
            <tr>
                <td class="h5">SUB TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="sub_total"placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                   
            <tr>
                <td class="h5">VAT</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="tax" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                       
            <tr>
                <td class="h5">TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="ttl" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>
        </table>                        
    </div>

此处的 javascript 是通过单击按钮触发的:

function createData(){
    var date = document.getElementById('date').value;
    var customer = document.getElementById('customer').value;
    var sub_ttl = document.getElementById('sub_total').value;
    var tax = document.getElementById('tax').value;
    var ttl = document.getElementById('ttl').value;
}

我从永久字段中获取值开始。不确定如何从 n 个动态生成的字段中收集值并将其传递给 Controller ​​。已经阅读了很多关于此的文章，但无法弄清楚。有什么帮助吗？

Answer 1

你将不得不做这样的事情:

<tbody id="body">
<tr>
    <td>
        <input name="skus[]"readonly="" type="text" value="K5693">
    </td>
    <td>
        <input name="names[]" readonly="" type="text" value="HANDLEBAR">
    </td>
    <td>
        <input name="rates[]" readonly="" type="text" value="45.00">
    </td>
    <td>
        <input name="qtys[]" readonly="" type="text" value="2">
        </td>
    <td>
        <input name="discs[]" readonly="" type="text" value="0">
    </td>
    <td>
        <input name="ttls[]" readonly="" type="text" value="90.00">
    </td>
    <td class="text-center">
        <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
    </td>
</tr>

然后在您的 Controller 中，您将能够像这样获取所有值:

$skus = request('skus');
$names = request('names');
...
for($i = 0 ; $i < count($skus) ; $i++)
 {
   $sku = $skus[$i];
   $name = $names[$i];
   ...
 }