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>

<head>
<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.
               if (whichbox.type == "radio")
               {
                    //First, back out the prior radio selection's price from the total:
                    hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
                    //Then, save the current radio selection's price:
                    hiddenpriorradio.value = eval(whichbox.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;
          document.myform.hiddenpriorradio.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>
<meta name="Microsoft Border" content="none"></head>

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

<table border="0" width="753"cellspacing="0" cellpadding="0">
  <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>
               <input type="hidden" name="hiddenpriorradio" 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:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

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

<HEAD>

<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.
               if (whichbox.type == "radio")
               {
                    //First, back out the prior radio selection's price from the total:
                    hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
                    //Then, save the current radio selection's price:
                    hiddenpriorradio.value = eval(whichbox.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;
          document.myform.hiddenpriorradio.value=0;


          //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>

</HEAD>

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

<BODY onLoad="InitForm();" onreset="InitForm();">

<!-- 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
          <input type="radio" name="Sauce" value=none   price=0.00
          onclick="this.form.total.value=CheckChoice(this);">
     Duck Sauce $10.99
          <input type="radio" name="Sauce" value=duck   price=10.99
          onclick="this.form.total.value=CheckChoice(this);">
     Ginger Sauce $5.00
          <input type="radio" name="Sauce" value=ginger price=5.00
          onclick="this.form.total.value=CheckChoice(this);">
     Hot Sauce $1.50
          <input type="radio" name="Sauce" value=hot    price=1.50
          onclick="this.form.total.value=CheckChoice(this);">
     <br><br><br>

     None, thanks
          <input type="radio" name="Sauce1" value=none   price=0.00
          onclick="this.form.total.value=CheckChoice(this);">
     Duck Sauce $10.99
          <input type="radio" name="Sauce1" value=duck   price=10.99
          onclick="this.form.total.value=CheckChoice(this);">
     Ginger Sauce $5.00
          <input type="radio" name="Sauce1" value=ginger price=5.00
          onclick="this.form.total.value=CheckChoice(this);">
     Hot Sauce $1.50
          <input type="radio" name="Sauce1" value=hot    price=1.50
          onclick="this.form.total.value=CheckChoice(this);">
     <br><br><br>
     <input type="hidden" name="hiddentotal" value=0>
     <input type="hidden" name="hiddenpriorradio" value=0>
     <font size=+1>
     Your total is: <input type="text" name="total" readonly onFocus="this.blur();">
     </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!
dude846Asked:
Who is Participating?
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.

NushiCommented:
hi there.

try this out.

Nushi.

<html>


<HEAD>

<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.
              if (whichbox.type == "radio")              {
                   //First, back out the prior radio selection's price from the total:
                   hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
                   //Then, save the current radio selection's price:
                   hiddenpriorradio.value = eval(whichbox.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;
         document.myform.hiddenpriorradio.value=0;


         //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
                        else if (nextElements[ind2].type == 'radio')
                              total = Number( Number(total) + Number(nextElements[ind2].price));
                        }
                  }
            }
       document.myform.total.value='$' + total;
    document.myform.hiddentotal.value= total ;

      }
//  End -->
</script>

</HEAD>

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

<BODY onLoad="InitForm();" onreset="InitForm();">

<!-- 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>
    <input type="hidden" name="hiddenpriorradio" value=0>
    <font size=+1>
    Your total is: <input type="text" name="total" readonly onFocus="this.blur();">
    </font>
    <br><br>
    (Note: Total can not be changed by the visitor.)
    </font>
</form>
0
NushiCommented:
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>


<HEAD>

<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
                        else if (nextElements[ind2].type == 'radio')
                              total = Number( Number(total) + Number(nextElements[ind2].price));
                        }
                  }
            }
       document.myform.total.value='$' + total;
    document.myform.hiddentotal.value= total ;

      }
//  End -->
</script>

</HEAD>

<!-- 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>
    <input type="hidden" name="hiddenpriorradio" value=0>
    <font size=+1>
    Your total is: <input type="text" name="total" readonly onFocus="this.blur();">
    </font>
    <br><br>
    (Note: Total can not be changed by the visitor.)
    </font>
</form>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

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

Start your 7-day free trial
dude846Author Commented:
hmm, extremely close - is there anyway I can duplicate the text box? i was having problems with doing that also.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

dude846Author Commented:
actually - you did answer my original question; so it would be unfair to give you the points.
0
NushiCommented:
im here.

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

how, where ?
explain in details and ill help you to solve all your problems.

Nushi.
0
dude846Author 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
0
NushiCommented:
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;

add another one:
>>   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
dude846Author Commented:
dang - you're good. Thank you alot.
0
NushiCommented:
NP.
>>dang - you're good. Thank you alot.
Thank you.

you can always look for me if you need more.
i will help you as much as i can.

Thanks for the A
Nushi.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.