jQuery - display of calculations based on form update with keyup

Question

It is a basic sample order form with 4 input (units number). When I put values in, all corresponding information being displayed and calulations made (unit * price). Each time I add another item I want to get total value of order. There is something wrong with orderTotal calculation when values are being updated and when I clear value at all Order Total dissapear completly. Im very new to jQuery and will need some help with with, please.

Working fiddle: http://jsfiddle.net/nitadesign/97tnrepg/4/

and the code:

var orderTotal = 0 ;
$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];
    var packName = $('#pack' + curId + '-name').val();
    var packPrice = $('#pack' + curId + '-price').val();
    var packUnit = $(this).val();
    var packTotal = packUnit * packPrice;
    
    orderTotal = orderTotal + packTotal;
    
    if ($(this).val() == '') {
         $("#packcontent_" + curId).hide();
         $("#order_total").hide();  
    } else {
        $("#packcontent_" + curId).html('Units : ' + packUnit + ', Name :  ' + packName + ', Price : ' + packPrice + ', Total : ' + packTotal);
        $("#packcontent_" + curId).show();
      $("#order_total").html('Order Total: ' +orderTotal);
      $("#order_total").show();   
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content" id="packcontent_01" style="display: none;"></div>
<div class="content" id="packcontent_02" style="display: none;"></div>
<div class="content" id="packcontent_03" style="display: none;"></div>
<div class="content" id="packcontent_04" style="display: none;"></div>

<div class="content" id="order_total" style="display: none;"></div>

<p>Pack 1</p>
<input type="text" class="pack" name="pack01" id="pack01" autocomplete="off" maxlength="2" value="" />
<input type="hidden" class="pack" id="pack01-name" name="pack01-name" value="Pack 1" />
<input type="hidden" class="pack" id="pack01-price" name="pack01-price" value="5.00" />
<p>Pack 2</p>
<input type="text" class="pack" name="pack02" value="" id="pack02" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack02-name" name="pack02-name" value="Pack 2" />
<input type="hidden" class="pack" id="pack02-price" name="pack02-price" value="6.00" />
<p>Pack 3</p>
<input type="text" class="pack" name="pack03" value="" id="pack03" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack03-name" name="pack03-name" value="Pack 3" />
<input type="hidden" class="pack" id="pack03-price" name="pack03-price" value="7.00" />
<p>Pack 4</p>
<input type="text" class="pack" name="pack04" value="" id="pack04" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack04-name" name="pack04-name" value="Pack 4" />
<input type="hidden" class="pack" id="pack04-price" name="pack04-price" value="8.00" />

Thank you very much in advance!

Ok, i see that $("#order_total").hide(); is in the wrong place from the logic point of view. It should only be activated if all the inputs are empty. How i can code that ?? — Nita, Aug 28 '15 at 18:07
can you try this fiddle @Nita? http://jsfiddle.net/97tnrepg/8/ let me know if this works for you. — Sushil, Aug 28 '15 at 18:14
Thanks. There is part of the code that i already learn from. But still once you change the values orderTotal keep growing and if you clear imputs or just simply 0 them it doesn't seem to affact orderTotal at all and for the reason that is always bigger then 0 will always be visible, even if there is none in "check out form". i Hope i expleaind my self properly. — Nita, Aug 28 '15 at 18:25
the reason is if you blank your row or simply set it to 0, you're just hiding that div but the value is still there — Sushil, Aug 28 '15 at 18:27
here you go @Nita. http://jsfiddle.net/97tnrepg/13/ try this and let me know if it has any issues — Sushil, Aug 28 '15 at 18:47
if i understand the question correctly, the total was not working and if u edit an existing value, it was calculating it wrongly correct? — Sushil, Aug 28 '15 at 19:18
Sorry took my some time to analyze and test the code, it is working better, but if for example you do input some values in all fields and update them it works fine, but once you start 0 them or make the inputs empty, there is always last value left in total. Fill them all in and then empty them all to see what i mean. — Nita, Aug 28 '15 at 19:26
oh darn.. the reason it has the last value is because i update the div only if the value is greater than 0 — Sushil, Aug 28 '15 at 19:28
Big thank you @Sushil. I only added if(total == 0){ $("#order_total").hide(); } at the end so if value of total is 0 nothing is being shown! Perfect — Nita, Aug 28 '15 at 19:37
wah.. great. so finally you're happy with the solution. let me post this as an answer. please accept it if it helped you :) — Sushil, Aug 28 '15 at 19:39
i've posted my solution @Nita. please upvote it and mark it as an answer if it helped you. — Sushil, Aug 28 '15 at 19:44
Also if ($(this).val() == '' || $(this).val() == '0' ) to avoid displaying items with value set to 0 — Nita, Aug 28 '15 at 19:44
yeah. thats how it should be. Can you please accept my solution? — Sushil, Aug 28 '15 at 19:44

score 1 · Accepted Answer · answered Aug 28 '15 at 19:43

since you're storing and updating your total in each iteration, you can try creating an orders array that will hold a list of orders. so this would be dynamic incase you add more orders in the future.

what you can do is create an orders array like this.

var orders = [];

then create 3 function for getting, updating and calculating the total of the orders

Getting an Order

function GetOrder(curId){
    var order = null;

    for(i = 0; i< orders.length; i++){
        if(orders[i].id == curId){
            order = orders[i];
            break;
        }
    }

    return order;
}

updating an Order

function UpdateOrders(order){
    for(i = 0; i< orders.length; i++){
        if(orders[i].id == order.id){
            orders[i] = order;
            break;
        }
    }   
}

calculating the Total

function CalculateTotal(){
    var total = 0;
    for(i = 0; i< orders.length; i++){
        total = total + orders[i].packTotal;
    }
    console.log(total);
    $("#order_total").html('Order Total: ' + total);
    if(total > 0){

        $("#order_total").show();
    }
}

here's a working JSFIDDLE for the same. hope this helps.

Thank you very much @Nita. let me know if you have any other issues with jquery and javascript. — Sushil, Aug 28 '15 at 19:46

jQuery - display of calculations based on form update with keyup

1 Answers1