 |
 |
Doing
calculation on numeric input fields
Credit: SoftComplex
Description
.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.