Multi-selected option for quantity that updates Total value - javascript

I have prepared the following jsfiddle that ilustrates the core of the issue
The problem is as follow:
I have a list with products in a shop basket. Each product has options available for example colors and when the customer select a quantity for white color for example the js function:
function update_amounts(){
var sum = 0.0;
$('#basketorder > tbody > .product').each(function() {
var qty = $(this).find('.qty option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price);
sum+= amount;
$(this).find('.amount').text(''+ amount);
//alert(sum);
});
must update the total amount for the products. Function works fine but it calculates only for the first selected color quantity, but if the customer decides to order another 2 black items it will not calculate them. My question is how to make this function to sum all quantities from different colors and multiply them with the product Single price so I get a correct Total?
Thank you for your help in advance

Related

Why is my calculation total not updating correctly in Acrobat?

I am working on an order form in Acrobat that calculates sales tax for whichever state is selected in a drop down. If I enter in one item, it is not adding the tax to the total. And if I go back and change the state, it updates the sales tax correctly, but the total includes the previous sales tax, not the current.
I am receiving this error:
InvalidSetError: Set not possible, invalid or unknown.
Field.value:8:Field TOTAL AMOUNT:Calculate
Here is my calculation for the total:
var a=this.getField("Subtotal without customization charges");
var b=this.getField("Customization Charges");
var c=this.getField("Tax3");
var d=this.getField("Shipping");
var e=this.getField("Express Handling");
var f=this.getField("Discount Total");
var g=this.getField("TOTAL AMOUNT");
g.value=(a.value+b.value+c.value+d.value+e.value)-(f.value);
"State" field dropdown:
if(event.target.value!="State")
{
this.getField("Sales Tax").value=event.target.value;
}
"Sales Tax" field is hidden and shows the export value of whatever is selected in the "State" field.
"Tax" field is hidden and is the product of "Customization Charges" x "Subtotal without customization charges"
"Tax2" field is hidden and has this calculation:
var a=this.getField("Tax");
var b=this.getField("Discount Total");
var c=this.getField("Tax2");
c.value=(a.value)-(b.value);
"Tax3" field is visible and is the product of "Sales Tax" x "Tax2"
Since you are running your code during the calculation event, you can't set the value of the field... because that's what the calculation is trying to do. That's what is producing the error. In the last line of your code, you are trying to set the value of the field, you need to set the value of the calculation event instead. So the code looks like this...
var a=this.getField("Subtotal without customization charges");
var b=this.getField("Customization Charges");
var c=this.getField("Tax3");
var d=this.getField("Shipping");
var e=this.getField("Express Handling");
var f=this.getField("Discount Total");
event.value=(a.value+b.value+c.value+d.value+e.value)-(f.value);
Also, change the propery of the tax dropdown to "Commit selected value immediately" in the options tab.
Solved! Instead of creating four fields to calculate tax, I consolidated it into two. I think it was not reading the equation in the proper order because the chain of calculations was spread out between four fields.
One hidden field which is the export value of the drop down.
One visible field "Sales Tax" calculation:
var a=this.getField("Subtotal without customization charges");
var b=this.getField("Customization Charges");
var c=this.getField("Discount Total");
var d=this.getField("Tax Calculation");
event.value=((a.value+b.value)-(c.value))*(d.value);
"TOTAL AMOUNT" field calculation:
var a=this.getField("Subtotal without customization charges");
var b=this.getField("Customization Charges");
var c=this.getField("Sales Tax");
var d=this.getField("Shipping");
var e=this.getField("Express Handling");
var f=this.getField("Discount Total");
event.value=((a.value+b.value+c.value)-(f.value))+(d.value+e.value);

Controller multiplication from ng-repeat with AngularJS

In my document I have a table cell labeled P/L which is calculated by:
P/L = Sell price * Sell Quantity – Buy price * Buy Quantity
You can see I have started by using some multiplication on my repeating cell item like so
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.TxnId.length; i++){
var product = $scope.TxnId[i];
total += (product.Price * product.Quantity);
}
return total;
};
The problem is I'm wondering how do I select the sell price and sell quantity? If I can select the sell price and buy price as well at the sell price and quantity I think I can get this to work. Any ideas?
You can also see I am using sort by for the buy and sell data which loads in also.
Use the output to compute profit and loss for each sell transaction based on the First in First out for Pineapples.
http://plnkr.co/edit/XfRbKe7bNOBn8rGskGyW?p=preview
below is a picture of what it should look like, I struggling to figure out the P/L column.

find the value of the div then PLUS that numeric value to another div

I have 2 div's.
One is SHIPPING and another is TOTAL PRICE.
<div id="tt_shipping_rate_basket">$0.00</div> = SHIPPING
<div class="op_col5_3" align="right" id="tt_total_basket">$897.00</div> = TOTAL PRICE
Also there are 4 inputs for SHIPPING, each adds it's own price in the shipping div..
for example:
input 1 = 10$
input 2 = 20$
so when choosing an input the value in the #tt_shipping_rate_basket is changing ajax to the value of the input... this works great...
The problem is, I do not want 2 divs (one for shipping and one for total price)...
I just want ONE div, called Total Price, and when I choose an input, the value should ADD&CHANGE to the #tt_total_basket instead of tt_shipping_rate_basket...
What I'm trying to do is, GET the value of SHIPPING field (which is ajax populated), GET the value of TOTAL PRICE field, then just ADD shipping to Total Price...
here is what I tried to write but it doesn't seem to work, sorry I'm not to good at programming..
function plus() {
var spTotal = document.getElementById("tt_total_basket");
var spShip = document.getElementById("tt_shipping_rate_basket");
spTotal = spTotal.innerHTML = +spShip;
}
spTotal is the TOTAL PRICE
spShip is the Shipping Price
The result should be (spTotal = spTotal.value + spShip.value)..
Can somebody please help?
Untested, but you get the idea:
var spTotal = document.getElementById("tt_total_basket").innerHTML.replace('$', '');
var spShip = document.getElementById("tt_shipping_rate_basket").innerHTML.replace('$', '');
spTotal = parseFloat(spTotal) + parseFloat(spShip);

calculate values

In an order form, each row has 3 fields: quantity, price, total.
How do I create a function that on changing a number the subtotal is calculated and so is the total?
Can anyone suggest a way?
You'd need to add a listener to each row so that when the price or quantity are updated, you can get the new quantity and price and update the total column.
In jQuery, something like:
$('.row').on('change', function() {
var quantity = $('.quantity', this).val(), // get the new quatity
price = $('.price', this).val(), // get the new price
total = price*quantity;
$('.total', this).val(total); //set the row total
var totals = $.map($('.row .total'), function(tot) {
return tot.val(); // get each row total into an array
}).reduce(function(p,c){return p+c},0); // sum them
$('#total').val(totals); // set the complete total
});
This assumes that each order form row container has the class row, each quantity has the class quantity, each row total has the class total and the order form total has the id total.

Problem with running totals in jquery

I'm having an issue trying to get an accurate running total for my calculations. When you enter numbers into the input field I get an accurate total for that line item, but the grand total comes out to a higher number. Note that this is a dynamic form and that the id's will change depending on how many form fields I have added to the form. Also, I have it set to make the calculations onKeyUp for each input field instead of a calculate button.
The code that calculates a single item is this:
function calcLineItem(id) {
var id = $(id).attr("id");
var Item1 = $("#Item1" + id).val();
var Item2 = $("#Item2" + id).val();
var Item3 = $("#Item3" + id).val();
function calcTotal(Item1, Item2, Item3){
var total;
total = Math.round((Item1 * Item2) * Item3);
return total;
}
$("#total" + id).text(calcTotal(Item1, Item2, Item3));
calcAllFields();
}
This will give me the total of this particular input field. The function at the end, calcAllFields(), is supposed to do the calculations for all items in my form to give me the grand total of all input fields:
function calcAllFields(id) {
var id = $(id).attr("id");
$('#target1').text($("#total" + id).map(function() {
var currentValue = parseFloat(document.getElementById("currentTotal").value);
var newValue = parseFloat($("#total" + id).text());
var newTotal = currentValue + newValue;
document.getElementById("currentTotal").value = newTotal;
return newTotal;
}).get().join());
}
The variable currentTotal is getting its value from a hidden field on my form:
<input type="hidden" id="currentTotal" value="0">
As I enter numbers a field the calculation for that line will be accurate, but the grand total will be inaccurate because the value for currentTotal will continue to increment with every key stroke I make in the input field. Any ideas on how to avoid this from happening?
UPDATE: An example of what the form input fields would look like:
<tr id="row1">
<td><input type="text" id="field_1 onKeyUp="calcLineItem("#row1")></td>
<td><input type="text" id="field_2 onKeyUp="calcLineItem("#row1")></td>
</tr>
I hope this helps.
It appears that you are never removing the previous total when you calculate the grand total. For instance,
I start out with a grand total of 0. I change ID1 and get a total of 700. Now my grand total is 700. However, with your code, if I change ID1 again and set to 680, my grand total will be 1380 (700 + 680).
You should probably start with 0 and loop through all the totals again on calcGrandTotal() in order to pick up all client changes or track the previous total before you calculate the new line item total so that you can properly deduct it from the grand total. Also, if you have a lot of line items adding up to your grand total, you may consider only calling the calcGrandTotal() when on of your textboxes loses focus, else you could have a lot of JS calculations going on in the background which will interfere with animations and overall responsiveness of your site.
How's this?
function calcAllFields(id) {
var id = $(id).attr("id");
document.getElementById("currentTotal").value = 0; //reset the total as it will be caluclated next
$('#target1').text($("#total" + id).map(function() {
var currentValue = parseFloat(document.getElementById("currentTotal").value);
var newValue = parseFloat($("#total" + id).text());
var newTotal = currentValue + newValue;
document.getElementById("currentTotal").value = newTotal;
return newTotal;
}).get().join());
}
I would go about it slightly differently. You will need a function that returns the total for a row (Looks like calcLineItem pretty much does it, just remove the calcAlffields call. Add a class like calcrow to each row that needs to be totaled. Than just do something like this
function updateTotal () {
total = 0;
$.each($(".calcrow"), function(index, value) {
total += calcRow($(value).attr("id"));
});
$("#currentTotal").value(total);
}
Another if you don't want to calc each line again (it looked like you were storing a row total somewhere) have the row update function update the row total and than call this updateTotal.
function updateTotal () {
total = 0;
$.each($(".rowtotal"), function(index, value) {
total += $(value).attr("id");
});
$("#currentTotal").value(total);
}

Categories