Order Form Part 5: "On the Fly" calculations, step three

By Vince Barnes

Now that our "assistant" function is in place, we a re ready to add in the main calculate( ) function itself.  As we did in the last section, let's first take a look at the function:


function calculate()
{

   QtyA = 0; QtyB = 0; QtyC = 0;
   TotA = 0; TotB = 0; TotC = 0;

   PrcA = 1.25; PrcB = 2.35; PrcC = 3.45;



   if (document.ofrm.qtyA.value > "")
      { QtyA = document.ofrm.qtyA.value };
   document.ofrm.qtyA.value = eval(QtyA);

   if (document.ofrm.qtyB.value > "")
      { QtyB = document.ofrm.qtyB.value };
   document.ofrm.qtyB.value = eval(QtyB);

   if (document.ofrm.qtyC.value > "")
      { QtyC = document.ofrm.qtyC.value };
   document.ofrm.qtyC.value = eval(QtyC);


   TotA = QtyA * PrcA;
   document.ofrm.totalA.value = dm(eval(TotA));

   TotB = QtyB * PrcB;
   document.ofrm.totalB.value = dm(eval(TotB));

   TotC = QtyC * PrcC;
   document.ofrm.totalC.value = dm(eval(TotC));


   Totamt =
      eval(TotA) +
      eval(TotB) +
      eval(TotC) ;

   document.ofrm.GrandTotal.value = dm(eval(Totamt));

}
 

So, let's break it down!  The first thing we do is to define some variables and initialize them to zero.  We need one for each quantity, and one for each total:

 

  QtyA = 0; QtyB = 0; QtyC = 0;
  TotA = 0; TotB = 0; TotC = 0;

 

No we define some variables (which we're going to use as though they were constants, meaning we're never going to change their values) to hold the prices of each item.  We could as easily use the actual prices as constants in our calculations, but defining them at this point will make it easy to find them when the prices change in the future.  Good mnemonic names would help too, but we only have three, so we'll keep it simple:

 

  PrcA = 1.25; PrcB = 2.35; PrcC = 3.45;

 

Now we set up some variable values.  There are three sets on our form, all of which work alike, so we'll study the first set only.  To get at the fields on our form we need to address the field name, which is with the form (which we'll reference by name) within the document object (which is the web page).  The format for doing this is document.formname.fieldname -- so in the case or our "A" quantity field it's document.ofrm.qtyA  Remember also that we need to get the value property of the field so it's document.ofrm.qtyA.value

 

First we'll check whether there is anything to get from our field.  A test for Greater Than null does very well for this.  If there's something there we'll assign it to our QtyA work variable, thus:

 

  if (document.ofrm.qtyA.value > "")
     { QtyA = document.ofrm.qtyA.value };

 

Now we'll set up the display field, putting in it whatever value is in our work field, whether it's a value retrieved from the form in the preceding statement, or the zero value with which we initialized the variable:

 

  document.ofrm.qtyA.value = eval(QtyA);

 

OK, on to the money calculations!  All we need to do is to multiply the quantity by the price, and assign the result to our total work variable:

 

  TotA = QtyA * PrcA;

 

And now that that's there, we can format it to display on our page.  To do this, we'll use the "display money" function dm( ) that we created in the last step. You will notice also that, as in some previous statements, we use the eval built-in function to ensure that we are always dealing with the numerical evaluation of what might be either a string or a number.  In this instance you can be fairly sure we are dealing with a number, but this is just a sound coding practice.  Here's the code:

 

  document.ofrm.totalA.value = dm(eval(TotA));

 

The only thing left to do is to calculate and display the grand total.  To accomplish this, we'll use all the same coding principles as in our previous calculations, thus:

 

  Totamt =
     eval(TotA) +
     eval(TotB) +
     eval(TotC) ;

  document.ofrm.GrandTotal.value = dm(eval(Totamt));

 

Once we've completed the function, we mustn't forget the closing brace.  If you'd like to see how our page is coming along, you can check it out (and try it out) by clicking here.

 

Did you try it out by putting an alpha character in the quantity field?  Not very helpful, was it?!  We'll do something about that next.

 

Return to the previous step  |  Proceed to the next step



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date