sql add "n" row with values - javascript

I have code below.
When I click the button, the new value is named "name+1"
I want to enter these values ​​into the sql database
Bad Sql query:
$sql = "INSERT INTO bb(numer, ID, numerczesci, iloscczesci, przyczyna,
numerfaktury, data, uwagi)
VALUES ('','','$numerczesci','$iloscczesci',
'$przyczyna', '$numerfaktury', '$data', '$uwagi' )";
I don't know how to declare variables and what sql query to write.
var i =0;
var k =0;
function duplicate() {
var original = document.getElementById('duplic');
var rows = original.parentNode.rows;
i++;
var clone = original.cloneNode(true); // "deep" clone
var InputType = clone.getElementsByTagName("input");
clone.id = "duplic" + (i); // there can only be one element with an ID
original.parentNode.insertBefore(clone, rows[i]);
k=k+1;
document.getElementById("numerczesci").setAttribute("name", "numerczesci" + k );
document.getElementById("iloscczesci").setAttribute("name", "iloscczesci" + k );
document.getElementById("przyczyna").setAttribute("name", "przyczyna" + k );
document.getElementById("numerfaktury").setAttribute("name", "numerfaktury" + k );
document.getElementById("data").setAttribute("name", "data" + k );
document.getElementById("uwagi").setAttribute("name", "uwagi" + k );
}
<table >
<tr id="duplic"> <td>
<div class="form-group required">
<label for="fldNazwa" class="control-label">numer części/symbol</label>
<input type="text" class="form-control" id="numerczesci" name="numerczesci" required>
</div>
<div class="form-group required">
<label for="fldNazwa" class="control-label">ilość części</label>
<input type="number" class="form-control" id="iloscczesci" name="iloscczesci" value="1" min="1" required>
<br>
<div class="form-group required">
<label for="fldNazwa" class="control-label">przyczyna zwrotu</label>
<select name="przyczyna" required id="przyczyna">
<option disabled selected value> -- wybierz opcję -- </option>
<option value="zlaczesc">część źle zamówiona </option>
<option value="bladdostawcy">błąd dostawcy przy wysyłce </option>
<option value="czescuszkodzona">część uszkodzona podczas transportu lub wadliwa</option>
</select>
</div>
<div class="form-group required">
<label for="fldNazwa" class="control-label">numer faktury</label>
<input type="text" class="form-control" id="numerfaktury" name="numerfaktury" required>
</div>
<div class="form-group ">
<label for="fldNazwa" class="control-label">data wystawienia faktury</label>
<input type="date" class="form-control" id="data" name="data">
</div>
</div>
<div class="form-group ">
<label for="fldNazwa" class="control-label">uwagi</label>
<textarea class="form-control" id="uwagi" name="uwagi"></textarea>
</div>
<br> <br>
</td>
<td>
</td>
</tr>
</table>
<button id="addmore" onclick="duplicate()">Dodaj Towar</button>
<br><br>

Related

LARAVEL Insert MULTIPLE ROWS in database

I'm trying to insert multiple row data in two DB tables using single click but this code insert only one row at a time. When i try dd($request->all()); i got data in array but insert only one row. What is the problem and how can i fix it?
protected $table = 'biniyojan';
////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>
#foreach ($bini as $bi)
#endforeach
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" >
<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" >
<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') }}
{{-- message --}}
{!! Toastr::message() !!}
</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>
//////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 -->
As #aynber pointed at, you need to move the line $biniyojan_details = new BiniyojanDetails(); inside the loop so it initiate a new object for each iteration.
Another solution would be to insert all the entries in the same time(better performance). For that, we prepare the data to be inserted first
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();
$biniyojanDetailsToBeInserted = [];
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details = [];
$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];
$biniyojanDetailsToBeInserted[] = $biniyojan_details;
}
}
if ($biniyojanDetailsToBeInserted) {
BiniyojanDetails::insert($biniyojanDetailsToBeInserted);
}
return redirect()->back()->with('status', 'Inserted');
}
Your code create only one row but the noticeable thing is that it create one row but with last data of the array.
Because you are not making object inside the loop it is outside of the loop so the loop runs on the same object and update its properties each time loop runs and save it.
Make object inside the loop so it make new object each time which means it will create new row each time instead of updating the same row.
There is a better way for this if you have same names of your array keys as database table columns.
Biniyojan::insert($request->data);
It works like this.
User::insert([
['name' => 'John', 'email' => 'john#example.com'],
['name' => 'Marina', 'email' => 'marina#example.com'],
]);

Enter multiple data from MySQL into multiple inputs with select option

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

My on change jQuery event is not working properly

The value of InterMap and interDetailMap are coming from the backend. I have tried many ways to get the selected option but my JQuery change event isn't working.
I think there might be some issue with the sequence of script tags or maybe jquery tags but I cannot understand what's going wrong.
What I want to implement is that when I select Broker then my intermediary name field values will come from the backend and when I select Outsource then my name dropdown should convert into text input field and all the other fields should convert into empty text fields.
$('#intermediary_type').on('change', function() {
var selectedType = $(this).children("option:selected").text();
//var selectedType = document.getElementById("intermediary_type");
console.log(selectedType);
//var interMap = ${interMap};
document.getElementById("intermediary_name").innerHTML = "";
//var nameList = interMap[selectedType.value];
//const select="--Select--";
if (selectedType == "Broker") {
var drop = "<select class='form-control' id='intermediary_name' name='intermediary_name'></select>"
$("#intermediary_name").replaceWith(drop);
$("#intermediary_name").append("<option value=''> --Select---- </option>");
for (var i = 0; i < nameList.length; i++) {
$("#intermediary_name").append("<option value='" + nameList[i] + "'>" + nameList[i] + "</option>");
}
document.getElementById("int_spoc_name").value = "";
document.getElementById("int_emailid").value = "";
document.getElementById("int_phonenumber").value = "";
document.getElementById("int_address").value = "";
$("#intermediary_name").trigger("change");
$('#intermediary_name').on('change', function() {
var y = document.getElementById("intermediary_name");
var interDetailMap = ${interDetailMap};
var interDetail = interDetailMap[y.value];
document.getElementById("int_spoc_name").value = interDetail["intSpocName"];
document.getElementById("int_emailid").value = interDetail["intermediaryMail"];
document.getElementById("int_phonenumber").value = interDetail["intermediaryMobile"];
document.getElementById("int_address").value = interDetail["intermediaryAddress"];
//$("#intermediary_name").append();
})
}
if (selectedType == "Outsource") {
var txt = "<input type='text' maxlength=50 class='form-control text-alphanumeric-field-alignment' id='intermediary_name' name='intermediary_name'>"
$("#intermediary_name").replaceWith(txt);
document.getElementById("intermediary_name").value = "";
document.getElementById("int_spoc_name").value = "";
document.getElementById("int_emailid").value = "";
document.getElementById("int_phonenumber").value = "";
document.getElementById("int_address").value = "";
}
});
<div class="container">
<div class="h2"> Intermediary Details</div>
<div class="row">
<div class="form-group col-md-3 mb-5 ">
<label class="field" for="sel1">Type <span
style="color: red; font-size: large;">*</span></label>
<select name="intermediary_type" class="form-control" id="intermediary_type" required>
<option selected disabled>Select</option>
<option value="">Broker</option>
<option value="">Field Functionary</option>
<option value="">Outsource</option>
</select>
</div>
<div class="form-group col-md-3 mb-5 ">
<label class="field" for="sel1">Name </label>
<select name="intermediary_name" class="form-control" id="intermediary_name" required>
<option selected disabled>Select</option>
</select>
</div>
<div class="col-md-3 mb-5">
<label for="" class="form-label field">Spoc Name</label>
<input type="text" name="spoc_name" class="form-control" placeholder="" id="int_spoc_name" aria-label="" value="">
</div>
<div class="col-md-3 mb-5">
<label for="" class="form-label field">Email ID</label>
<input type="text" name="int_emailid" class="form-control" placeholder="" id="int_emailid" aria-label="" value="">
</div>
<div class="col-md-3 mb-5">
<label for="inputBank_Branch_Address" class="form-label field">Phone Number</label>
<input type="text" name="int_phonenumber" class="form-control" placeholder="" id="int_phonenumber" aria-label="" value="">
</div>
<div class="col-md-3 mb-5">
<label for="inputBank_Branch_Address" class="form-label field">Address</label>
<input type="text" name="int_address" class="form-control" placeholder="" id="int_address" aria-label="" value="">
</div>
</div>
</div>

Last-child not working inside iteration of div

In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>

How to get input value based on option value selected?

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);
});

Categories