[英]Laravel: Submit dynamically generated form fields
I am trying to submit a form which has dynamically generated fields to controller using Ajax.我正在尝试使用 Ajax 向控制器提交一个具有动态生成字段的表单。 Its like an invoice.它就像一张发票。 There is date, customer, sub_total, tax, and ttl fields which are permanent (invoice header).有日期、客户、sub_total、tax 和 ttl 字段是永久性的(发票标题)。 Then there are n number of dynamically generated form fields (invoice lines).然后有 n 个动态生成的表单字段(发票行)。 Here is the dynamically generated html.这是动态生成的html。 Every input field has distinct names and id's.每个输入字段都有不同的名称和 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>
Permanent fields HTML永久字段 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>
The javascript is here is triggered with a button click:此处的 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;
}
I started with getting values from permanent fields.我从永久字段中获取值开始。 Not sure how to gather values from n number of dynamically generated fields and pass it on to controller.不确定如何从 n 个动态生成的字段中收集值并将其传递给控制器。 Have beein going through many articles regarding this, not able to figure it out.已经阅读了很多关于此的文章,但无法弄清楚。 Any help please?请问有什么帮助吗?
You will have to do something like this :你将不得不做这样的事情:
<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>
Then in your controller you will be able to get all values like this:然后在您的控制器中,您将能够获得如下所有值:
$skus = request('skus');
$names = request('names');
...
for($i = 0 ; $i < count($skus) ; $i++)
{
$sku = $skus[$i];
$name = $names[$i];
...
}
Change your code as below.更改您的代码如下。 Put <form>
and submit button where you want.把<form>
和提交按钮放在你想要的地方。
//submit opening invoice data $('#invoice_form').on('submit', function(event){ event.preventDefault(); $.ajax({ url:"put your url", method:'post', data:$(this).serialize(), dataType:'json', success:function(data) { //do whatever you want } }) });
<form id ="invoice_form"> <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> </tbody> <button type="submit" class="btn btn-success"><i class="fas fa-download"></i> Save</button> </form>
controller.php控制器.php
public function create(Request $request){
if($request->ajax())
{
$skus= $request->skus;
$names= $request->names;
$rates= $request->rates;
$qtys= $request->qtys;
for($count = 0; $count < count($skus); $count++)
{
$data = array(
'skus' => $skus[$count],
'names' => $names[$count],
'rates' => $rates[$count],
'qtys' => $qtys[$count]
);
$insert_data[] = $data;
}
Invoice::insert($insert_data);
return response()->json([
'success' => 'Invoice Saved Successfully!'
]);
}
}
All you really need is a way to serialize the entire form.您真正需要的是一种序列化整个表单的方法。
Here's how to do it with jQuery:下面是如何用 jQuery 做到这一点:
https://api.jquery.com/serialize/ https://api.jquery.com/serialize/
Here's how to do it with plain Javascript:以下是使用纯 Javascript 执行此操作的方法:
Serialize HTML form to JSON with pure JavaScript 使用纯 JavaScript 将 HTML 表单序列化为 JSON
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.