We Keep Coding

I want to fixed the decimal places of the textbox value

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>

Getting variable from function with counter

I setup a simple checkout with increment/subtract buttons (function calculates total price -> price * quantity) and now struggling getting the variable with the total amount out of that function. As a result I need the total amount (in the functions it's total1 or total2) in the global variable total. In my example it doesn't work, because calling the function incr() or subt() for the variable total triggers the function and adds or increment the value of the value again. This is what I have so far:
<script>
var quantity = document.getElementById("qty").value;
var counter = document.getElementById("qty").value;
// subtract function triggered by subtract button
function subt(){
var quantity = document.getElementById("qty").value = --counter;
document.getElementById('total').innerHTML = 'Total ' + quantity * 298 + ".-";
var total1 = document.getElementById('current').innerHTML = quantity * 298;
return total1;
}
// increment function triggered by increment button
function incr(){
var quantity = document.getElementById("qty").value = ++counter;
document.getElementById('total').innerHTML = 'Total ' + quantity * 298 + ".-";
var total2 = document.getElementById('total').innerHTML = quantity * 298;
return total2;
}
var total = incr();
</script>

This is what my code looks now:
var counter = 1;
var quantity = document.getElementById("qty").value;
var initial = document.getElementById('total').innerHTML = 'Total ' + quantity * 298 + ".-";
var add = document.getElementById("add");
var sub = document.getElementById("sub");
add.addEventListener("click", function(e) {
calcFunc(1);
});
sub.addEventListener("click", function(e) {
calcFunc(-1);
});
function calcFunc(operation) {
quantity = operation < 0 ? --counter : ++counter;
document.getElementById('total').innerHTML = 'Total ' + quantity * 298 + ".-";
var total = document.getElementById('current').innerHTML = quantity * 298;
return total;
}

I think #epascarello means to create one function that get's a parameter passed to it [-1 or 1] in this case depending on if the add or subtract button is pressed.
I've been taught that you should avoid solutions using parameterless functions with no options it creates long drawn out code.
Example below:
var total = null;
addFoo.addEventListener("click", function(e) {
total = calcFunc(1);
});
minusFoo.addEventListener("click", function(e) {
total = calcFunc(-1);
});
function calcFunc(operation) {
quantity = operation < 0 ? --counter : ++counter;
document.getElementById('total').innerHTML = 'Total ' + quantity * 298 + ".-";
var total = document.getElementById('current').innerHTML = quantity * 298;
return total;
}
I'm not quite sure what this is going to do though... :(
Is this what you had in mind #epascarello?

jquery - checkbox oncheck total will be updated

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);
});

JS function that calculates products qty and options additional taxes

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

jQuery various field addition with optional checkboxes w/ JSFiddle

I am summing everything for a total on my page with the following: http://jsfiddle.net/7wWR6/
<script>
$(document).ready(function() {
$('.newreservation').click(function() {
//get the numbers
var rent = parseFloat($('.rentalcharges').find('#rent').val());
var cleaning = parseFloat($('.rentalcharges').find('#cleaning').val());
var booking = parseFloat($('.rentalcharges').find('#booking').val());
var taxes = parseFloat($('.rentalcharges').find('#taxes').val());
var total = 0;
total = total + (rent+cleaning+booking+taxes);
//set the total
$('.rentalcharges').find('#total').val(total);
console.log('total: ' + total);
});
$('input[type=checkbox]').click(function(){
//get the numbers
var rent = parseFloat($('.rentalcharges').find('#rent').val());
var cleaning = parseFloat($('.rentalcharges').find('#cleaning').val());
var booking = parseFloat($('.rentalcharges').find('#booking').val());
var taxes = parseFloat($('.rentalcharges').find('#taxes').val());
var total = 0;
total = total + (rent+cleaning+booking+taxes);
var checked;
if($('input[type=checkbox]').is(':checked')){
checked = parseFloat($('input[type=checkbox]').val());
total = total + checked;
}else{
total = total - checked;
}
//set the total
$('.rentalcharges').find('#total').val(total);
});
});
</script>
It all works except for the checkboxes. They do nothing but log a total of 0. How can I fix this? I'll try to make a jsfiddle if need be. I just am using a lot of mySQL for the fields and obviously can't simply copy/paste.
EDIT: I made a barebones fiddle that i think represents my situation: http://jsfiddle.net/7wWR6/

Instead of doing a click event try a change event like this.
$('input[type=checkbox]').change();
Also it looks like u don't need the .find() when your selecting elements.
Instead of this
$('.rentalcharges').find('#cleaning').val()
You can do this
$('#cleaning').val();