I have a jquery code which calculates the total amount.
$("#quantity").on("change keyup paste", function() {
var quantity = $(this).val();
//$('#display').text(quantity);
})
$("#buy").on("change keyup paste", function() {
var buy = $(this).val();
})
var total_amnt = (((quantity * buy) * 5) / 100) + (quantity * buy);
$('#tot_amnt_display').text(total_amnt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr style="text-align: center;">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Total Amount</td>
<td><span id="tot_amnt_display"></span></td>
</tr>
</tbody>
</table>
In the above code's result, it just shows NaN.
On Page Load
On Entering Values in the Input Box!
The default type of the value is of type string, you should convert the value to number. Also you do not need multiple event handler, simply pass the ids separated by comma.
Try the following way:
$("#quantity, #buy").on("change keyup paste", function() {
var quantity = Number($('#quantity').val());
var buy = Number($("#buy").val());
var total_amnt = (((quantity * buy) * 5) / 100) + (quantity * buy);
$('#tot_amnt_display').text(total_amnt);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr style="text-align: center;">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Total Amount</td>
<td><span id="tot_amnt_display"></span></td>
</tr>
</tbody>
</table>
Related
I am facing an issue where I need a value to be updated as I enter values into input fields.
There is also a variable pulled from a DB in laravel framework.
I have a field which takes the total amount due and applies the eftpos surcharge to the amount as a reference for how much is required to be paid via eftpos.
I would like to update this field based on the new balance is Cash/Cheque or Scholarship amounts are added (as this are not subject to the eftpos surcharge). The idea is to ensure we are correctly applying the EFTPOS Surcharge to the eftpos amount.
HTML Code
<table class="table">
<thead class="text-primary">
<th class="text-center">Method</th>
<th class="text-center">Amount</th>
<th></th>
</thead>
<tbody>
<tr>
<td class="text-center">EFTPOS</td>
<td class="text-center">$ <input type="number" step="0.01" name="eftpos"></td>
<td class="text-center"><a id="eftpos"> ${{ number_format(($income + $student->AdditionalItems->where('paid', 0)->sum('amount'))*(1+$eftpos), 2)}}</a> - Including Surcharge</td>
</tr>
<tr>
<td class="text-center">Cash</td>
<td class="text-center" id="cash">$ <input type="number" step="0.01" name="cash"></td>
<td></td>
</tr>
<tr>
<td class="text-center">Cheque</td>
<td class="text-center" id="cheque">$ <input type="number" step="0.01" name="cheque"></td>
<td></td>
</tr>
<tr>
<td class="text-center">Scholarship</td>
<td class="text-center" id="scholarship">$ <input type="number" step="0.01" name="scholarship"></td>
<td></td>
</tr>
</tbody>
</table>
Javascript Code
<script type="text/javascript">
window.onload = function () {
var cash = document.getElementById('cash');
cheque = document.getElementById('cheque');
scholarship = document.getElementById('scholarship');
total = document.getElementById('total');
eftpos = 1 + {!! json_encode($eftpos, JSON_HEX_TAG) !!};
trigFunc = function(){
eftpos.value = (total.value - (cash.value + cheque.value + scholarship.value))*eftpos.value;
document.getElementById('eftpos').innerHTML = eftpos.value;
console.log(eftpos.value);
}
cash.onchange = trigFunc;
cheque.onchage = trigFunc;
scholarship.onchange = trigFunc;
}
The $eftpos is the passed by the laravel controller
Thanks in advance for your help
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementById("checx").getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+ FirstColumn.textContent);
};
}
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
</script>
//I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
</body>
</html>
I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
Thanks for your help in advance
the main issue that checkboxes ids has to be unique per element so you have to depend on class name rather than ids of checkboxes
in addition to the following code
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
Has to be inside the event handler
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table id="parentTable" border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx1" class="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx2" class="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx3" class="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" id="checx4" class="checx" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementsByClassName("checx");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+FirstColumn.textContent);
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
};
}
</script>
</body>
</html>
I have a table like below :
<table>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
<tr>
<td>1</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
</table>
Grand Total = <input id="grand_total">
I am trying to display the Total Price of each row using jquery keyup function.
and also want to display the grand total price of the each row.
the formula of finding the Total Price is given below :
discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity
How can I do this please help
i am trying simply just summing all value like this :
<script type="text/javascript">
$(document).ready(function(){
$(".expensess").each(function() {
$(document).on('keyup', '.expensess', function() {
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expensess").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>
But m confused how to implement the above formula for calculate the total price.
$('input.qty,input.price,input.discount').on('change keyup',function(){
var $tr = $(this).closest('tr'),
$qty = $tr.find('input.qty') ,
$price= $tr.find('input.price'),
$discount= $tr.find('input.discount'),
$total= $tr.find('input.expensess_sum'),
$grand_total=$('#grand_total');
$total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
var grandTotal=0;
$('table').find('input.expensess_sum').each(function(){
if(!isNaN($(this).val()))
{grandTotal += parseInt($(this).val());
}
});
if(isNaN(grandTotal))
grandTotal =0;
$grand_total.val(grandTotal)
})
input{
width:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody><tr>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
</tr>
<tr>
<td>1</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
</tbody></table>
Grand Total = <input id="grand_total" disabled="">
</body>
Did it by using simple java script Code!
var sumExpenses = 0;
var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');
for (var i = 0; i < tdBudget.length; i++) {
if (tdBudget[i].className == "spanexpense") {
sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
}
}
document.getElementById('sumExpenses').innerHTML = sumExpenses;
<table class="table table-bordered">
<thead>
<tr>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
</tr>
</thead>
<tbody id="tableBudget">
<tr>
<td class="spanexpense">
12
</td>
<td class="spanexpense">
23
</td>
<td class="spanexpense">
23
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td id="sumExpenses"></td>
</tr>
</tfoot>
</table>
Fiddle https://jsfiddle.net/ey2gLp7t/
Suppose i have the table below and i want to add the column Credits to get its sum
<table id="tbl_semester11">
<thead>
<tr>
<th>Semester 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Module Code</th>
<th>Module Name</th>
<th>Credits</th>
<th>Module %</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>MGMT1101C</td>
<td>Management Seminar</td>
<td id="txtcredit112" class="sum">3</td>
<td><input type="number" id="txtpercentage112" min="40" max="100" onchange="process([1,1,2,5]);"></td>
<td id="txtgrade112">D</td>
</tr>
<tr class="alt">
<td>HCA1105C</td>
<td>Computer Architecture</td>
<td id="txtcredit113" class="sum">4</td>
<td><input type="number" id="txtpercentage113" min="40" max="100" onchange="process([1,1,3,5]);"></td>
<td id="txtgrade113">D</td>
</tr>
<tr>
<td>PROG1115C</td>
<td>Object Oriented Software Development I</td>
<td id="txtcredit114" class="sum">4</td>
<td><input type="number" id="txtpercentage114" min="40" max="100" onchange="process([1,1,4,5]);"></td>
<td id="txtgrade114">D</td>
</tr>
<tr class="alt">
<td>MATH1103C</td>
<td>Decision Mathematics</td>
<td id="txtcredit115" class="sum">3</td>
<td><input type="number" id="txtpercentage115" min="40" max="100" onchange="process([1,1,5,5]);"></td>
<td id="txtgrade115">D</td>
</tr>
<tr>
<td>ITE1107C</td>
<td>Language and Communication Seminar</td>
<td id="txtcredit116" class="sum">3</td>
<td><input type="number" id="txtpercentage116" min="40" max="100" onchange="process([1,1,6,5]);"></td>
<td id="txtgrade116">D</td>
</tr>
<tr class="al">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor="#b3ffb3"><b>S.P.A</b></td>
<td bgcolor="#4dff4d" id="spa11">40.7</td>
</tr>
</tbody>
</table>
Here is my JS
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + '.sum').each(function () {
sum += +(this).text()||0;
});
return sum;
arr is the same parameter as process i.e [1,1,3,5].The problem is that sum always returns 0
Your selector is wrong. If you want to select children with the .sum class, you should add a space between parent and children. Your function should be:
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + ' .sum').each(function () {
sum += parseInt($(this).text())||0;
});
return sum;
}
Also, I used parseInt() because .text() returns a string. That way you are sure to have a NaN value or an actual integer.
I created couple of rows and multiplied some data to get totals:
But I am not sure how to sum all the totals and print it in "Cash in Hand" row.
Following are my codes:
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td><input type="text" name="pages" class="row1" /></td>
<td><span class="row1c">0.00</span></td>
</tr>
<tr>
<td>500 Tk Note</td>
<td><input type="text" name="pages" class="row2" /></td>
<td><span class="row2c">0.00</span></td>
</tr>
<tr>
<td>100 Tk Note</td>
<td><input type="text" name="pages" class="row3" /></td>
<td><span class="row3c">0.00</span></td>
</tr>
<tr>
<td>50 Tk Note</td>
<td><input type="text" name="pages" class="row4" /></td>
<td><span class="row4c">0.00</span></td>
</tr>
<tr>
<td colspan ="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span></td>
</tr>
</table>
All codes together here:
https://jsfiddle.net/rashelmiah/fb9opo36/1/
Could you please me find a way to sum all the totals?
Thanks in advance.
You need add the following code.
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total);
})
Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.
Demo:
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).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));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td>
<input type="text" name="pages" class="row1" />
</td>
<td><span class="row1c">0.00</span>
</td>
</tr>
<tr>
<td>500 Tk Note</td>
<td>
<input type="text" name="pages" class="row2" />
</td>
<td><span class="row2c">0.00</span>
</td>
</tr>
<tr>
<td>100 Tk Note</td>
<td>
<input type="text" name="pages" class="row3" />
</td>
<td><span class="row3c">0.00</span>
</td>
</tr>
<tr>
<td>50 Tk Note</td>
<td>
<input type="text" name="pages" class="row4" />
</td>
<td><span class="row4c">0.00</span>
</td>
</tr>
<tr>
<td colspan="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span>
</td>
</tr>
</table>