[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1496
  • Last Modified:

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!
0
dude846
Asked:
dude846
  • 5
  • 4
1 Solution
 
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
 
dude846Author Commented:
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!

 
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

Featured Post

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!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now