I have a checkbox with foreach data, I want to select 1 or maximum 5 row, and make the rest checkbox be uncheck and that uncheck checkbox can't be sumbitted into the database
This is the form
<form action="/po_store" method="post">
<div class="container">
<div class="row">
<div class="col-md-6">
#csrf
<div class="form-group">
<label>Tanggal PO</label>
<input class="form-control" type="text" name="tanggal_po" id="datepicker">
{!! $errors->first('tanggal_po','<span class="text-danger">:message</span>') !!}
</div>
<div class="form-group">
<label>No Po</label>
<input class="form-control" type="text" name="no_po">
{!! $errors->first('no_po','<span class="text-danger">:message</span>') !!}
</div>
<div class="form-group">
<label>Supplier</label>
<select name="supplier_nama" class="form-control">
<option value=""hidden>Pilih Supplier</option>
#foreach ($supplier as $s)
<option value="{{ $s->nama_supplier }}">{{ $s->nama_supplier }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Apoteker</label>
<select name="apoteker_nama" class="form-control">
<option value=""hidden>Pilih Apoteker</option>
#foreach ($apoteker as $a)
<option value="{{ $a->nama_apoteker }}">{{ $a->nama_apoteker }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Keterangan</label>
<input class="form-control" type="text" name="keterangan">
</div>
</div>
<form action="{{ route('cari') }}" method="GET">
<div class="container-fluid" style="padding-top:25px">
<div class="row">
<div class="col-md-11">
<div class="form-group">
<input type="text" name="cari" class="form-control" placeholder="Cari berdasarkan kode dan nama obat ...">
</div>
</div>
<div class="form-group">
<input type="submit" value="Cari" class="btn btn-primary">
</div>
</div>
</form>
<table class="table table-bordered">
<tbody>
<tr class="text-center">
<th>Pilih</th>
<td>Kode Obat</td>
<td>Nama Obat</td>
<td>Harga Obat</td>
<td>Jumlah Obat PO</td>
<td>Total bayar</td>
</tr>
#foreach ($obat as $o)
<tr>
<td>
<input type="checkbox" name="select" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}" onkeyup="sum()">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
</td>
<td>
<input id="total" type="text" class="form-control" name="total_harga" onkeyup="sum()" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<button type="submit" class="btn btn-success simpan simp-po"><i class="fas fa-check"> Simpan</i></button>
</form>
This is the javascript to show calculate total field
function sum() {
var harga = document.getElementById('harga').value;
var jumlah = document.getElementById('jumlah').value;
var hasil = parseInt(harga)*parseInt(jumlah);
if(!isNaN(hasil)){
document.getElementById('total').value = hasil;
}
}
I can't submit the form especially the checkbox because the total field can't be empty. But i want just the selected checkbox get the harga field and can be submit
This is how it's looks like
This is my store controller
$message = [
'required' => '*:attribute harus diisi',
'numeric' =>'*:attribute harus angka' ,
'digits_between' => '*:attribute harus berisi 9 atau 13 angka'
];
$data = $request->validate([
'tanggal_po' => ['required'],
'no_po' => ['required'],
'supplier_nama' => ['required'],
'apoteker_nama' => ['required'],
'harga' =>['numeric'],
'select'=>['required'],
'jumlah'=>['required'],
'harga_obat' =>['required'],
'total_harga'=>['required']
],$message);
$select = $request->select;
foreach($select as $s){
$s = $request->select;
}
$tanggal_po = $request->input('tanggal_po');
$no_po = $request->input('no_po');
$supplier_nama = $request->input('supplier_nama');
$apoteker_nama = $request->input('apoteker_nama');
$harga = $request->input('harga');
$jumlah = $request->input('jumlah');
$harga_obat = $request->input('harga_obat');
$total_harga = $request->input('total_harga');
if(PO::create($request->only($tanggal_po,$no_po,$supplier_nama,$apoteker_nama,$select,$harga,$jumlah,$harga_obat,$total_harga))){
$request->session()->flash('success', 'Data Berhasil Di Tambahkan');
}else{
$request->session()->flash('danger', 'Data Tidak Berhasil Di Tambahkan');
}
Maybe an idea: Your checkboxes and inputs in your row should be declared as an array, e.g. name[]:
#foreach ($obat as $o)
<tr>
<td>
<input type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat[]" value="{{ $o->kode_obat }}" readonly>
</td>
...
</tr>
#endforeach
Your validation Rule should look like:
$data = $request->validate([
'kode_obat.*' => 'required_with:select.*,on'
...
],$message);
In your case i would display all vlidation errors on your form page, to check what's wrong:
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
In your controller handle the checkboxes as follows
$selects = $request->select;
foreach($selects as $select) {
//do whatever you want
}
How about to use required_with?
'total_harga'=>['required_with:yourCheckBoxName']
<form action="{{route('admin.post.store')}}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<input type="checkbox" id="publish" class="filled-in" name="status" value="1">
<label for="publish">Publish</label>
</div>
</form>
public function store(Request $request)
{
$post = new Post();
if(isset($request->status))
{
$post->status = true;
}else {
$post->status = false;
}
$post->save();
Toastr::success('Post Successfully Saved :)','Success');
return redirect()->route('admin.post.index');
}
Related
I hope you can help me, I have a button which adds a new row with a select option for each row, the idea is to select the invoices of each row in the different inputs, the problem is that only the first row works, in the others rows no longer allows me to insert different records
<tbody>
<tr id="venta0">
<td>
<select name="products[]" class="form-control" id="opciones"
onchange='cambioOpciones();'>
#foreach ($ventas1 as $ventas)
<option
value="{{$ventas->FECHA}}_{{$ventas->MONEDA}}_{{$ventas->NUMCTA}}_{{$ventas->FAMILIA}}_{{$ventas->CONCEPTO}}_{{$ventas->FACTURA}}_{{$ventas->DENOMINACION_SOCIAL}}_{{$ventas->VENDEDOR}}">
{{ $ventas->FACTURA }}---{{$ventas->CONCEPTO }}
</option>
#endforeach
</select>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="fecha" placeholder="fecha" readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="moneda" placeholder="fecha"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="numcta" placeholder="numcta"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-7">
<input type="text" class="form-control" id="familia" placeholder="familia"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="Concepto" placeholder="concepto"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="showId" placeholder="factura"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="denominacion"
placeholder="denominacion" readonly>
</div>
</td>
<td>
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="vendedor" placeholder="vendedor"
readonly>
</div>
</td>
</tr>
<tr id="venta1">
</tbody>
My code in JavaScript
<script>
function cambioOpciones(e) {
const combo = document.getElementById('opciones'),
[FECHA,MONEDA,NUMCTA,FAMILIA,CONCEPTO,FACTURA,DENOMINACION_SOCIAL,VENDEDOR] = document.getElementById('opciones').value.split('_');
document.getElementById('fecha').value = FECHA;
document.getElementById('moneda').value = MONEDA;
document.getElementById('numcta').value = NUMCTA;
document.getElementById('familia').value = FAMILIA;
document.getElementById('Concepto').value = CONCEPTO;
document.getElementById('showId').value = FACTURA;
document.getElementById('denominacion').value = DENOMINACION_SOCIAL;
document.getElementById('vendedor').value = VENDEDOR;
}
</script>
<script>
$(document).ready(function() {
let row_number = 1;
$("#add_row").click(function(e) {
e.preventDefault();
let new_row_number = row_number - 1;
$('#venta' + row_number).html($('#venta' + new_row_number).html()).find('td:first-child');
$('#ventas_table').append('<tr id="venta' + (row_number + 1) + '"></tr>');
row_number++;
});
$("#delete_row").click(function(e) {
e.preventDefault();
if (row_number > 1) {
$("#venta" + (row_number - 1)).html('');
row_number--;
}
});
});
</script>
enter image description here
I'm trying to insert multiple row data in two databse table using single click but the only one row inserted .
protected $table = 'biniyojan';
it throw an another error like this:
(Illuminate\Database\Grammar::parameterize(): Argument #1 ($values) must be of type array, string given)
How can i solve this issue??
////Modified Controller//////
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojan_details = new BiniyojanDetails();
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details->debit_credit = $request->debit_credit[$i];
//$biniyojan_details->debit_credit_type = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojan_details->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
/////View Blade////////
<form method="POST" action="{{ route('bbcreate') }}">
#csrf
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<input type="date" placeholder="मिति" value="#php echo $today; #endphp" name="date[]" class="form-control" id="inputCity" required>
</div>
<div class="form-group col-md-2">
<select id="inputState" placeholder="" name="ab[]" class="form-control" required>
<option>2079-080</option>
<option>2078-079</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="inputState" name="school[]" class="form-control" required>
<option selected disabled>स्रोत पाउने संस्था </option>
#foreach ($school_array as $sch)
<option value="{{ $sch -> name }}">{{ $sch -> name}}</option>
#endforeach
</select>
</div>
</div>
<div id="form-field">
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<select id="source" name="source[]" class="form-control" required>
<option selected disabled value="">स्रोत</option>
<option>केन्द्र</option>
<option>प्रदेश</option>
<option>स्थानीय</option>
<option>अन्य</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="kriyakalap" name="kriyakalap[]" class="form-control" required>
<option selected disabled>क्रियाकलाप</option>
#foreach ($bini as $bi)
<option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" required>
<option selected="selected" disabled>डेबिट / क्रेडिट</option>
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required>
<option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required>
</div>
<div class="form-group col-md-2">
<input type="button" class="btn btn-success" name="add" id="add" value="+">
</div>
</div>
</div>
<div class="form-row col-x1-3" style="justify-content:left ;">
<div class="form-group col-md-2">
<input type="text" placeholder="ब्यहोरा" name="behora[]" class="form-control" id="behora" required>
</div>
<div class="form-group col-md-2">
<input type="submit" id="submit" name="submit" value="राख्नुहोस्" class="btn btn-primary ">
</div>
#if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
#endif
</div>
<div form-row col-x1-3 id="showdata" class="showdata">
<p class="show_data"></p>
<p id="showdata" class="showdata"></p>
</div>
</form>`enter code here`
//////jQuery For Repeat form////////[enter image description here][1]
<!-- form repeat -->
<script type="text/javascript">
$(document).ready(function() {
var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> #foreach ($bini as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> #endforeach </select> #foreach ($bini as $bi) #endforeach </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-2"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
var max = 5;
var x = 1;
$("#add").click(function() {
if (x <= max) {
$("#form-field").append(html);
x++;
}
})
$("#form-field").on('click', '#remove', function() {
$(this).closest('span').remove();
x--;
});
});
</script>
<!-- form repeat -->
[1]: https://i.stack.imgur.com/rzb3C.png
please try this:-
public function bbcreate(Request $request){
$biniyojan_details = new BiniyojanDetails();
$biniyojan_details->school = $request->school;
$biniyojan_details->source = $request->source;
$biniyojan_details->kriyakalap = $request->kriyakalap;
$biniyojan_details->debit_credit = $request->debit_credit;
$biniyojan_details->debit_credit_type = $request->debit_credit_type;
$biniyojan_details->cash = $request->cash;
$biniyojan_details->save();
if(!empty($request->school)){
for($i=0; $i< count($request->school); $i++){
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->id;
$biniyojan->date = $request->date[$i];
$biniyojan->ab = $request->ab[$i];
$biniyojan->school = $request->school[$i];
$biniyojan->behora = $request->behora[$i];
$biniyojan->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
As you said you are trying to insert multiple row data.
Then You must convert array into json to store it into database.
Do like this - json_encode($request->school,true);
I have 2 forms: form1 and form2. form2 is hidden and when I click on the validation button, form1 disappears and form2 appears. form1 contains an input1. When I click on the validation button, I want the value of Nameinput1 to be put after "name:" on form2., someone tells me where is the error
<div id='form1'>
<h3>form group 1</h3>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
{!! csrf_field() !!}
<div class="form-group">
<label>Date:</label>
<input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
</div>
<div class="form-group">
<label>Select Chantier:</label>
{!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
</div>
<div class="form-group">
<label>Select Ouvrage:</label>
{!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
</div>
<div class="form-group">
<label>Nbre de jour</label>
<input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
<span id='error'>Input can not blank</span>
</div>
<div class="form-group">
<label>name</label>
<input type="text" id='name' class="form-control" placeholder="name">
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " type="submit" id="hide">valider</button>
</div>
</div>
form 2:
<div id='form2'>
<h3>form group 2</h3>
<h4>name : <span id="name"></span></h4>
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
#if($salaries->count())
#foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
<td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
#endforeach
#endif
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" >Pointage</button>
</div>
</div>
</div>
code jquery:
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#name').val();
alert(name);
$('#name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
Because 2 form have same id with name, you need use $('#form2 #name').text(value);
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#form1 #name').val();
//alert(name);
$('#form2 #name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#form1 #name').val();
//alert(name);
$('#form2 #name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
#form2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
<h3>form group 1</h3>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
{!! csrf_field() !!}
<div class="form-group">
<label>Date:</label>
<input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
</div>
<div class="form-group">
<label>Select Chantier:</label>
{!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
</div>
<div class="form-group">
<label>Select Ouvrage:</label>
{!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
</div>
<div class="form-group">
<label>Nbre de jour</label>
<input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
<span id='error'>Input can not blank</span>
</div>
<div class="form-group">
<label>name</label>
<input type="text" id='name' class="form-control" placeholder="name">
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " type="submit" id="hide">valider</button>
</div>
</div>
<div id='form2'>
<h3>form group 2</h3>
<h4>name : <span id="name"></span></h4>
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
#if($salaries->count())
#foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
<td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
#endforeach
#endif
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" >Pointage</button>
</div>
</div>
</div>
code jquery:
I added javascript, jquery at the bottom of my blade page to allow me to add a new line containing all the table with id="dynamic_field".(but without the button name "add" after the second, it should be a cross for deleting)
And my question is : how I can put all this these lines in $('#dynamic_field').append(....here....) because I try copy paste and there is everytime syntax error..
here the blade file:
#extends ('layout.layout')
#section('containerContent')
<div class="col-md-12">
<form method="POST" enctype="multipart/form-data" id="add_tour">
{{ csrf_field() }}
#if (count($errors))
<div class="form-group">
<div class="alert alert-danger">
<ul>
#foreach($errors->all() as $error)
<li> {{ $error }}</li>
#endforeach
</ul>
</div>
</div>
#endif
<div class="content">
<h1>Create a new Tour:</h1>
<div class="form-group">
<div class="col-lg-6">
<input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<textarea class="form-control" placeholder="Resume of tour" name="tourResume" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<select id='nameArtist' name='nameArtist'>
<option value=''>Select Music Artist or Band</option>
#foreach ($artists as $artist)
<option value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
#endforeach
</select>
</div>
</div>
<h2 align="center">Add Concert to your Tour:</h2>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><select id='concertRoom' name='concertRoom'>
<option>Select your concert room</option>
#foreach ($roomsconcert as $room)
<option value="{{ $room->id }}">{{ $room->name }}</option>
#endforeach
</select>
</td>
<td><input class="form-control" type="date" name="dateConcert"{{ Form::datetime('') }}></td>
<td><input class="form-control" type="text" name="concertDuration" placeholder="Duration of the event (min)"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
</tr>
</table>
</div>
<a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
<button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i = 1;
$('#add').click(function() {
i++;
var htmlContent = $('#dynamic_field').html();
/*
$('#dynamic_field').append(htmlContent);
*/
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
</script>
#endsection
thanks
Try wrapping your javascript with #verbatim Directive
#verbatim
<script type="text/javascript">
......
</script>
#endverbatim
I have a dynamic input form like this (open the link): this is the
form
The option value is "Debit" and "Kredit".
In my case, I wanna get the Jumlah's value based on the option selected. As you can see in that picture, in first row, I input the Jumlah's value with 10 and then I select the "Debit", so the Total Debit value will change to 10 and Total Kredit value still 0.
And then, in the next row, I input the Jumlah's value with 3 and then I select "Kredit", so the Total Debit value still 10 and Total Kredit change to 3.
Then, when I change the second row to Debit, the Total Debit should be 13 and Total Kredit is 0. But, it makes Total Debit to 13 and Total Kredit still 3.
So, how can I solve this? Any suggestions or another alternatives?
Here is my form's code:
<form action="" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="nojurnal">Nomor Jurnal:</label>
<input type="text" class="form-control" id="nojurnal" value="{{ $noJurnal+1 }}" name="no_jurnal" readonly>
</div>
<div class="form-group">
<label for="tgljurnal">Tanggal Jurnal:</label>
<input type="date" class="form-control" id="tgljurnal" name="tgl_jurnal">
</div>
<div class="form-group">
<label for="keterangan">Keterangan:</label>
<textarea name="keterangan_jurnal" id="keterangan" class="form-control" rows="8" cols="80"></textarea>
</div>
<hr>
<div class="form-group table-responsive">
<table class="table table-striped">
<thead>
<th>Nomor Rekening</th>
<th>Nama Rekening</th>
<th>Keterangan</th>
<th>Jumlah</th>
<th>Jenis Rekening</th>
<th></th>
</thead>
<tbody class="tabel-body">
<tr class="row-rekening">
<td>
<div class="form-group">
<select class="form-control kodeRekening" name="kode_rekening[]">
#foreach($rekenings as $rekening)
<option class="listKodeRekening" value="{{ $rekening->kode_rekening }}" nm="{{ $rekening->nama_rekening }}">{{ $rekening->kode_rekening }}</option>
#endforeach
</select>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control namaRekening" type="text" name="" value="" readonly>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control keterangan" type="text" name="keterangan[]" value="">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control jumlahDK" type="text" name="jumlah[]" value="">
</div>
</td>
<td>
<div class="form-group">
<select class="form-control jenisRekening" name="d_k[]">
<option value="">-- Pilih --</option>
<option value="D" class="debit">Debit</option>
<option value="K" class="kredit">Kredit</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<button type="button" class="form-control glyphicon glyphicon-plus btn-success more-input" name="button"></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group col-sm-12">
<label for="total-debit" class="col-sm-2">Total Debit</label>
<span class="col-sm-4"><input type="text" id="jumlah-debit" class="form-control" name="" value="" readonly></span>
</div>
<div class="form-group col-sm-12">
<label for="total-kredit" class="col-sm-2">Total Kredit</label>
<span class="col-sm-4"><input type="text" id="jumlah-kredit" class="form-control" name="" value="" readonly></span>
</div>
<input type="submit" class="btn btn-success" value="Simpan">
</form>
And this is my javascript code:
$(document).on('change', '.jenisRekening', function(e){
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val())
}
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val())
}
$('#jumlah-debit').val(totalDebit)
$('#jumlah-kredit').val(totalKredit)
});
The variables totalDebit and totalCredit should be reinitialised to zero in your jQuery code before they're recomputed. It seems that their old value is retained and therefore a simple solution would be:
$(document).on('change', '.jenisRekening', function(e){
totalDebit = 0;
totalKredit = 0;
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val());
}
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val());
}
$('#jumlah-debit').val(totalDebit);
$('#jumlah-kredit').val(totalKredit);
});