user867621
Reputation: 1197
How to get a running total on a form with javascript
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
Upvotes: 3
Views: 3067
Answers (4)
caslaner
Reputation: 413
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));
}
});
});
});
Upvotes: 2
antisilent
Reputation: 58
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));
});
Upvotes: 1
SaidbakR
Reputation: 13534
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>
Upvotes: 1
user3334871
Reputation: 1361
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.
Upvotes: 1
Related Questions
- Calculate total value using jquery
- Javascripts calculates total based on form selections
- Calculating order form total
- Calculate Value of form fields & update Total
- How to have submission page show total from previous form
- automatically calculate total value using jQuery
- how to keep a running total in javascript?
- Get total amount of JavaScript form
- Real-time calculation of total in dynamic form
- Get sum of the values from form fields with JS/jQuery