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);
});
Related
I had a hard time getting the sum price of each row in my table. Im using accounting library in my price for currency purposes and it does not get the actual total price because of the character and the comma when the price exceed to thousands.
This is my rows when appending to the table
$('body').on('click','.js-add',function(){
var target = $(this);
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
swal("Enter number of item to buy:", {
content: "input",
})
.then((value) => {
if (value == "") {
swal("Error","Entered none!","error");
}else{
var qtynum = parseInt(value);
if (isNaN(qtynum)){
swal("Error","Please input a valid number!","error");
}else{
var total = value * price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+value+"</td><td class='totalPrice'>"+accounting.formatMoney(total,{symbol:"₱",format: "%s %v"})+"</td><td><button class='btn btn-danger' type='button' id='delete-row' style='padding:0px;'>×</button><tr>");
}
}
});
});
This is what I've done so far for adding all the prices in the table.
$(document).ready(function(){
var TotalValue = 0;
$("#tableData tr").each(function(){
TotalValue += parseFloat($(this).find('.totalPrice').text());
});
alert(TotalValue);
});
I'd put alert for testing purposes. The TotalValue will be shown on the outside of the table. Hope someone will give me an idea to solve this.
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?
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 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 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();