Enter multiple data from MySQL into multiple inputs with select option

Enter multiple data from MySQL into multiple inputs with select option - javascript

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

Related

sql add "n" row with values

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>

Search filter in angular js

I am trying to implement the search filter for the following application using angularjs. But it's not working as intended. I am new to this so I am not sure what I've done wrong here. Can someone help?
Here is my code so far:-
index.html file :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Controller/app.js"></script>
<script src="Controller/storage.js"></script>
</head>
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectID" class="col-sm-3 col-form-label">Project ID: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectID" required ng-model="itm.projectID">
</div>
</div>
<div class="form-group col-sm-6">
<label for="projectName" class="col-sm-3 col-form-label">Project Name: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectName" required ng-model="itm.projectName">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectOwner" class="col-sm-3 col-form-label">Project Owner: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectOwner" required ng-model="itm.projectOwner">
</div>
</div>
<div class="form-group col-sm-6">
<label for="keyStake" class="col-sm-3 col-form-label">Key Stakeholders: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="keyStake" required ng-model="itm.keyStake">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="prepBy" class="col-sm-3 col-form-label">Prepared By: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="prepBy" required ng-model="itm.prepBy">
</div>
</div>
<div class="form-group col-sm-6">
<label for="reqDate" class="col-sm-3 col-form-label">Requested Date: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reqDate" required ng-model="itm.reqDate">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group" ng-submit="submitDetails()" role="form">
<div class="form-group col-sm-6" class="input-group mb-3">
<label for="inputGroupSelect01" class="col-sm-3 col-form-label">Status: </label>
<div class="col-sm-9">
<select name="status" class="form-control custom-select" ng-options="user.option for user in arrlist" required ng-model="user.itm.status">
<option value="">Select..</option>
</select>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label for="dept" class="col-sm-3 col-form-label">Department: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dept" required ng-model="itm.dept">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group purple-border">
<div class="col-sm-2">
<label for="projSummary">Project Summary: </label>
</div>
<div class="col-sm-10">
<textarea class="form-control" id="projSummary" required ng-model="itm.projSummary" rows="3"></textarea>
</div>
</div>
</form>
<div class="form-row text-center">
<div class="col-12">
<button ng-disabled="kfgPmForm.$invalid" ng-click="update(itm)" class="btn btn-info">SUBMIT</button>
<div><br></div>
</form>
<div><br></div>
<div class="col-sm-12" class="form-horizontal">
<label for="search" class="col-sm-3 col-form-label">Search: </label>
<div class="col-sm-6">
<input ng-model="searchText" class="form-control" ng-keyup="filterFunc()">
<div><br></div>
</div>
</div>
<div class="results">
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead class="thead-light">
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Project Owner</th>
<th>Key Stakeholders</th>
<th>Prepared By</th>
<th>Requested Date</th>
<th>Status</th>
<th>Department</th>
<th>Project Summary</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in master | filter: itm.search">
<td><span ng-hide="editMode">{{itm.projectID}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectID" />
</td>
<td><span ng-hide="editMode">{{itm.projectName}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectName" />
</td>
<td><span ng-hide="editMode">{{itm.projectOwner}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectOwner" />
</td>
<td><span ng-hide="editMode">{{itm.keyStake}}</span>
<input type="text" ng-show="editMode" ng-model="itm.keyStake" />
</td>
<td><span ng-hide="editMode">{{itm.prepBy}}</span>
<input type="text" ng-show="editMode" ng-model="itm.prepBy" />
</td>
<td><span ng-hide="editMode">{{itm.reqDate}}</span>
<input type="text" ng-show="editMode" ng-model="itm.reqDate" />
</td>
<td><span ng-hide="editMode">{{itm.status.option}}</span>
<input type="text" ng-show="editMode" ng-model="itm.status" />
</td>
<td><span ng-hide="editMode">{{itm.dept}}</span>
<input type="text" ng-show="editMode" ng-model="itm.dept" />
</td>
<td><span ng-hide="editMode">{{itm.projSummary}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projSummary" />
</td>
<td>
<button ng-click="EditProject(itm)" class="btn btn-primary">Edit</button>
<button ng-hide="editMode" ng-click="removeItem($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
This is my app.js file:
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
var app = angular.module('kfgPm', ['storageService']);
app.controller('MainCtrl', ['$scope', 'getLocalStorage', function($scope, getLocalStorage) {
$scope.EditProject = EditProject;
$scope.master = getLocalStorage.getData();
$scope.master = [];
$scope.update = function() {
var IsNew = true; //if the data entered in the field is new
angular.forEach($scope.master, function(LItem, key) {
if (LItem.projectID == $scope.itm.projectID) { //if the new project ID equals old project ID
IsNew = false; //data entered is to be edited
LItem.projectID = $scope.itm.projectID;
LItem.projectName = $scope.itm.projectName;
LItem.projectOwner = $scope.itm.projectOwner;
LItem.keyStake = $scope.itm.keyStake;
LItem.prepBy = $scope.itm.prepBy;
LItem.reqDate = $scope.itm.reqDate;
LItem.status = $scope.itm.status;
LItem.dept = $scope.itm.dept;
LItem.projSummary = $scope.itm.projSummary;
}
});
if (IsNew) { //if new data
$scope.master.push({ //add to the fields
'projectID': $scope.itm.projectID,
'projectName': $scope.itm.projectName,
'projectOwner': $scope.itm.projectOwner,
'keyStake': $scope.itm.keyStake,
'prepBy': $scope.itm.prepBy,
'reqDate': $scope.itm.reqDate,
'status': $scope.itm.status,
'dept': $scope.itm.dept,
'projSummary': $scope.itm.projSummary,
});
}
getLocalStorage.update($scope.master);
$scope.itm.projectID = '';
$scope.itm.projectName = '';
$scope.itm.projectOwner = '';
$scope.itm.keyStake = '';
$scope.itm.prepBy = '';
$scope.itm.reqDate = '';
$scope.itm.status = '';
$scope.itm.dept = '';
$scope.itm.projSummary = '';
},
$scope.removeItem = function(index) {
console.log(index);
$scope.master.splice(index, 1)
getLocalStorage.update($scope.master);
},
$scope.editItem = function(index) {
getLocalStorage.update($scope.master);
$scope.editing = $scope.master.indexOf(index);
}
function EditProject(pItem) { //if edit is clicked the data is replaced in respective fields
$scope.itm.projectID = pItem.projectID;
$scope.itm.projectName = pItem.projectName;
$scope.itm.projectOwner = pItem.projectOwner;
$scope.itm.keyStake = pItem.keyStake;
$scope.itm.prepBy = pItem.prepBy;
$scope.itm.reqDate = pItem.reqDate;
$scope.itm.status = pItem.status;
$scope.itm.dept = pItem.dept;
$scope.itm.projSummary = pItem.projSummary;
console.log(pItem);
}
$scope.arrlist = [{
"id": 1,
"option": "One"
}, {
"id": 2,
"option": "Two"
}];
$scope.userselected = $scope.arrlist[1];
$scope.LItem = angular.copy($scope.update);
$scope.filterFunc = function() {
$scope.LItem = $filter('filter')($scope.update, { $: $scope.searchText });
}
$scope.submitForm = function(isValid) {
if (isValid) {
alert('Submitted Successfully');
}
};
}]);
}
I am trying to implement the search for all columns such that when I type something in the search text field, it should return only the row with those searched terms and the rest of the rows would be hidden in the table.

To start, I see the following problems:
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<!-- duplicate class attribute -->
<div class="col-sm-12" class="form-horizontal" role="form">
<!-- end tag seen too early -->
</div>
</div>
Duplicate class attribute -- the second one will be ignored
End tag seen too early - the scope of the controller will be limited
These two errors alone will cause the app to fail.
Also angular.js and bootstrap.js do not play well together. They do not co-ordinate their manipulation of the DOM.

How can i get selected checkbox value into database?

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

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

Array in ng-repeat isn't showing

I have a problem with my ng-repeat. I am working in a project and I'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array.
In the table below, it was supposed to show the array. But it isn't showing.
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject"> Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject"> Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
</div>
<div class="form-group">
<label for="inputScoreSubject"> Grade </label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
</form>
</div>
<br><br><br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings"> {{head}}</th>
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</table>
</div>
angular.module('myProjectApp')
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function(){
$scope.grades.push($scope.grade);
console.log($scope.grades);
}
});

Because you close off your tr element so your td elements are not considered in the same scope as your ng-repeat and do not get printed correctly. Not to mention it is also not valid html.
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
should be
<tr ng-repeat="gr in grades track by $index" >
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</tr>

Patrick beat me to it!
angular.module('myProjectApp', [])
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function() {
$scope.grades.push($scope.grade);
console.log(JSON.stringify($scope.grades));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myProjectApp" ng-controller="MainCtrl">
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject">Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject">Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
</div>
<div class="form-group">
<label for="inputScoreSubject">Grade</label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
</form>
</div>
<br>
<br>
<br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings">{{head}}</th>
<tr ng-repeat="gr in grades">
<td>{{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td>{{gr.score}}</td>
</tr>
</table>
</div>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Enter multiple data from MySQL into multiple inputs with select option - javascript

Related

sql add "n" row with values

Search filter in angular js

How can i get selected checkbox value into database?

How to get input value based on option value selected?

Array in ng-repeat isn't showing

Categories

Resources