Solved

Javascript Form Real-Time Calculator - Something better please!

Posted on 2003-11-10
1,297 Views
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!
0
Question by:dude846
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

• Help others & share knowledge
• Earn cash & points
• 5
• 4

LVL 10

Expert Comment

ID: 9714752
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>
0

LVL 10

Accepted Solution

Nushi earned 500 total points
ID: 9714772
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>
0

Author Comment

ID: 9714834
hmm, extremely close - is there anyway I can duplicate the text box? i was having problems with doing that also.
0

Author Comment

ID: 9714860
actually - you did answer my original question; so it would be unfair to give you the points.
0

LVL 10

Expert Comment

ID: 9714989
im here.

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

how, where ?

Nushi.
0

Author Comment

ID: 9715164
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
0

LVL 10

Expert Comment

ID: 9715256
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.

0

Author Comment

ID: 9715360
dang - you're good. Thank you alot.
0

LVL 10

Expert Comment

ID: 9715376
NP.
>>dang - you're good. Thank you alot.
Thank you.

you can always look for me if you need more.

Thanks for the A
Nushi.
0

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month7 days, 9 hours left to enroll