Gambar 1 : Output/Hasil
Untuk melakukan dynamic form kita perlu beberapa trick, untuk awalan kita mulai dari view.Buat view dengan onClick add row dynamic menggunakan JS.
Ini adalah contoh form yang saya buat,
<h4>Mohon Lakukan Penyimpanan terlebih dahulu apabila sudah di lakukan perubahan di Form Biaya</h4>
{!! Form::open(['url' => route('pengambilan.store_biaya'), 'method' => 'post'])!!}
<input type="hidden" value="{{Request::segment(3)}}" name="transaksi_harian_id">
<input type="hidden" value="" name="count_tr">
<table class="table" id="table-biaya">
<thead>
<tr>
<th>Nama Biaya</th>
<th>Jumlah</th>
<th></th>
</tr>
</thead>
<tbody id="tbody-biaya">
@role('operator')
@if(!empty($transaksi_biayas))
<?php $arr_biaya = 0; ?>
@foreach($transaksi_biayas as $transaksi_biaya)
<tr>
<td>
{{ $transaksi_biaya->new_biaya->name }}
</td>
<td>
{{ App\Helpers\Money::rupiah($transaksi_biaya->biaya)}}
</td>
<td class="actions"></td>
</tr>
<?php $arr_biaya++;?>
@endforeach
@endif
@endrole
@role('admin')
<?php $arr_biaya = 0; ?>
@foreach($transaksi_biayas as $transaksi_biaya)
<tr>
<td>
<input type="hidden" value="{{$transaksi_biaya->id}}" name="transaksi_biayas[][id]" class="id_biaya">
<select name="transaksi_biayas[][biaya_id]" class="form-control input-xs biaya-name changeRupiah" id="valueSelected<?php echo $arr_biaya; ?>">
@foreach($biayas as $biaya)
<option value="{{$biaya->id}}" @if($biaya->id == $transaksi_biaya->biaya_id)selected="selected"@endif
data-harga="<?php echo $biaya->harga; ?>" data-id="<?php echo $arr_biaya; ?>">{{$biaya->name}}</option>
@endforeach
</select>
</td>
<td>
<input type="text" value="{{App\Helpers\Money::rupiah($transaksi_biaya->biaya)}}" class="form-control input-xs biaya" name="transaksi_biayas[][biaya]"
id="<?php echo 'biaya'.$arr_biaya ?>"/>
</td>
<td class="actions"><a class="icon" onclick="delBiaya(this, {{$transaksi_biaya->id}})" id="pointer"><i class="mdi mdi-delete"></i></a></td>
</tr>
<?php $arr_biaya++;?>
@endforeach
@endrole
</tbody>
</table>
<button class="btn btn-success" id="addBiaya">+</button>
<hr>
<button class="btn btn-success">Simpan</button>
{!! Form::close()!!}Selanjutnya kita perlu menambahkan function script jquery, contohnya :
var row_biaya = $('#tbody-biaya');
var arr_biaya = document.getElementById('table-biaya').rows.length - 1;
$('#addBiaya').on('click', function (e) {
e.preventDefault();
@role('admin')
var content_biaya = '<tr>\n\
<td>\n\
<input type="hidden" name="transaksi_biayas[][id]" value="" class="id_biaya">\n\
<select name="transaksi_biayas[][biaya_id]" class="form-control input-xs biaya-name changeRupiah">\n\
<option value="">----Pilih Biaya-----</option>\n\
<?php foreach($biayas as $biaya):?>\n\
<option value="<?php echo $biaya->id; ?>" data-harga="<?php echo $biaya->harga; ?>" data-id="'+ arr_biaya + '"><?php echo $biaya->name; ?></option>\n\
<?php endforeach;?>\n\
</select>\n\
</td>\n\
<td>\n\
<input name="transaksi_biayas[][biaya]" class="form-control input-xs biaya" id="biaya' + arr_biaya + '" readonly="">\n\
</td>\n\\n\
<td class="actions">\n\
<a class="icon" id="pointer" onclick="delBiaya(this, 0)"><i class="mdi mdi-delete"></i></a></a>\n\
</td>\n\
</tr>';
@endrole
@role('operator')
var content_biaya = '<tr>\n\
<td>\n\
<input type="hidden" name="transaksi_biayas[][id]" value="" class="id_biaya">\n\
<select name="transaksi_biayas[][biaya_id]" class="form-control input-xs biaya-name changeRupiah">\n\
<option value="">----Pilih Biaya-----</option>\n\
<?php foreach($biayas as $biaya):?>\n\
<option value="<?php echo $biaya->id; ?>" data-harga="<?php echo $biaya->harga; ?>" data-id="'+ arr_biaya + '"><?php echo $biaya->name; ?></option>\n\
<?php endforeach;?>\n\
</select>\n\
</td>\n\
<td>\n\
<p id="res_biaya' + arr_biaya + '"></p>\n\
<input name="transaksi_biayas[][biaya]" class="form-control input-xs biaya" id="biaya' + arr_biaya + '" readonly="" type="hidden">\n\
</td>\n\\n\
<td class="actions">\n\
</td>\n\
</tr>';
@endrole
addItem(row_biaya, content_biaya);
MoneyRupiah('#biaya' + arr_biaya + '');
MoneyRupiah('#res_biaya' + arr_biaya + '');
arr_biaya++;
resetNumsBiaya();
rowCountBiaya();
});Untuk function resetnum nya
var resetNumsBiaya = function () {
$('#table-biaya .biaya').each(function (i) {
$(this).attr('name', 'transaksi_biayas[' + i + '][biaya]');
});
$('#table-biaya .id_biaya').each(function (i) {
$(this).attr('name', 'transaksi_biayas[' + i + '][id]');
});
$('#table-biaya .biaya-name').each(function (i) {
$(this).attr('name', 'transaksi_biayas[' + i + '][biaya_id]');
});
}Sehingga ketika di Inspect element bentuk formnya menjadi seperti ini :
Terakhir kita lakukan looping dengan foreach di controller nya untuk sampling codingan nya sebagai berikut :
public function store_biaya(Request $request){
$transaksi_harian_id = $request->input('transaksi_harian_id');
foreach ($request->transaksi_biayas as $key => $value) {
if(empty($value['id'])){
$transaksi_biayas = new TransaksiRincianBiaya();
$transaksi_biayas->transaksi_harian_id = $transaksi_harian_id;
$transaksi_biayas->biaya_id = $value['biaya_id'];
$transaksi_biayas->biaya = Money::convert_rupiah($value['biaya']);
$transaksi_biayas->save();
}else{
$transaksi_biayas = TransaksiRincianBiaya::find($value['id']);
$transaksi_biayas->transaksi_harian_id = $transaksi_harian_id;
$transaksi_biayas->biaya_id = $value['biaya_id'];
$transaksi_biayas->biaya = Money::convert_rupiah($value['biaya']);
$transaksi_biayas->save();
}
}
Session::flash("flash_notification", [
"level"=>"success",
"message"=>"Telah berhasil di rubah"
]);
return back()->withInput();
}Setelah semuanya selesai, coba lakukan simpan data dan silahkan pastikan sudah tersimpan atau belumnya, demikianlah artikel nya, semoga bermanfaat.
Comments