JavaScript Components: Embedded Calculator

Doing calculation on numeric input fields

.There is inevitably one or two data entry forms that really require a calculator handy to do conversions, calculate taxes or just sum some set of subtotals. In short, it would be useful to be able to attach a popup calculator to some data entry fields. Enter Tigra's calculator component.

Key features and JavaScript elements
Uses CSS and pop-up windows to build up calculator popup - the technology is much like their calendar component.. The calculator component automatically fills in the associated form field. And in fact, changes the form field everytime a new result is calculated. There are 3 major parts to the calculator component:

calculator.js - the driver javascript code that goes in the root or jvascript directory (we use the latter here and renamed due to name clash the script to calculatorTigra.js);
calculator.html - contains the popup window code that displays the mini-calculator.
calcl.gif plus 19 other keyboard key icons - the calculator icon which( we have renamed it Tigracalc.gif and put it and all the rest of the icons in our images directory. This requires updating the calculator.html code to change img/ to images/ ).

To use the color picker is a three step process.
1) add, the following code to the <head> of your web page:
  <script language=JavaScript src="javascript/calculatorTigra.js" ></script>
2)When you create your form be sure to give it a unique name: <form name="someUniqueName">.
3)For the input field, also give it a unique field name because that is what will be passed to the calculator.
4)Finally place the color picker icon image right next to the input text field with the correct call. Here is the coding:
  <a href="javascript:TCR.TCRPopup(document.forms['tc_test'].elements['input1'])">
    <img width="15" height="13" border="0" alt="Click here to see the calculator" src="images/tigracalc.gif"></a>

By putting the icon image inside a link reference, <a> , one guarantees that the mouse cursor will change to a pointer hand when the mouse hovers over the calculator icon/button. Note we successfully used document.tc_test.input1 for document.forms['tc_test'].elements['input1']. Again, the key here is unique names for each <form> and <input> field combination which will get a calculator.

Try out the script with this demo form
Click here to see the calculator
Click here to see the calculator
         For $29US Tigra has a Pro version of the calculator that does more functions (trig, log, exp, etc) , adds memory functions and provides skins for modifying the look and feel of the calculator.
Top of Page  Tutorials Home  Javascript References  JavaScript Books
©Imagenation 2000-2004