How to calculate total weight of columns with AngularJS - javascript

I am trying to create a weight calculator for a list of products. But, I am having problem to calculate and display the sum total.
I am having the problem where I call the function GeneralTotalWeight() at the bottom. I think it doesnt get triggered.
this is the screenshot of the html. I marked the label with yellow.
here is the html.
<tbody>
<tr ng-repeat="article in articles">
<td>
<input type="text" ng-model="article.size" class="form-control" placeholder="Ölçü" min=0 disabled>
</td>
<td>
<input type="text" ng-model="article.name" class="form-control" placeholder="Ürün" min=0 disabled>
</td>
<td>
<input type="number" ng-model="article.quantity" class="form-control bfh-number" step=1>
</td>
<td>
<label ng-model="article.meter" class="form-control bfh-number" style="width:150px" disabled>
{{article.quantity*6}}
</label>
</td>
<td>
<input type="number" ng-model="article.weight" class="form-control bfh-number" min=0 disabled>
</td>
<td>
#*<input type="number" ng-model="article.totalWeight" class="form-control bfh-number" min=0 disabled>*#
<label ng-model="article.totalWeight" class="form-control bfh-number" style="width:150px" disabled>
{{article.quantity*6*article.weight}}
</label>
</td>
</tr>
<tr class="success">
<td class="success">TOPLAM</td>
<td class="success"></td>
<td ng-model="article.totalQuantityX" class="success">{{ GeneralTotalQuantity() }} Boy</td>
<td class="success">{{ GeneralTotalMeter() }} metre</td>
<td class="success"></td>
<td ng-model="article.totalWeightX" class="success">{{ GeneralTotalWeight() | number:2 }} KG</td>
</tr>
</tbody>
the code is below...
$scope.GeneralTotalWeight = function () {
var resultWeight = 0;
angular.forEach($scope.articles, function (article) {
resultWeight += article.totalWeight * article.meter;
});
return resultWeight;
};
How can I fix this error? Thanks in advance.


you should not use expression and ng-model at a same time. Remove ng-model from it. and pass articles directly in your function
<td class="success">{{ GeneralTotalWeight(articles) | number:2 }} KG</td>
and function should be like
$scope.GeneralTotalWeight = function (articles) {
var resultWeight = 0;
angular.forEach(articles, function (article) {
resultWeight += article.totalWeight * article.meter;
});
return resultWeight;
};

Related

jQuery change other value if main input form is (on.change)

I am using Laravel and javascript + jQuery then, what I need is if I click the select option value, it will change the other form input based on (count value).
Here is my preview image :
nah if i click the value of select option in "Tipe Biaya" column, it will count jumlah column*biaya operational column then put the result in total column (in One row).
here my Html code:
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
#foreach($branches as $key => $fb)
<tr>
<td class="pt-3-half text-left">
{{ $fb->name }}
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
Here my JavaScript and jQuery
$(document).ready(function(){
var count = 0;
$(".operational_cost_type").each(function() {
$(this).change(function(){
event.preventDefault();
var var_operational_cost_type = $(this).val();
var var_each_operational_cost = $(this).closest('.each_operational_cost');
var var_total_operational_cost = $(this).find('.total_operational_cost').val();
console.log(var_each_operational_cost);
});
count++;
});
});
Thank you so much!

You can get value of jumlah and biaya column using $(this).closest("tr").find.. then simply use .val() to add result inside your total column inputs.
Demo Code :
$(document).ready(function() {
var count = 0;
//if you need on chnage of input as well(else remove that input[type=number]..)
$(document).on("change input", ".operational_cost_type , input[type=number]", function() {
event.preventDefault();
var var_operational_cost_type = $(this).val();
var selector = $(this).closest("tr")
//get product quantity
var product_quantity = selector.find('.product_quantity').val();
var total_operational_cost = selector.find('.total_operational_cost')
//get opertional cost
var each_operational_cost = selector.find('.each_operational_cost').val();
//mutliply and add total to total col
total_operational_cost.val(product_quantity * each_operational_cost)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
<tr>
<td class="pt-3-half text-left">
something
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something1
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something2
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
</tbody>
</table>

How to get the column sum total values of last 2 column's in this dynamic table

The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.

Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE

Changing form input to read only when elements reproduced

So I am pretty clueless when it comes to jQuery and just inherited someone else's code. Any help is greatly appreciated.
I have a form that is populated from a query as they add students to the form. They can have any number of students added to the form. Below is the html:
<table style="width:100%">
<tr>
<td colspan="2">
<label class="control-label" >Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label" >Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Address 2 <small>(optional)</small></label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label" >City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label" >Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr><td colspan="4"> </td></tr>
</table>
Here is the jQuery function that I've been trying to modify:
jQuery(function($){
var addStudent = function(data){
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no!=''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$($('.student').last()).after(studentEl)
}
})
The function creates an additional set of fields for each student populated by the database for the form to process.
I'm looking to modify the specific field for "name" to be readonly (can view but not modify but yet still submit). I've tried many other iterations but cannot get the field name in the if clause to make only that field read only.
Any help provided would be great.

The proper way of getting an attribute via jQuery is just : $(this).attr("name")
Also instead of using:
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
Use the variable field that you already created:
var field = $(this).attr('name').replace('[]','')
if (field == 'name'){
$(this).prop("readonly", true);
}
See snippet below :
jQuery(function($) {
var addStudent = function(data) {
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function() {
var field = $(this).attr('name').replace('[]', '')
if (field == 'name') {
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if (data.client_no != '') {
studentEl.find('.will_update').text("Will update student information for " + data.name + '')
}
$($('.student').last()).after(studentEl)
}
$('button').click(function() {
addStudent({
client_no: 1,
name: "Ralph John "
})
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" class="student">
<tr>
<td colspan="2">
<label class="control-label">Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label">Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Address 2 <small>(optional)</small>
</label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label">City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label">Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</table>
<button>Add Student</button>

Couple problems in your code.
Use $('student').eq(0) instead of $($('.student').get(0))
You're getting the dom element from a jquery object and rewrapping it into a jquery object. The eq(index) function returns a jquery wrapped element.
You're trying to get a val property from attr("name"), which returns a string. You'll get undefined.
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
If you're trying to find the existence of the name attribute, just do
if ($(this).attr("name")){
$(this).prop("readonly", true);
}
Lastly, you don't need to rewrap a jquery object with a jquery object.
$($('.student').last())
Jquery functions return the jquery object, meaning you can chain calls, and you don't need to rewrap it.
$('.student').last()

You can modify your code as below. Assuming your table has class student here is a working demo - Fiddle.
$(function(){
var addStudent = function(data){
var studentEl = $('.student tr:first').clone();
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','');
if (field === 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no !== ''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$('.student').last().after(studentEl)
}
});

Automatically restart a new input

I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.

If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.

Calculating Subtotals for Category Sections Using Class Names

I'm working on a project that is based on an Excel spreadsheet, where I need to calculate budgets, etc. There are various categories in my table, and I need to calculate the subtotal of each category. Here's a screenshot to make it more clear:
http://i.imgur.com/loyLbW7.png
My problem is, I'm not sure how to calculate the subtoal for each category. Right now, I have $('.subcat100 .budget').each(function(). The class "subcat100" is attached to the tr and changes for each category section (subcat100, subcat200, subcat300, etc.). The numerical value is based off the sub category number stored in database. How would I pull all of these classes and iterate through them?
jQuery:
$(document).ready(function() {
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
var decimal = budget.toFixed(2);
$row.find('.budget').val(decimal);
var sum = 0;
$('.subcat100 .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat100 .budgetsubtotal').val(sum);
});
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
HTML:
<table>
<tbody>
<tr class="subcat100">
<td>
<span name="txtItemCode[]"><strong>100</strong></span>
</td>
<td colspan="7">
<span name="txtSubCategoryName[]" class="100"><strong>Land Purchase Costs</strong></span>
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="101">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Purchase price">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="1">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="299.99">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="299.99">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="249.99">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="50.00">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="110">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Realtor's fees">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="120">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Due diligence">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="15">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="45.00">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="675.00">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="700.00">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="-25.00">
</td>
</tr>
<tr class="subcat100">
<td colspan="5">
<span><strong>Subtotal</strong></span>
</td>
<td>
<input type="text" name="txtSubTotalBudget[]" class="budgetsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalActual[]" class="actualsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalDifference[]" class="differencesubtotal" size="10" readonly="readonly" value="">
</td>
</tr>
</tbody>
</table>

Well, I ended up doing this:
var itemcodes = <?php echo json_encode($arrItemCodes);?>;
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
$row.find('.budget').val(budget.toFixed(2));
$.each(itemcodes, function(intIndex, objValue) {
var sum = 0;
$('.subcat' + objValue + ' .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat' + objValue + ' .budgetsubtotal').val(sum.toFixed(2));
});
});
Open to other suggestions!

Categories

Resources