Javascript Running Totals Question

**fileserverdirect** · 03-08-2008, 01:28 AM

Hi Guys!
After I got my computer fixed (49.95 from dell

) I got right back to work...
I found this script on google, how can I make it defauld to say Meat (in the example)as an exta topping by defualt. I have tryed seeveral ways, and only got it to display 3.00 but as soon a size was checked, say small, it would say 10.00 not 13.00. Please Help!

Code:

<html><head>
	<SCRIPT LANGUAGE="JavaScript">
	<!-- hide javascript from non-JavaScript browsers.
        // This function calculates the total for items in the form which are selected
	function calculateTotal(inputItem) {
		with (inputItem.form) {
			// process each of the different input types in the form.
			if (inputItem.type == "radio") { // process radio buttons
				// subtract the previously selected radio button value from the total
				calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
				// save the current radio selection value
				previouslySelectedRadioButton.value = eval(inputItem.value);
				// add the current radio button selection value to the total
				calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);	
			} else { // process check boxes
				if (inputItem.checked == false) { // item was uncheck. subtract item value from total
				    calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
				} else { // item was checked. add the item value to the total
				    calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); 
				}
			}

			// total value should never be less than 0
			if (calculatedTotal.value < 0) {
				InitForm();
			}

			// return total value
			return(formatCurrency(calculatedTotal.value));
		}
	}

	// format a value as currency. 
	function formatCurrency(num) {
		num = num.toString().replace(/\$|\,/g,'');
		
		if(isNaN(num))
		   num = "0";
		   
		sign = (num == (num = Math.abs(num)));
		num = Math.floor(num*100+0.50000000001);
		cents = num%100;
		num = Math.floor(num/100).toString();
		
		if(cents<10)
		    cents = "0" + cents;
			
		for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
		    num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
			
  	    return (((sign)?'':'-') + '$' + num + '.' + cents);
	}

	// This function initialzes all the form elements to default values
	function InitForm() {
		//Reset values on form
		document.selectionForm.total.value='$0.00';
		document.selectionForm.calculatedTotal.value=0;
		document.selectionForm.previouslySelectedRadioButton.value=0;

		//Set all checkboxes and radio buttons on form to unchecked:
		for (i=0; i < document.selectionForm.elements.length; i++) {
		    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
			    document.selectionForm.elements[i].checked = false;
			}
		}

	}

	// end commenting javascript -->
	</SCRIPT>

</head>

<body onload="InitForm();" onreset="InitForm();">

<form method="POST" name="selectionForm">
  <b>Pizza Order</b> <br>
  <font face=Arial size=2> 
  Small $10.00 
  <input type="checkbox" name="Steak"   value=10.00  onclick="this.form.total.value=calculateTotal(this);">
  Medium $12.00 
  <input type="checkbox" name="Chicken" value=12.00 onclick="this.form.total.value=calculateTotal(this);">
  Large $15.00 
  <input type="checkbox" name="Sushi"   value=15.00  onclick="this.form.total.value=calculateTotal(this);">
  <br>
  <br>
  <b>Extra Toppings (only one selection allowed):</b> <br>
  <input type="radio" name="Sauce" value=0.00 onclick="this.form.total.value=calculateTotal(this);"> None
  <br> 
  <input name="Sauce" type="radio"  value=1.00 onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
  <br> 
  <input type="radio" name="Sauce" value=2.00 onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
  <br>
  <input type="radio" name="Sauce" value=3.00 onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00 
  <br>
  <br>
  <br>
  <input type="hidden" name="calculatedTotal" value=0>
  <input type="hidden" name="previouslySelectedRadioButton" value=0>
  <font size=+1> Your total is: </font><font face=Arial size=2><font size=+1>
  <input type="text" name="total" readonly onFocus="this.blur();">
  </font></font><font size=+1> </font> <br>
  <br>
  </font> 
</form>
</body>
</html>

Thanks,

**Bob90** · 03-08-2008, 02:27 AM

Code:

<html><head>
	<SCRIPT LANGUAGE="JavaScript">
	<!-- hide javascript from non-JavaScript browsers.
        // This function calculates the total for items in the form which are selected
	function calculateTotal(inputItem) {
		with (inputItem.form) {
			// process each of the different input types in the form.
			if (inputItem.type == "radio") { // process radio buttons
				// subtract the previously selected radio button value from the total
				calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
				// save the current radio selection value
				previouslySelectedRadioButton.value = eval(inputItem.value);
				// add the current radio button selection value to the total
				calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);	
			} else { // process check boxes
				if (inputItem.checked == false) { // item was uncheck. subtract item value from total
				    calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
				} else { // item was checked. add the item value to the total
				    calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); 
				}
			}

			// total value should never be less than 0
			if (calculatedTotal.value < 0) {
				InitForm();
			}

			// return total value
			return(formatCurrency(calculatedTotal.value));
		}
	}

	// format a value as currency. 
	function formatCurrency(num) {
		num = num.toString().replace(/\$|\,/g,'');
		
		if(isNaN(num))
		   num = "0";
		   
		sign = (num == (num = Math.abs(num)));
		num = Math.floor(num*100+0.50000000001);
		cents = num%100;
		num = Math.floor(num/100).toString();
		
		if(cents<10)
		    cents = "0" + cents;
			
		for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
		    num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
			
  	    return (((sign)?'':'-') + '$' + num + '.' + cents);
	}

	// This function initialzes all the form elements to default values
	function InitForm() {
		//Reset values on form
		document.selectionForm.total.value='$0.00';
		document.selectionForm.calculatedTotal.value=0;
		document.selectionForm.previouslySelectedRadioButton.value=0;

		//Set all checkboxes and radio buttons on form to unchecked:
		for (i=0; i < document.selectionForm.elements.length; i++) {
		    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
			    document.selectionForm.elements[i].checked = false;
			}
		}

		//Set default radio button
		document.selectionForm.ET[3].click()

	}

	// end commenting javascript -->
	</SCRIPT>

</head>

<body onload="InitForm();" onreset="InitForm();">

<form method="POST" name="selectionForm">
  <b>Pizza Order</b> <br>
  <font face=Arial size=2> 
  Small $10.00 
  <input type="checkbox" name="Steak"   value=10.00  onclick="this.form.total.value=calculateTotal(this);">
  Medium $12.00 
  <input type="checkbox" name="Chicken" value=12.00 onclick="this.form.total.value=calculateTotal(this);">
  Large $15.00 
  <input type="checkbox" name="Sushi"   value=15.00  onclick="this.form.total.value=calculateTotal(this);">
  <br>
  <br>
  <b>Extra Toppings (only one selection allowed):</b> <br>
  <input type="radio" name="ET" id="ET" value=0.00 onclick="this.form.total.value=calculateTotal(this);"> None
  <br> 
  <input type="radio" name="ET" id="ET" value=1.00 onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
  <br> 
  <input type="radio" name="ET" id="ET" value=2.00 onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
  <br>
  <input type="radio" name="ET" id="ET"  value=3.00 onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00 
  <br>
  <br>
  <br>
  <input type="hidden" name="calculatedTotal" value=0>
  <input type="hidden" name="previouslySelectedRadioButton" value=0>
  <font size=+1> Your total is: </font><font face=Arial size=2><font size=+1>
  <input type="text" name="total" readonly onFocus="this.blur();">
  </font></font><font size=+1> </font> <br>
  <br>
  </font> 
</form>
</body>
</html>

Then add a line of code to simulate a mouse click - '.click()' in your initialise function.
This isn't the best way to do it though. A better solution, I think, is to make one of the radio buttons selected by default (using HTML)

Code:

<input type="radio" checked>

and then alter your initialise function to calculate prices using the whole form.

**fileserverdirect** · 03-08-2008, 04:55 PM

O.K.
I edited it a little, but how come the second set of radio buttons aren't working:

Code:

<SCRIPT LANGUAGE="JavaScript">
	<!-- hide javascript from non-JavaScript browsers.
        // This function calculates the total for items in the form which are selected
	function calculateTotal(inputItem) {
		with (inputItem.form) {
			// process each of the different input types in the form.
			if (inputItem.type == "radio") { // process radio buttons
				// subtract the previously selected radio button value from the total
				calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
				// save the current radio selection value
				previouslySelectedRadioButton.value = eval(inputItem.value);
				// add the current radio button selection value to the total
				calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);	
			} else { // process check boxes
				if (inputItem.checked == false) { // item was uncheck. subtract item value from total
				    calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
				} else { // item was checked. add the item value to the total
				    calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); 
				}
			}

			// total value should never be less than 0
			if (calculatedTotal.value < 0) {
				InitForm();
			}

			// return total value
			return(formatCurrency(calculatedTotal.value));
		}
	}

	// format a value as currency. 
	function formatCurrency(num) {
		num = num.toString().replace(/\$|\,/g,'');
		
		if(isNaN(num))
		   num = "0";
		   
		sign = (num == (num = Math.abs(num)));
		num = Math.floor(num*100+0.50000000001);
		cents = num%100;
		num = Math.floor(num/100).toString();
		
		if(cents<10)
		    cents = "0" + cents;
			
		for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
		    num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
			
  	    return (((sign)?'':'-') + '$' + num + '.' + cents);
	}

	// This function initialzes all the form elements to default values
	function InitForm() {
		//Reset values on form
		document.selectionForm.total.value='$0.00';
		document.selectionForm.calculatedTotal.value=0;
		document.selectionForm.previouslySelectedRadioButton.value=0;

		//Set all checkboxes and radio buttons on form to unchecked:
		for (i=0; i < document.selectionForm.elements.length; i++) {
		    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
			    document.selectionForm.elements[i].checked = false;
			}
		}

		//Set default radio button
		document.selectionForm.ET[3].click()
		document.selectionForm.EX[2].click()
	}

	// end commenting javascript -->
	</SCRIPT>

</head>

<body onload="InitForm();" onreset="InitForm();">

<form method="POST" name="selectionForm">
  <b>Pizza Order</b> <br>
  <font face=Arial size=2> 
  Small $10.00 
  <input type="checkbox" name="Steak"   value=10.00  onclick="this.form.total.value=calculateTotal(this);">
  Medium $12.00 
  <input type="checkbox" name="Chicken" value=12.00 onclick="this.form.total.value=calculateTotal(this);">
  Large $15.00 
  <input type="checkbox" name="Sushi"   value=15.00  onclick="this.form.total.value=calculateTotal(this);">
  <br>
  <br>
  <b>Extra Toppings (only one selection allowed):</b> <br>
  <input type="radio" name="ET" id="ET" value=0.00 onclick="this.form.total.value=calculateTotal(this);"> None
  <br> 
  <input type="radio" name="ET" id="ET" value=1.00 onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
  <br> 
  <input type="radio" name="ET" id="ET" value=2.00 onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
  <br>
  <input type="radio" name="ET" id="ET"  value=3.00 onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00 
  <br>
 <b> Extra Meat</b>
  <br>
  <input type="radio" name="EX" id="EX"  value=3.95 onclick="this.form.total.value=calculateTotal(this);">Exta Cow Meat $3.95 
  <br>
  <input type="radio" name="EX" id="EX"  value=0.00 onclick="this.form.total.value=calculateTotal(this);"> No Extra Cow Meat 
  <br>
<b>Delivery</b>
<br>
Door Step Delivery<input type="checkbox" name="doorstep" value=5.00  onclick="this.form.total.value=calculateTotal(this);">
  <br>
  <br>
  <input type="hidden" name="calculatedTotal" value=0>
  <input type="hidden" name="previouslySelectedRadioButton" value=0>
  <font size=+1> Your total is: </font><font face=Arial size=2><font size=+1>
  <input type="text" name="total" readonly onFocus="this.blur();">
  </font></font><font size=+1> </font> <br>
  <br>
  </font> 
</form>
</body>
</html>

**Bob90** · 03-09-2008, 03:39 PM

They do seem to work. What's the problem?

**fileserverdirect** · 03-09-2008, 11:02 PM

They do? Not on my end,
It is not automaticly selecting " No Extra Cow Meat" and adding it on to the total. Also, If I try Manualy selecting it, the price goes back to zero, even though "Meat" is selected on the other Radio buttons.

P.S. I am using IE7 on a windows xp machine.

**Bob90** · 03-10-2008, 10:23 PM

Sadly even IE7 isn't that bad.

I think the problem lies in the way you implement your function.
Logically, your function only works for one set of radio buttons.
By this I mean that you function can't handle both sets of radio buttons.
I previously stated that I thought that your function should be re-written, but now I suggest it.

The problem lies with subtracting the last amount added, which would be fine if you only used one set of radio buttons as the subtraction would only ever affect that set of choices, but by calling the same function with a different set of radio buttons you allow the function to alter what the first set of buttons added.

Now what I just explained is poorly expressed as it's getting late where I am, but the logic seems sound.

So what's next?

My suggestion:

Code:

function reCalculateCost(){
        
        //reset cost
        var cost = 0;

        //check Checkboxes

        //check first set of radio buttons

        //check second set of radio buttons

        //Sum all for the total cost

        //display cost on screen.


}

You have to fill it in.......

Thread: Javascript Running Totals Question

Thread Tools

Search Thread

Javascript Running Totals Question

Try this

Huh

OK so i didn't check enough

Bookmarks

Bookmarks

Posting Permissions