The function below also calculates the sum on run time. The txtRate is the textbox to be processed for the decimal fix.
$(function() {
$("[id*=txtRate]").val("0");
});
$("body").on("change", "[id*=txtRate]", function() {
var rate = parseFloat($.trim($(this).val()));
if (isNaN(rate)) {
rate = 0;
}
//Update the Rate TextBox.
$(this).val(rate);
//Calculate and update Row Total.
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".quantity", row).html()) * parseFloat($(this).val()));
//Calculate and update Grand Total.
var grandTotal = 0;
$("[id*=lblTotal]").each(function() {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Related
I've got a form which utilizes some checkbox inputs with fixed values and a text 'number' input which should be calculated against an hourly rate.
The idea is that we can select pre-set values and display the total including the number of billable hours times the hourly rate.
<script>
$( document ).ready(function() {
var sum = 0;
var origsum = 0;
var newsum = 0;
var tax = 0.06;
var hourly = 250;
var tothours = 0;
$('.cost').click(function() {
var total = parseInt($('#total').val());
if($(this).is(':checked')) {
sum = total + parseInt($(this).val());
} else {
sum = total - parseInt($(this).val());
}
$('#total').val(sum);
});
$('.tax').click(function() {
var total = parseInt($('#total').val());
if($(this).is(':checked')) {
origsum = sum;
newsum = total + (tax * parseInt(sum));
} else {
newsum = total - (tax * parseInt(sum));
}
$('#total').val(newsum);
});
var prevCount = 0;
var newCount = 0;
$(document).on('keyup mouseup', '.rate', function() {
newCount = parseInt($('.rate').val());
total = parseInt($('#total').val());
if(newCount > prevCount) {
$('.cost').each(function() {
if($(this).is(':checked')) {
sum = total + hourly;
$('#total').val(sum);
return false;
}
else {
$('#total').val($('.rate').val() * hourly);
}
});
}
else {
$('.cost').each(function() {
if($(this).is(':checked')) {
sum = total - hourly;
$('#total').val(sum);
return false;
}
else {
$('#total').val($('.rate').val() * hourly);
}
});
}
prevCount = parseInt($('.rate').val());
});
});
</script>
The best way to explain it is by example, so I created this fiddle which includes the script and html:
https://jsfiddle.net/dfkw4ggt/4/
As you'll see when you poke around (thanks in advance, btw!), it's all fairly well working until we start adding/clicking in the text/numeric field.
Any advice and/or pointers would be greatly appreciated as I've about exhausted my researching this and would love to get it working.
Here's my take, and my opinion.
I think you should have a Sub-Total, Total, and Tax. (You could still hide these fields from the end users and only show the "Total")
You can also simplify your code a bit to make it easier to find errors.
Take a look at this fork of your fiddle, where I changed your JS code and added sub/tax/total. Notice how, if there are errors in the calculations, it will be easier to find now.
The JS:
var taxRate = 0.06;
var hourly = 250;
// we really only need one event listener for the whole page
$(document).on("change", "input", updateTotal);
function updateTotal() {
var runningTotal = 0;
// find all checked cost fields
$(".cost:checked").each(function(){
runningTotal += parseInt($(this).val());
});
var billableAmount = parseInt($(".rate").val()) * hourly;
runningTotal += billableAmount;
$("#subtotal").val(runningTotal);
var tax;
if ($(".tax").prop("checked")) {
tax = runningTotal * taxRate;
} else {
tax = 0;
}
$("#taxAmt").val(tax);
$("#total").val( runningTotal + tax );
}
I was trying to develop a checkbox using jQuery ..where oncheck total will be updated but when i uncheck it will be back as it is.. Here total updated with oncheck but it don't get back to total amount when i uncheck it .what could be possible error..anyone help please?
$('#vat').on('click',function(e){
var vat = document.getElementById("vat").value;
var total = document.getElementById("total").value;
var sum = +total + +vat;
document.getElementById("total").value = sum;
});
Assume #vat is your input id
1- You need to use change instead of click for radio and checkbox inputs
2- check if checked or not by using this.checked
$('#vat').on('change',function(e){
var sum = 0;
var vat = document.getElementById("vat").value;
var total = document.getElementById("total").value;
if(this.checked === true){
sum = total + vat;
}else{
sum = total - vat;
}
document.getElementById("total").value = sum;
});
And while you're using and tagged jquery
$('#vat').on('change',function(e){
var sum = 0;
var vat = parseInt($(this).val());
var total = parseInt($("#total").val());
if(this.checked === true){
sum = total + vat;
}else{
sum = total - vat;
}
$("#total").val(sum);
});
I have the following jquery function that adds up 7 textboxes and puts the total in a grand total textbox:
$(document).ready(function() {
$('.class2').keyup(function() {
var sum = 0;
$('.class2').each(function() {
sum += Number($(this).val());
});
$('#GrandTotal').val((sum).toFixed(2));
});
});
The 7 textboxes are populated by another function. When a quantity is entered, those textboxes are auto populated by the quantity times the price. The problem I am having is that the grand total textbox is not being populated until you tab out of the textbox that has the calculated price. However, if I enter the price directly into the textbox (without using the quantity), the grand total textbox updates immediately. Is there something that I can do that will update the grand total textbox after I enter a quantity? The page is at www.pfacmeeting.org/badgeform2.php. Thanks for any help with this.
-cdr6800
When you auto-populate the textboxes, try triggering the keyup event, using .trigger() function:
$(".class2").trigger("keyup");
You should change your script to:
$('input[name="BadgeQuantity"]').keyup(function(){
var a = 50;
var b = $(this).val();
$('input[name="BadgeTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="ThursdayBreakfast"]').keyup(function(){
var a = 42;
var b = $(this).val();
$('input[name="ThursdayBreakfastTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="ThursdayLunch"]').keyup(function(){
var a = 53;
var b = $(this).val();
$('input[name="ThursdayLunchTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="FridayBreakfast"]').keyup(function(){
var a = 42;
var b = $(this).val();
$('input[name="FridayBreakfastTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="FridayLunch"]').keyup(function(){
var a = 53;
var b = $(this).val();
$('input[name="FridayLunchTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="FridayDinner"]').keyup(function(){
var a = 115;
var b = $(this).val();
$('input[name="FridayDinnerTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('.DrawingTickets').change(function(){
var selectedValue = parseFloat($(this).val());
$('#DrawingTicketsTotal').val((selectedValue).toFixed(2));
$(".class2").trigger("keyup");
});
$('.class2').keyup(function() {
var sum = 0;
$('.class2').each(function() {
sum += Number($(this).val());
});
$('#GrandTotal').val((sum).toFixed(2));
});
I have this complicated JS function that must calculate the sum of product single price * qty and if there are available options for the product and if the available options have extra tax it has to be added also to the total.
function update_amounts() {
var sum = 0.0;
$('#basketorder > tbody > .product').each(function () {
var qty = $(this).find('.qty option:selected').val();
var selectedoptaddtax = 0.0;
$('.selectedoptionselect option:selected').each(function () {
var selectedoptaddtax = $(this).attr('price');
})
var price = $(this).find('.price').val();
var amount = ((qty * price) + selectedoptaddtax);
sum += amount;
$(this).find('.amount').text('' + amount);
});
$('.total').text(sum);
}
I have prepared jsfiddle here
In the example I have only 1 product in the basket, but the function must calculate correct if more that 1 product in the basket.
$(document).ready(function () {
update_amounts();
$('.qty').change(function () {
update_amounts();
});
$('.selectedoptionselect').change(function () {
update_amounts();
});
});
You need to add selected option prices.
Code
$(document).ready(function () {
$('.selectedoptionselect, .qty').change(function () {
update_amounts();
}).change();
});
function update_amounts() {
var sum = 0.0;
$('#basketorder > tbody > .product').each(function () {
var qty = $(this).find('.qty').val();
var selectedoptaddtax = 0.0;
//Use find here
$(this).find('.selectedoptionselect option:selected').each(function () {
selectedoptaddtax += +$(this).attr('price'); // You need to add price
})
var price = $(this).find('.price').val();
var amount = (qty * price) + (qty * selectedoptaddtax); //Changes here
sum += amount;
$(this).find('.amount').text('' + amount);
});
$('.total').text(sum);
}
DEMO
I am trying to create rows every time I click the "+" button and sum every column. I can create columns.
But no rows.
This is my code:
$(document).ready(function () {
$("#tabla").click(function () {
$("tr").find("td:last").before('<td><input type="text" value="0"></td>');
$("tr:last").after('<td><input type="text" value="1"></td>');
$("input").each(function () {
$(this).keyup(function () {
newSum.call(this);
});
});
});
});
function newSum() {
var sum = 0;
var thisRow = $(this).closest('tr');
var total = 0;
$(thisRow).find("td:not(.total) input").each(function () {
sum += parseInt(this.value);
});
$(thisRow).find(".total").html(sum);
$('.total').each(function () {
total += parseInt($(this).html());
});
}
http://jsfiddle.net/YQ7LQ/
Thanks in advance.
Added rows and columns sum called on $(document).on('keyup','input',newSum);
Example
I finally resolved the problem.
Here's the code:
//Sum the Rows.
$('#sum_table tr:not(.totalCol) input:text').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];
$table.find('tr:not(.totalCol) .sum'+thisNumber).each(function() {
total += parseInt(this.value);
});
$table.find('.totalCol td:nth-child('+thisNumber+')').html(total);
});
Here is the full code:
DEMO