Solved

Javascript Form Real-Time Calculator - Something better please!

Posted on 2003-11-10
9
1,183 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
  • 5
  • 4
9 Comments
 
LVL 10

Expert Comment

by:Nushi
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
hmm, extremely close - is there anyway I can duplicate the text box? i was having problems with doing that also.
0
 

Author Comment

by:dude846
Comment Utility
actually - you did answer my original question; so it would be unfair to give you the points.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 10

Expert Comment

by:Nushi
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
dang - you're good. Thank you alot.
0
 
LVL 10

Expert Comment

by:Nushi
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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 …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now