Develop Reference

How to do calculation where a value has to be entered in a row for each row of table using Razor Pages and JavaScript?

I have a table for product data and the user can enter the amount of a product to buy in each row.
I would like to compute the total price per product in each row and then the total price of the whole purchase below the table.
This is my table:
<table id="productTable">
<thead>
<tr>
<th>Amount</th>
<th>
#Html.DisplayNameFor(model => model.Products[0].Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Products[0].Price)
</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Products)
{
<tr>
<td>
<input type="number" id="quantityInput" onchange="calcSubTotal()" min="0" value="0" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td id="priceLabel">
#Html.DisplayFor(modelItem => item.Price)
</td>
<td id="labelSubTotal"></td>
</tr>
}
</tbody>
The items are coming from the model (IList). I want to multiply the entered value of the input (type number) and the price of the corressponding row using JavaScript.
In JavaScript I am using getElementById to access the UI-Elements. How I can access the row of the table where the focus of the HTML-Input is?
My JavaScript:
<script type="text/javascript">
function calcSubTotal() {
var numberInput = document.getElementById('quantityInput');
var val = numberInput.value;
var amount = parseFloat(val);
var priceLabel = document.getElementById('priceLabel');
var priceValue = priceLabel.innerText;
var price = parseFloat(priceValue);
var totalPrice = amount * price;
var subTotalLabel = document.getElementById('labelSubTotal');
subTotalLabel.innerText = totalPrice.toString();
}
</script>

It may work if only have one record.But you have several raws of record.Each id of Price and Total are the same.You need to distinguish the id like below:
<table id="productTable">
//..
<tbody>
#{
int i = 0; //add this..
}
#foreach (var item in Model.Products)
{
<tr>
<td>
//change the onchange function...
<input type="number" id="quantityInput" onchange="calcSubTotal(this,#i)" min="0" value="0" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td id="priceLabel_#i"> //change here...
#Html.DisplayFor(modelItem => item.Price)
</td>
<td id="labelSubTotal_#i"></td> //change here...
</tr>
i++; //add this....
}
</tbody>
</table>
#section Scripts
{
<script type="text/javascript">
function calcSubTotal(element,index) {
var numberInput = $(element).val();
var amount = parseFloat(numberInput);
var priceLabel = document.getElementById('priceLabel_'+index);
var priceValue = priceLabel.innerText;
var price = parseFloat(priceValue);
var totalPrice = amount * price;
var subTotalLabel = document.getElementById('labelSubTotal_'+index);
subTotalLabel.innerText = totalPrice.toString();
}
</script>
}
Result:

Javascript and Ajax each row 3 different Total Calculations not working properly

Here is the script used by ajax library and javascript.
Total order column Total price working fine.
But
Total Calculations for the discount column and net price column not working properly.
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 25;
$('.row1c').html((row1c).toFixed(2));
});
$('.row1a').keyup(function(ev){
var row1ac = $(this).val() * 15;
$('.row1ac').html((row1ac).toFixed(2));
});
$('.row1b').keyup(function(ev){
var row1bc = $(this).val() * 10;
$('.row1bc').html((row1bc).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 45;
$('.row2c').html((row2c).toFixed(2));
});
$('.row2a').keyup(function(ev){
var row2ac = $(this).val() * 25;
$('.row2ac').html((row2ac).toFixed(2));
});
$('.row2b').keyup(function(ev){
var row2bc = $(this).val() * 20;
$('.row2bc').html((row2bc).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row55c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row555c').text(total.toFixed(2));
})
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<tr>
<th>Cracker Name</th>
<th>Cracker Photo</th>
<th>Packing Model</th>
<th>Retail Price</th>
<th>You Save (Discount - 60%) <br /></th>
<th>Selling Price<br /></th>
<th>Quantity</th>
<th>Total Order</th>
<th>Discount</th>
<th>Net Price</th>
</tr>
<tr>
<td>3.5'' Laxmi</td>
<td>--</td>
<td>5 in 1 Packet</td>
<td>25</td>
<td>15</td>
<td>10</td>
<td>
<input type="text" name="pages" class="row1 row1a row1b" /> </td>
<td><span class="row1c">0.00</span> </td>
<td><span class="row1ac">0.00</span> </td>
<td><span class="row1bc">0.00</span> </td>
</tr>
<tr>
<td>3.5'' Laxmi</td>
<td>--</td>
<td>5 in 1 Packet</td>
<td>45</td>
<td>25</td>
<td>20</td>
<td>
<input type="text" name="pages" class="row2 row2a row2b" /> </td>
<td><span class="row2c">0.00</span> </td>
<td><span class="row2ac">0.00</span> </td>
<td><span class="row2bc">0.00</span> </td>
</tr>
<tr>
<td colspan="7" align="right">Total </td>
<td><span class="row5c">0.00</span> </td>
<td><span class="row55c">0.00</span> </td>
<td><span class="row555c">0.00</span> </td>
</tr>
</table>

Update to your SCRIPT with the below code.
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 25;
$('.row1c').html((row1c).toFixed(2));
});
$('.row1a').keyup(function(ev){
var row1ac = $(this).val() * 15;
$('.row1ac').html((row1ac).toFixed(2));
});
$('.row1b').keyup(function(ev){
var row1bc = $(this).val() * 10;
$('.row1bc').html((row1bc).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 45;
$('.row2c').html((row2c).toFixed(2));
});
$('.row2a').keyup(function(ev){
var row2ac = $(this).val() * 25;
$('.row2ac').html((row2ac).toFixed(2));
});
$('.row2b').keyup(function(ev){
var row2bc = $(this).val() * 20;
$('.row2bc').html((row2bc).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().next().find('span').text());
})
$('.row55c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().next().next().find('span').text());
})
$('.row555c').text(total.toFixed(2));
})
});
just changed two lines
for discount:
total += Number($(this).parent().next().next().find('span').text());
and for net total
Number($(this).parent().next().next().next().find('span').text());
DEMO

Assign classes to your elements as below :
<td><input type="text" name="pages" class="row1 row1a row1b" /></td>
<td><span class="row1c total1">0.00</span></td>
<td><span class="row1ac total2">0.00</span></td>
<td><span class="row1bc tota3">0.00</span></td>
And
<td><input type="text" name="pages" class="row2 row2a row2b" /></td>
<td><span class="row2c total1">0.00</span></td>
<td><span class="row2ac total2">0.00</span></td>
<td><span class="row2bc tota3">0.00</span></td>
Functions that calculate totals should look like this :
$('input[type=text]').keyup(function() {
var total = 0;
$('.total1').each(function() {
total += Number($(this).text());
})
$('.row5c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
var total = 0;
$('.total2').each(function() {
total += Number($(this).text());
})
$('.row55c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
var total = 0;
$('total3').each(function() {
total += Number($(this).text());
})
$('.row555c').text(total.toFixed(2));
});

Jquery subtotal function conflicting with js gst function

O.k today is starting to be 1 step forward and 2 steps back. I have a Jquery function that does the price x qty = subtotal in the form and then each subtotal is calculated into a total, Which is all fine and dandy. I then have a plain js function that took that total value and added the gst and then a further subtotal figure which was created on it's own and works then at this point when i tried to move it over the gst and finial total functions won't work and i can't get any error codes out of it either. At this point i can only assume that the js script can't talk to the Jquery script or something is really wrong.
// Jquery script
<script type="text/javascript">
jQuery(function($) {
$(".qty, .tradeprice").change(function() {
var total = 0;
$(".qty").each(function() {
var $qty = $(this),
$row = $qty.closest('tr'),
$tradePrice = $row.find('.tradeprice'),
$subtotal = $row.find('.subtotal');
subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
total += subtotal;
$subtotal.val(subtotal);
});
$('.total').val(total);
}).change();
});
</script>
// JS script
<script type="text/javascript">
function updatePrice() {
// Get the ex-GST price from its form element
var exPrice = document.getElementById("ex-gst").value;
var gstPrice = document.getElementById("gst").value;
// Get the GST price
gstPrice = exPrice * 0.1;
var TPrice = parseInt(gstPrice) + parseInt(exPrice);
// Set the GST price in its form element
document.getElementById("gst").value = gstPrice;
document.getElementById("inc-gst").value = TPrice;
}
</script>
// bottom of HTML
<form>
<table>
<tr>
<th><input type='text' name='po101' id='po101'/></th>
<td><input name='po102' type='text' id="po102"/></td>
<td><input name='po103' type='text' id="po103" /></td>
<td>$<input name='po104' type="text" class='tradeprice' id="po104" value="0" /></td>
<th><input name='po105' type="text" class='qty' id="po105" value="0" /></th>
<td><input name='po106' type='text' class='subtotal' id="po106" readonly="true" /></td>
</tr>
<tr>
<th height='24' colspan="7">Total:<input type='text' id='Total' name='Total' class='total' readonly="true" onChange="updatePrice()"/></th>
</tr>
<tr>
<th height='24' colspan="7"><div id='submit'><input type='submit' /></div></th>
</tr>
<tr>
<th height='24' colspan="7">
<input type='text' id="gst" name='gst' onChange="updatePrice()" />
<input type='text' id="inc-gst" name='inc-gst' onChange="updatePrice(this.form)"/>
</th>
</tr>
</table>
</form>

I have now edited you code, and changed this line
var exPrice = document.getElementById("ex-gst").value;
to
var exPrice = document.getElementById("Total").value;
I have also updated the code by removing onChange() from HTML and added the trigger for your updatePrice() function to the change event.
And then this is the result (I have also added the jQuery version as comments, both will work).
jQuery(function($) {
$(".qty, .tradeprice").change(function() {
var total = 0;
$(".qty").each(function() {
var $qty = $(this),
$row = $qty.closest('tr'),
$tradePrice = $row.find('.tradeprice'),
$subtotal = $row.find('.subtotal');
subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
total += subtotal;
$subtotal.val(subtotal);
});
$('.total').val(total);
updatePrice();
}).change();
});
function updatePrice() {
// Get the ex-GST price from its form element
var exPrice = document.getElementById("Total").value;
//var exPrice = $('#Total').val() //this is jQuery
var gstPrice = document.getElementById("gst").value;
//var exPrice = $('#gst').val() //this is jQuery
// Get the GST price
gstPrice = exPrice * 0.1;
var TPrice = parseInt(gstPrice) + parseInt(exPrice);
// Set the GST price in its form element
document.getElementById("gst").value = gstPrice;
//$('#gst').val(gstPrice) //this is jQuery
document.getElementById("inc-gst").value = TPrice;
//$('#inc-gst').val(TPrice) //this is jQuery
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<th>
<input type='text' name='po101' id='po101' />
</th>
<td>
<input name='po102' type='text' id="po102" />
</td>
<td>
<input name='po103' type='text' id="po103" />
</td>
<td>$
<input name='po104' type="text" class='tradeprice' id="po104" value="0" />
</td>
<th>
<input name='po105' type="text" class='qty' id="po105" value="0" />
</th>
<td>
<input name='po106' type='text' class='subtotal' id="po106" readonly="true" />
</td>
</tr>
<tr>
<th height='24' colspan="7">Total:
<input type='text' id='Total' name='Total' class='total' readonly="true" />
</th>
</tr>
<tr>
<th height='24' colspan="7">
<div id='submit'>
<input type='submit' />
</div>
</th>
</tr>
<tr>
<th height='24' colspan="7">
<input type='text' id="gst" name='gst' />
<input type='text' id="inc-gst" name='inc-gst' />
</th>
</tr>
</table>
</form>

Doing some calculations on html table using Javascript issue

Hi i am trying to do the some calculations on HTML table using javascript code
but i am having issues getting percentage values
demo: jsfiddle
when i entered the below sample data i got this result
Quantity Unit Price Total Percentage
1 5 5 Infinity
2 5 10 2
3 5 15 1
Grand Total 30
as you can see percentage values are wrong
Percentage = Total / Grand Total
So percentage values should be like this
Percentage
0.16
0.33
0.5
Javascript
<script>
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("tr.txtMult").each(function () {
// get the values from this row:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1) * ($val2);
var $Percentage = ($total / mult) * 100;
$('.percentage', this).text($Percentage);
$('.multTotal', this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}
});
</script>
HTML
<table>
<tr>
<th>Quantity
</th>
<th>Unit Price
</th>
<th>Total
</th>
<th>Percentage
</th>
</tr>
<tr class="txtMult">
<td>
<input name="txtbox1" class="val1" />
</td>
<td>
<input name="txtbox2" class="val2" />
</td>
<td>
<span class="multTotal">0.00</span>
</td>
<td>
<span class="percentage">0</span>
</td>
</tr>
<tr class="txtMult">
<td>
<input name="txtbox1" class="val1" />
</td>
<td>
<input name="txtbox2" class="val2" />
</td>
<td>
<span class="multTotal">0.00</span>
</td>
<td>
<span class="percentage">0</span>
</td>
</tr>
<tr class="txtMult">
<td>
<input name="txtbox" class="val1" />
</td>
<td>
<input name="txtbox" class="val2" />
</td>
<td>
<span class="multTotal">0.00</span>
</td>
<td>
<span class="percentage">0</span>
</td>
</tr>
<tr>
<td colspan="3" ">Grand Total <span id="grandTotal">0.00</span>
</td>
</tr>
</table>
Your help is much appreciated

Here is some working JS code that I tested in the fiddle:
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var $mult = 0;
// calculate Grand total
$("tr.txtMult").each(function () {
// get the values from this row:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1) * ($val2);
$mult += $total;
});
// for each row:
$("tr.txtMult").each(function () {
// get the values from this row:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1) * ($val2);
var $Percentage = (($total / $mult)).toFixed(2);
$('.percentage', this).text($Percentage);
$('.multTotal', this).text($total);
});
$("#grandTotal").text($mult);
}
});
I calculated the grand total first then divided each row total by the grand total. Also, .toFixed(2) can be used to round to 2 decimal places if desired.

Change cell value depending on input of another cell with JavaScript

thanks to peoples help on here I have nearly finished what I set out to do yesterday/
I have included a fiddle here http://jsfiddle.net/uzW5e/
I would like it that when someone enters a value greater than 85 in the column headed Percentage Grade (class percGrade) the value 1 is put in the column headed Pass Level (class passLevel) but it isn't working?
<table align="center">
<tr>
<th>
Module
</th>
<th>
Percentage Grade
</th>
<th>
Credits
</th>
<th>
Pass Level
</th>
<th>
WGC
</th>
</tr>
<tr class="multRow">
<td>
<input name="module" />
</td>
<td>
<input name="percentageGrade" class="percGrade" />
</td>
<td>
<input name="credits" class="credits"/>
</td>
<td>
<input name="passLevel" class="passLevel"/>
</td>
<td>
<span class="multTotal">0.00</span>
</td>
</tr>
<tr>
<td colspan="5" align="right">
Total <span id="grandTotal">0</span>
</td>
<script>
$(document).ready(function () {
$(".multRow input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("tr.multRow").each(function () {
// check value entered for Percentage Grade
// & change Pass Level to value accordingly
var $num = 0;
if ($('.percGrade', this).val() > 85) {
$num = 1;
$('.passLevel',this).text($num);
}
// get the values from this row:
var $val1 = $('.credits', this).val();
var $val3 = $('.percGrade', this).val();
var $val2 = $('.passLevel', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}
});
</script>

Since .passLevel is a text field, you should use .val instead of .text:
$('.passLevel',this).val($num);