# Javascript Form Real-Time Calculator - Something better please!

Alright, I've spent more the 9 hours trying to figure out what the javascript --- (at the bottom) --- can do, When i came to the conclusion - this little script doesn't add more then 2 radio buttons. I just copied and renamed the 'name'  and it doesn't add them at all... that and when I [tried to] use it in a real-world application - it resetted the money value to what it would've been= 200 + 'form 1'; instead of what would've been better and usable: 200 + 'form 1' + 'form 2'. Heres the script - compare the 2; its just easier to show you. A person can't explain stuff too well after an all-nighter.
-----------------------------------------------
Script without Changes:

<html>

<title>Print Order Form</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Paul DeBrino -->
<!-- Web Site:   http://infinity-rd.com -->
<!-- Begin
function CheckChoice(whichbox)
{
with (whichbox.form)
{
//Handle differently, depending on type of input box.
{
//First, back out the prior radio selection's price from the total:
//Then, save the current radio selection's price:
//Now, apply the current radio selection's price to the total:
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
//If box was checked, accumulate the checkbox value as the form total,
//Otherwise, reduce the form total by the checkbox value:
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else      { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
if (hiddentotal.value < 0)
{
InitForm();
}

//Now, return with formatted total:
return(formatCurrency(hiddentotal.value));
}
}

//Define function to format a value as currency:
function formatCurrency(num)
{
// Courtesy of http://www7.brinkster.com/cyanide7/
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);
}

//Define function to init the form on reload:
function InitForm()
{
//Reset the displayed total on form:
document.myform.total.value='\$300';
document.myform.hiddentotal.value=300;

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

//  End -->
</script>

<body bgcolor="#FFFFFF" onreset="InitForm();">

<tr>
<td width="749" valign="top"><table border="0" width="746">
<tr>
<td>

</td>
</tr>
</table>
<div align="center"><center><table border="0" width="100%" nowrap>
<tr>
<td width="81%" valign="top" align="center"><div align="left"><table border="0" width="96%" nowrap>
<tr>
<td width="100%" valign="top" height="1">
<form method="POST" name="myform">
<input type="hidden" name="hiddentotal" value=0>
<tr align="center">
<strong><td ALIGN="right" width="360" height="20"><font face="Arial" size="1">Free UPS Ground</font></strong></td>
<td width="411" align="left" height="20"><font face="Verdana"><em><small><input type="radio" name="Sauce" value=free   price=0.00
onclick="this.form.total.value=CheckChoice(this);"></small></em></font></td>
</tr>
<tr align="center">
<strong><td ALIGN="right" width="360" height="20"><font face="Arial" size="1">UPS 3 day</font></strong></td>
<td width="411" align="left" height="20"><font face="Verdana"><em><small><input type="radio" name="Sauce" value=ups   price=30.00
onclick="this.form.total.value=CheckChoice(this);"></small></em></font></td>
</tr>
<tr align="center">
<strong><td ALIGN="right" width="360" height="20"><font face="Arial" size="1">UPS 2 day</font></strong></td>
<td width="411" align="left" height="20"><font face="Verdana"><em><small><font face="Verdana"><em><small><input type="radio" name="Sauce" value=ups2   price=40.00
onclick="this.form.total.value=CheckChoice(this);"></small></em></font></td>
</tr>
<tr align="center">
<strong><td ALIGN="right" width="360" height="20"><font face="Arial" size="1">UPS 2nd day</font></strong></td>
<td width="411" align="left" height="20"><font face="Verdana"><em><small><font face="Verdana"><em><small><input type="radio" name="Sauce" value=ups2nd   price=50.00
onclick="this.form.total.value=CheckChoice(this);"></small></em></font></td>
</tr>
<tr align="center">
<strong><td ALIGN="right" width="360" height="20"><font face="Arial" size="1">Amount of
Order</font></strong></td>
<td width="411" align="left" height="20"><font face="Verdana"><em><small><input type="text" name="total" value="\$300" readonly onFocus="void(0);    ">&nbsp;</small></em></font></td>
</tr>
</center>
</tr>
</table>

</tr>
</table>
</center></div>
</form>
</html>

--------------------------------
"A Script that could have more function in life -- but doesn't work"

<!-- THREE STEPS TO INSTALL ORDER FORM:

3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Paul DeBrino -->
<!-- Web Site:   http://infinity-rd.com -->
<!-- Begin
function CheckChoice(whichbox)
{
with (whichbox.form)
{
//Handle differently, depending on type of input box.
{
//First, back out the prior radio selection's price from the total:
//Then, save the current radio selection's price:
//Now, apply the current radio selection's price to the total:
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
//If box was checked, accumulate the checkbox value as the form total,
//Otherwise, reduce the form total by the checkbox value:
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else      { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
if (hiddentotal.value < 0)
{
InitForm();
}

//Now, return with formatted total:
return(formatCurrency(hiddentotal.value));
}
}

//Define function to format a value as currency:
function formatCurrency(num)
{
// Courtesy of http://www7.brinkster.com/cyanide7/
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);
}

//Define function to init the form on reload:
function InitForm()
{
//Reset the displayed total on form:
document.myform.total.value='\$200';
document.myform.hiddentotal.value=200;

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

}

//  End -->
</script>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<form method="POST" name="myform">
<font face=Arial size=2>
Steak \$15.25
<input type="checkbox" name="Steak"   value=15.25  onclick="this.form.total.value=CheckChoice(this);">
Chicken \$12.39
<input type="checkbox" name="Chicken" value=12.39 onclick="this.form.total.value=CheckChoice(this);">
Sushi \$18.75
<input type="checkbox" name="Sushi"   value=18.75  onclick="this.form.total.value=CheckChoice(this);">
<br><br>
<b>Prepare with this special sauce (extra charge -- only one selection allowed):</b>
<br>
None, thanks
onclick="this.form.total.value=CheckChoice(this);">
Duck Sauce \$10.99
onclick="this.form.total.value=CheckChoice(this);">
Ginger Sauce \$5.00
onclick="this.form.total.value=CheckChoice(this);">
Hot Sauce \$1.50
onclick="this.form.total.value=CheckChoice(this);">
<br><br><br>

None, thanks
onclick="this.form.total.value=CheckChoice(this);">
Duck Sauce \$10.99
onclick="this.form.total.value=CheckChoice(this);">
Ginger Sauce \$5.00
onclick="this.form.total.value=CheckChoice(this);">
Hot Sauce \$1.50
onclick="this.form.total.value=CheckChoice(this);">
<br><br><br>
<input type="hidden" name="hiddentotal" value=0>
<font size=+1>
</font>
<br><br>
(Note: Total can not be changed by the visitor.)
</font>
</form>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Please help me by making a true working version of this script, or any script that does the same real-time calculating function. the bugless the better!
###### Who is Participating?

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Commented:
hi there.

try this out.

Nushi.

<html>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Paul DeBrino -->
<!-- Web Site:   http://infinity-rd.com -->
<!-- Begin
function CheckChoice(whichbox)    {
with (whichbox.form)         {
//Handle differently, depending on type of input box.
//First, back out the prior radio selection's price from the total:
//Then, save the current radio selection's price:
//Now, apply the current radio selection's price to the total:
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
//If box was checked, accumulate the checkbox value as the form total,
//Otherwise, reduce the form total by the checkbox value:
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else      { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
if (hiddentotal.value < 0)
{
InitForm();
}

//Now, return with formatted total:
return(formatCurrency(hiddentotal.value));
}
}

//Define function to format a value as currency:
function formatCurrency(num)
{
// Courtesy of http://www7.brinkster.com/cyanide7/
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);
}

//Define function to init the form on reload:
function InitForm()
{
//Reset the displayed total on form:
document.myform.total.value='\$200';
document.myform.hiddentotal.value=200;

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

}

var items = new Array( 'Steak' , 'Chicken' , 'Sushi' , 'Sauce' , 'Sauce1');
var total = '100';

function setTotal( obj ){
total = 100;
//      run on all the items and acoomulate the total.
for (ind=0; ind<items.length; ind++){

//get the elements with the wanted names.
var nextElements = document.getElementsByName( items[ind]);

//      run on all the items if there is mor ethen one and acoomulate the total .
for (ind2=0; ind2<nextElements.length; ind2++){

if (nextElements[ind2].checked){

//      in the checkboxes we check the value
if (nextElements[ind2].type == 'checkbox')
total = Number( Number(total) + Number(nextElements[ind2].value));
//      in the checkboxes we check the price
total = Number( Number(total) + Number(nextElements[ind2].price));
}
}
}
document.myform.total.value='\$' + total;
document.myform.hiddentotal.value= total ;

}
//  End -->
</script>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<form method="POST" name="myform">
<font face=Arial size=2>
<input type="checkbox" name="Steak"   value=15.25  onclick="setTotal(this);">Steak \$15.25
<input type="checkbox" name="Chicken" value=12.39 onclick="setTotal(this);">Chicken \$12.39
<input type="checkbox" name="Sushi"   value=18.75  onclick="setTotal(this);">Sushi \$18.75
<br><br>
<b>Prepare with this special sauce (extra charge -- only one selection allowed):</b>
<br>
<input type="radio" name="Sauce" value=none   price=0.00  onclick="setTotal(this);">None, thanks
<input type="radio" name="Sauce" value=duck   price=10.99 onclick="setTotal(this);">Duck Sauce \$10.99
<input type="radio" name="Sauce" value=ginger price=5.00 onclick="setTotal(this);">Ginger Sauce \$5.00
<input type="radio" name="Sauce" value=hot    price=1.50  onclick="setTotal(this);">Hot Sauce \$1.50
<br><br><br>
<input type="radio" name="Sauce1" value=none   price=0.00  onclick="setTotal(this);">None, thanks
<input type="radio" name="Sauce1" value=duck   price=10.99 onclick="setTotal(this);">Duck Sauce \$10.99
<input type="radio" name="Sauce1" value=ginger price=5.00 onclick="setTotal(this);">Ginger Sauce \$5.00
<input type="radio" name="Sauce1" value=hot    price=1.50 onclick="setTotal(this);">Hot Sauce \$1.50
<br><br><br>
<input type="hidden" name="hiddentotal" value=0>
<font size=+1>
</font>
<br><br>
(Note: Total can not be changed by the visitor.)
</font>
</form>
Commented:
let me know if thats what u need and ill fix it
with all the other functions as well (currency for example).

Nushi.

all you need to test it is this:
<html>

<SCRIPT LANGUAGE="JavaScript">

var items = new Array( 'Steak' , 'Chicken' , 'Sushi' , 'Sauce' , 'Sauce1');
var total = '100';

function setTotal( obj ){
total = 100;
//      run on all the items and acoomulate the total.
for (ind=0; ind<items.length; ind++){

//get the elements with the wanted names.
var nextElements = document.getElementsByName( items[ind]);

//      run on all the items if there is mor ethen one and acoomulate the total .
for (ind2=0; ind2<nextElements.length; ind2++){

if (nextElements[ind2].checked){

//      in the checkboxes we check the value
if (nextElements[ind2].type == 'checkbox')
total = Number( Number(total) + Number(nextElements[ind2].value));
//      in the checkboxes we check the price
total = Number( Number(total) + Number(nextElements[ind2].price));
}
}
}
document.myform.total.value='\$' + total;
document.myform.hiddentotal.value= total ;

}
//  End -->
</script>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY >

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<form method="POST" name="myform">
<font face=Arial size=2>
<input type="checkbox" name="Steak"   value=15.25  onclick="setTotal(this);">Steak \$15.25
<input type="checkbox" name="Chicken" value=12.39 onclick="setTotal(this);">Chicken \$12.39
<input type="checkbox" name="Sushi"   value=18.75  onclick="setTotal(this);">Sushi \$18.75
<br><br>
<b>Prepare with this special sauce (extra charge -- only one selection allowed):</b>
<br>
<input type="radio" name="Sauce" value=none   price=0.00  onclick="setTotal(this);">None, thanks
<input type="radio" name="Sauce" value=duck   price=10.99 onclick="setTotal(this);">Duck Sauce \$10.99
<input type="radio" name="Sauce" value=ginger price=5.00 onclick="setTotal(this);">Ginger Sauce \$5.00
<input type="radio" name="Sauce" value=hot    price=1.50  onclick="setTotal(this);">Hot Sauce \$1.50
<br><br><br>
<input type="radio" name="Sauce1" value=none   price=0.00  onclick="setTotal(this);">None, thanks
<input type="radio" name="Sauce1" value=duck   price=10.99 onclick="setTotal(this);">Duck Sauce \$10.99
<input type="radio" name="Sauce1" value=ginger price=5.00 onclick="setTotal(this);">Ginger Sauce \$5.00
<input type="radio" name="Sauce1" value=hot    price=1.50 onclick="setTotal(this);">Hot Sauce \$1.50
<br><br><br>
<input type="hidden" name="hiddentotal" value=0>
<font size=+1>
</font>
<br><br>
(Note: Total can not be changed by the visitor.)
</font>
</form>

Experts Exchange Solution brought to you by

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Author Commented:
hmm, extremely close - is there anyway I can duplicate the text box? i was having problems with doing that also.
Author Commented:
actually - you did answer my original question; so it would be unfair to give you the points.
Commented:
im here.

what else do you need:
>>is there anyway I can duplicate the text box

how, where ?

Nushi.
Author Commented:
at the bottom - where the actual price is all summed up; how could it be duplicated?

For example, a box at the top and the bottom of the page
Commented:
hi there.

with no problem.
add the text field whenever you want it and add this line:

now you have this one:
>> document.myform.total.value='\$' + total;

>>   document.myform.total2.value='\$' + total;

...
<form method="POST" name="myform">
<input type='text' id='totlal2'   ....>
<font face=Arial size=2>
<input type="checkbox" name="Steak"   value=15.25  onclick="setTotal(this);">Steak \$15.25

...

Nushi.

Author Commented:
dang - you're good. Thank you alot.
Commented:
NP.
>>dang - you're good. Thank you alot.
Thank you.

you can always look for me if you need more.