?
Solved

Javascript Form Real-Time Calculator - Something better please!

Posted on 2003-11-10
9
Medium Priority
?
1,431 Views
Last Modified: 2010-07-27
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!
0
Comment
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
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 10

Expert Comment

by:Nushi
ID: 9714752
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
 
LVL 10

Accepted Solution

by:
Nushi earned 2000 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>


<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
 

Author Comment

by:dude846
ID: 9714834
hmm, extremely close - is there anyway I can duplicate the text box? i was having problems with doing that also.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

Expert Comment

by:Nushi
ID: 9714989
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
 

Author Comment

by:dude846
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

by:Nushi
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;

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
 

Author Comment

by:dude846
ID: 9715360
dang - you're good. Thank you alot.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9715376
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question