How to get a running total on a form with javascript

Question

I have a form that looks like this

    <form id="calculator" action="#" method="get">
    <h1>Cake Cost Estimator</h1>
    <h3>Round Cakes:</h3>
    <fieldset id="round">
        <table>
            <tr>
                <td><label>6" Round Cake (6-8): </label></td>
                <td><input id="6round" type="text" placeholder=0> </td>
           </tr>
                    <tr>
                <td><label>8" Round Cake (12-15): </label></td>
                <td><input id="8round" type="text" placeholder=0></td>
            </tr>
            <tr>
                <td><label>9" Round Cake (20-24): </label></td>
                <td><input id="9round" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>10" Round Cake (26-30): </label></td>
                <td><input id="10round" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>12" Round Cake (34-38): </label></td>
                <td><input id="12round" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>14" Round Cake (46-50): </label></td>
                <td><input id="14round" type="text" placeholder=0 ></td>
            </tr>
        </table>

    </fieldset>
    <h3>Square Cakes:</h3>
    <fieldset id="square">
        <table>
            <tr>
                <td><label>6" Square Cake (8-10): </label></td>
                <td><input id="6square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>8" Square Cake (14-18): </label></td>
                <td><input id="8square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>9" Square Cake (22-26): </label></td>
                <td><input id="9square" type="text" placeholder=0 ></td>
            <tr>
                <td><label>10" Square Cake (28-32): </label></td>
                <td><input id="10square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>12" Square Cake (38-40): </label></td>
                <td><input id="12square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>14" Square Cake (56-60): </label></td>
                <td><input id="14square" type="text" placeholder=0></td>
        </table>
    </fieldset>

    <h3>Sheet Cake:</h3>
    <fieldset id="sheet">
        <table>
            <tr>
                <td><label>1/4 Sheet (15-18): </label></td>
                <td><input id="quarter" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>1/2 Sheet (30-35): </label></td>
                <td><input id="half" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>Full Sheet (65-70): </label></td>
                <td><input id="full" type="text" placeholder=0 ></td>
            </tr>

        </table>    
    </fieldset>

    <h3>Cupcakes:</h3>
    <fieldset id="cupcakes">
        <table>
            <tr>
                <td><label>Basic Cupcake: </label></td>
                <td><input id="basic" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>Standard Cupcake: </label></td>
                <td><input id="standard" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>Premium: </label></td>
                <td><input id="premium" type="text" placeholder=0 ></td>
            </tr>

        </table>    
    </fieldset>

<h3>TOTAL:  $ <input id="total" type="text" placeholder=0 disabled="disabled"></h3>

The javascript looks like this

//Prices

$(document).ready(function(){
//apparently you can't declare a variable with a number and letter
    var sixround = 39.95;
    var eightround = 45.95;
var nineround = 52.95;
var tenround = 60.95;
var twelveround = 74.95;
var fourteenround = 89.95;

var sixsquare = 45.95;
var eightsquare = 52.95;
var ninesquare = 60.95;
var tensquare = 74.95;
var twelvesquare = 99.95;
var fourteensquare = 116.95;

var quarterSheet = 37.95;
var halfSheet = 62.94;
var fullSheet = 95.95;

var basicCupcake = 2.25;
var standardCupcake = 2.50;
var premiumCupcake = 2.75;

//Round cakes
$("#6round").keyup(function() {
//get the value of the key you just entered
var six =$("#6round").val();
//multiply the value by the amount
 $("#total").val((sixround *six).toFixed(2));    
});
$("#8round").keyup(function() {
var eight =$("#8round").val();
 $("#total").val((eightround * eight).toFixed(2));    

});
$("#9round").keyup(function() {
var nine =$("#9round").val();
 $("#total").val((nineround * nine).toFixed(2));    
});
$("#10round").keyup(function() {
var ten = $("#10round").val();
 $("#total").val((tenround * ten).toFixed(2));    
 });
$("#12round").keyup(function() {
var twelve = $("#12round").val();
 $("#total").val((twelveround *twelve).toFixed(2));    
});
$("#14round").keyup(function() {
var fourteen = $("#14round").val();
 $("#total").val((fourteenround * fourteen).toFixed(2));    
});

//Square Cakes
$("#6square").keyup(function() {
var sixs = $("#6square").val();
 $("#total").val((sixsquare * sixs).toFixed(2));    
 });
$("#8square").keyup(function() {
 var eights = $("#8square").val();
  $("#total").val((eightsquare * eights).toFixed(2));    
});
$("#9square").keyup(function() {
var nines = $("#9square").val();
 $("#total").val((ninesquare * nines).toFixed(2));    
 });
$("#10square").keyup(function() {
var tens = $("#10square").val();
 $("#total").val((tensquare * tens).toFixed(2));    
 });
$("#12square").keyup(function() {
var twelves = $("#12square").val();
 $("#total").val((twelvesquare * twelves).toFixed(2));    
 });
$("#14square").keyup(function() {
var fourteens = $("#14square").val();
 $("#total").val((fourteensquare * fourteens).toFixed(2));    
 });

//renamed the elemet ids in the html to quarter half and full becuase it didn't like the numbers
//Sheet Cakes
$("#quarter").keyup(function() {
var quart = $("#quarter").val();
 $("#total").val((quarterSheet  * quart).toFixed(2));    
 });
$("#half").keyup(function() {
var halfs = $("#half").val();
 $("#total").val((halfSheet * halfs).toFixed(2));    
 });
$("#full").keyup(function() {
var fulls = $("#full").val();
 $("#total").val((fullSheet * fulls).toFixed(2));    
 });

//Cupcakes
$("#basic").keyup(function() {
var bas = $("#basic").val();
 $("#total").val((basicCupcake * bas).toFixed(2));    
 });
$("#standard").keyup(function() {
var stand = $("#standard").val();
 $("#total").val((standardCupcake * stand).toFixed(2));    
 });
$("#premium").keyup(function() {
var prem = $("#premium").val();
 $("#total").val((premiumCupcake * prem).toFixed(2));    
 });

 });

This calculates the cost or total of the whole thing for each individual form id like a 6 round cake then can enter a number and it calculates the price for that particuar one. But how do I keep a running total of the total cost

just FYI, `var` cannot begin with a digit. you can use numbers and letters. so you'd use round6 instead of 6round.commenting on this in your js: `//apparently you can't declare a variable with a number and letter` — Kai Qing, Nov 26 '14 at 17:17
if it helps to know, that rule also applies to css classes and ids... at least I believe that's true. you're using them all over so you may have proved me wrong. See this SO question: http://stackoverflow.com/questions/21227702/css-classes-with-names-that-start-with-numbers — Kai Qing, Nov 26 '14 at 17:18
Well it depends on you how you can calculate but there are many ways. Either you can give your input elements a class and get their value and add them on the keyup of any of the input elements. Another one is on keydown of any of the element you can deduct the old value and add the new value from the total. — Varun Chakervarti, Nov 26 '14 at 17:26

caslaner · Accepted Answer · 2015-02-13T14:35:18.930

I think differently. I solve this problem with html element attribute.

With this way you can add a lot of input boxes to your page. But you must not forget two attribute class="amountBox" data-var="(this is price which you added to priceList object before)" then javascript calculates total value. Here jsfiddle : http://jsfiddle.net/5wbhnmwd/

By this way you get rid of the js manipulation for each element that you add to document.

<form id="calculator" action="#" method="get">
     <h1>Cake Cost Estimator</h1>

     <h3>Round Cakes:</h3>

    <fieldset id="round">
        <table>
            <tr>
                <td>
                    <label>6" Round Cake (6-8):</label>
                </td>
                <td>
                    <input id="6round" class="amountBox" data-var="sixround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Round Cake (12-15):</label>
                </td>
                <td>
                    <input id="8round" class="amountBox" data-var="eightround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Round Cake (20-24):</label>
                </td>
                <td>
                    <input id="9round" class="amountBox" data-var="nineround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>10" Round Cake (26-30):</label>
                </td>
                <td>
                    <input id="10round" class="amountBox" data-var="tenround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>12" Round Cake (34-38):</label>
                </td>
                <td>
                    <input id="12round" class="amountBox" data-var="twelveround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>14" Round Cake (46-50):</label>
                </td>
                <td>
                    <input id="14round" class="amountBox" data-var="fourteenround" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Square Cakes:</h3>

    <fieldset id="square">
        <table>
            <tr>
                <td>
                    <label>6" Square Cake (8-10):</label>
                </td>
                <td>
                    <input id="6square" class="amountBox" data-var="sixsquare" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Square Cake (14-18):</label>
                </td>
                <td>
                    <input id="8square" class="amountBox" data-var="eightsquare" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Square Cake (22-26):</label>
                </td>
                <td>
                    <input id="9square" class="amountBox" data-var="ninesquare" type="text" placeholder=0>
                </td>
                <tr>
                    <td>
                        <label>10" Square Cake (28-32):</label>
                    </td>
                    <td>
                        <input id="10square" class="amountBox" data-var="tensquare" type="text" placeholder=0>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>12" Square Cake (38-40):</label>
                    </td>
                    <td>
                        <input id="12square" class="amountBox" data-var="twelvesquare" type="text" placeholder=0>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>14" Square Cake (56-60):</label>
                    </td>
                    <td>
                        <input id="14square" class="amountBox" data-var="fourteensquare" type="text" placeholder=0>
                    </td>
        </table>
    </fieldset>
     <h3>Sheet Cake:</h3>

    <fieldset id="sheet">
        <table>
            <tr>
                <td>
                    <label>1/4 Sheet (15-18):</label>
                </td>
                <td>
                    <input id="quarter" class="amountBox" data-var="quarterSheet" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>1/2 Sheet (30-35):</label>
                </td>
                <td>
                    <input id="half" class="amountBox" data-var="halfSheet" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Full Sheet (65-70):</label>
                </td>
                <td>
                    <input id="full" class="amountBox" data-var="fullSheet" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Cupcakes:</h3>

    <fieldset id="cupcakes">
        <table>
            <tr>
                <td>
                    <label>Basic Cupcake:</label>
                </td>
                <td>
                    <input id="basic" class="amountBox" data-var="basicCupcake" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Standard Cupcake:</label>
                </td>
                <td>
                    <input id="standard" class="amountBox" data-var="standardCupcake" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Premium:</label>
                </td>
                <td>
                    <input id="premium" class="amountBox" data-var="premiumCupcake" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>

<h3>TOTAL:  $ <input id="total" type="text" placeholder=0 disabled="disabled"></h3>

//Prices

$(document).ready(function () {
    var priceList = {
        sixround : 39.95,
        eightround : 45.95,
        nineround : 52.95,
        tenround : 60.95,
        twelveround : 74.95,
        fourteenround : 89.95,
        sixsquare : 45.95,
        eightsquare : 52.95,
        ninesquare : 60.95,
        tensquare : 74.95,
        twelvesquare : 99.95,
        fourteensquare : 116.95,
        quarterSheet : 37.95,
        halfSheet : 62.94,
        fullSheet : 95.95,
        basicCupcake : 2.25,
        standardCupcake : 2.50,
        premiumCupcake : 2.75
    };

    $('.amountBox').on('change', function(){
        var value = $(this).val();
        var price = priceList[$(this).data('var')];
        $(this).val((value*price).toFixed(2));
        $('#total').val('0');

        $('.amountBox').each(function(){
            if(!isNaN(parseFloat($(this).val()))){
                $('#total').val((parseFloat($('#total').val()) + parseFloat($(this).val())).toFixed(2));
            }
        });
    });

});

antisilent · Answer 2 · 2014-11-26T19:09:28.547

You're updating the value of #total with only the value of the form field that's being changed... you need to give all of your form fields a class and then add the sum of all fields every time one of them changes. It's also better to use change instead of keyup so you get the total only when the input is changed and out of focus.

$(".subtotal").change(function () {
    $("#total").val(0);
    var sum = 0;
    $('.subtotal').each(function () {
        sum += Number($(this).val());
    });

    $("#total").val(sum.toFixed(2));
});

JSFiddle

score 1 · Answer 3 · answered Nov 26 '14 at 17:22

When you are calculating the new value, just do something like:

$("#8square").keyup(function() {
var eights = $("#8square").val();
var oldValue = $("#total").val();
$("#total").val(parseInt(oldValue) + parseInt((eightsquare * eights).toFixed(2)));    
});

However, this assumes they enter in all the correct values the first time. Have some way to subtract from the total should they remove their choice and make a new one.

SaidbakR · Answer 4 · 2014-11-26T18:14:14.833

Check the following demo: http://jsbin.com/yobeyonuju/1/

function getRes(){
  total = document.getElementById('total');
  total.value=0;
  f = document.getElementById('calculator');
inputs = f.getElementsByTagName('input');
res = 0;
for (i = 0; i < inputs.length; i++){
  if (!isNaN(inputs[i].value*1)) res += inputs[i].value*1;
}
total.value = res;
}

It is clear that isNaN for exclude any inputs such as submit without numerical values. In the demo I called it from javascript hyper link as

<a href="javascript:getRes()">TOTAL:</a>

How to get a running total on a form with javascript

4 Answers4