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:

How do I get the product per row using jquery?

How can I get the product per row in the table?
Example in table:
data1 data2 data3 total
1 2 3 6
2 2 3 12
Here is my html table that I have created:
$(document).ready(function() {
$(".txtMult input").keyup(multInputs);
function multInputs() {
// for each row:
$("tr.txtMult").each(function() {
// get the values from this row:
var $data1 = $('.data1', this).val();
var $data2 = $('.data2', this).val();
var $data3 = $('.data3', this).val();
var $total = ($data3 * 1) * ($data2 * 1) * ($data3 * 1);
$('.multTotal', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
</th>
<th>
total
</th>
</tr>
<tr class="txtMult">
<td>
<input name="data1" class="data1" />
</td>
<td>
<input name="data2" class="data2" />
</td>
<td>
<input name="data3" class="data3" />
</td>
<td>
<input class="multTotal" type="number" />
</td>
</tr>
</table>

Run this and its multiplying correctly. You had it doing data3 * data2 * data3 instead of 1 2 and 3
$(document).ready(function() {
$(".txtMult input").keyup(multInputs);
function multInputs() {
// for each row:
$("tr.txtMult").each(function() {
// get the values from this row:
var $data1 = $('.data1', this).val();
var $data2 = $('.data2', this).val();
var $data3 = $('.data3', this).val();
var $total = ($data1) * ($data2) * ($data3);
$('.multTotal', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
</th>
<th>
total
</th>
</tr>
<tr class="txtMult">
<td>
<input name="data1" class="data1" />
</td>
<td>
<input name="data2" class="data2" />
</td>
<td>
<input name="data3" class="data3" />
</td>
<td>
<input class="multTotal" type="number" />
</td>
</tr>
</table>

var $data1 = $( ".data1" ).val();
var $data2 = $( ".data2" ).val();
var $data3 = $( ".data3" ).val();
var $total = ($data1) * ($data2) * ($data3);
$('.multTotal').val($total);
put the val in each var then multiplied, then put the total in the multiTotal :)

$(document).ready(function() {
$(".txtMult input").keyup(multInputs);
function multInputs() {
// for each row:
$("tr.txtMult").each(function() {
// get the values from this row:
var $data1 = $('.data1', this).val();
var $data2 = $('.data2', this).val();
var $data3 = $('.data3', this).val();
var $total = ($data1 * 1) * ($data2 * 1) * ($data3 * 1);
$('.multTotal', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
</th>
<th>
total
</th>
</tr>
<tr class="txtMult">
<td>
<input name="data1" class="data1" />
</td>
<td>
<input name="data2" class="data2" />
</td>
<td>
<input name="data3" class="data3" />
</td>
<td>
<input class="multTotal" type="number" />
</td>
</tr>
</table>

Thanks guys for the help.
I got the solution for these
`$(document).on("keyup", ".data1, .data2, .data3", function() {
var tablerow = $(this).parent("td").parent("tr");
var data1 = tablerow.find(".data1").val();
var data2 = tablerow.find(".data2").val();
var data3 = tablerow.find(".data3").val();
var total = data1 * data2 * data3;
tablerow.find(".multTotal").val(total);
});
`

Percentage of two numbers and show final result in another td

I have a table that consists of tr and tds and I show the percentage of sold ticket in third td.My code has problem whenever I write "Mytext" instead of number and calculate wrong moreover it shows infinity instead of showing write percentage. How can I define if the td has "mytext" instead of number , set the closest number in sold column instead of that text and then calculate ?For instance if there was Mytext in avalable column and 5 in sold column replace 5 with text and then calculate ?
here is my code :
$('table tbody tr').each(function() {
var $this = this,
td2Value = $('td:nth-child(2)', $this).text().trim().split(/\D+/);
$('span.result', $this).each(function (index, element) {
let v = $('td:nth-child(1)', $this).text().trim().split(/\D+/);
$(element).html(Math.round((td2Value[index] * 100 / v[index]) || 0) + '%');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th> avalable</th>
<th> sold</th>
<th> result </th>
</tr>
</thead>
<tbody>
<tr>
<td>
Mytext<br>
10<br/>
</td>
<td>
5<br/>
2<br/>
</td>
<td>
<span class="result"></span><br/>
<span class="result"></span><br/>
</td>
</tr>
</tbody>
</table>

remove the regex number in available column, then check for the value if it equals Mytext change it
$('table tbody tr').each(function() {
var $this = this,
td2Value = $('td:nth-child(2)', $this).text().trim().split(/\D+/);
$('span.result', $this).each(function (index, element) {
//change starts here
let v = $('td:nth-child(1)', $this).text().trim().split(/\r?\n/);
if(v[index] != null && v[index].trim() == "Mytext")
{
v[index] = td2Value[index];
}
if(v[index] != null )
{
$(element).html(Math.round((td2Value[index] * 100 / v[index]) || 0) + '%');
}
//change ends here
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th> avalable</th>
<th> sold</th>
<th> result </th>
</tr>
</thead>
<tbody>
<tr>
<td>
Mytext<br>
10<br/>
</td>
<td>
5<br/>
2<br/>
</td>
<td>
<span class="result"></span><br/>
<span class="result"></span><br/>
</td>
</tr>
</tbody>
</table>

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.

How to use operations based on the number of user inputs?

I am trying to make a simple calculator which tells students their average university mark based on their grades.
JSFiddle
I'm trying to get the formula to do this:
Step 1: (Mark * Credit Point)
Step 2: Add these totals together
Step 3: Get this total and divide it by the number of user inputs.
Having trouble with steps 2 and 3.
Right now when calculate is clicked, it just appends the single answer of each row one after the other. I want to add these values then divide it by the number of inputs.(As the amount of subjects will vary between users)
Any help is really appreciated.
HTML:
<div>
<table class='table'>
<tr>
<th> Unit Code </th>
<th> Mark </th>
<th> Credit Point </th>
</tr>
<tr>
<td> <input type="text"></td>
<td> <input type="text" class='mark'> </td>
<td> <input type="text" class='creditPoint'> </td>
</tr>
<tr>
<td> <input type="text"></td>
<td> <input type="text" class='mark'> </td>
<td> <input type="text" class='creditPoint'> </td>
</tr>
<tr>
<td> <input type="text"></td>
<td> <input type="text" class='mark'></td>
<td> <input type="text" class='creditPoint'> </td>
</tr>
</table>
</div>
Javascript:
$('#wam').click(function() {
$('.table tr').each(function() {
var mark = $(this).find('input.mark').val();
var cp = $(this).find('input.creditPoint').val();
var total = ((mark * cp));
// Find the total then divide by the number of entries
$('body').append(total);
});
});

You need to use a shared variable in the loop
$('#wam').click(function () {
var total = 0,
count = 0;
$('input.mark').each(function () {
var mark = this.value;
var cp = $(this).parent().next().find('input.creditPoint').val();
var t = mark * cp || 0;//if both the fields are not entered don't add them
if (t) {
//if the product is 0 then don't count the value
count++;
}
total += t;
});
$('#total').text(total);
$('#total2').text(count ? total / count : 0);//the ternary condition to prevent division by 0
});
Demo: Fiddle