I am trying to submit a form which has dynamically generated fields to controller using Ajax. Its like an invoice. There is date, customer, sub_total, tax, and ttl fields which are permanent (invoice header). Then there are n number of dynamically generated form fields (invoice lines). Here is the dynamically generated html. Every input field has distinct names and id's.
<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
<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:
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. Have beein going through many articles regarding this, not able to figure it out. Any help please?
I am trying to submit a form which has dynamically generated fields to controller using Ajax. Its like an invoice. There is date, customer, sub_total, tax, and ttl fields which are permanent (invoice header). Then there are n number of dynamically generated form fields (invoice lines). Here is the dynamically generated html. Every input field has distinct names and id's.
<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
<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:
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. Have beein going through many articles regarding this, not able to figure it out. Any help please?
Share Improve this question edited Feb 13, 2019 at 16:07 Lucid Polygon asked Feb 13, 2019 at 16:00 Lucid PolygonLucid Polygon 57210 silver badges28 bronze badges3 Answers
Reset to default 4You 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.
//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
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:
https://api.jquery./serialize/
Here's how to do it with plain Javascript:
Serialize HTML form to JSON with pure JavaScript