In this blog we will be covering how to use Pericror’s new Field Calculator chrome extension. The extension can be downloaded here. We will be performing a calculation on our numerical fields and saving the result back into an input on the page.
For this example, I have a form for a new computer record with Raw Price, Tax Rate and Cost fields. I will be calculating the Cost of the computer using the Raw Price and Tax Rate.
To launch the chrome application, click on the calculator icon 
found near the right side of your url bar (top right part of your browser) .
The app will appear as a pop up box below the icon you have just clicked. Lets break down how each button works:
Operators are found on the first row:
- Addition
- Subtraction
- Multiplication
- Division
- Left Parenthesis (Used for nested expressions)
- Right Parenthesis (Used for nested expressions)
- Delete: Deletes the last entry in the calculator window
- Clear: Clears the calculator window
- Equals: Evaluates the expression in the calculator window
- Save: Allows you to save your calculation into one of the inputs on the page through its corresponding button. Will be inactive (grey) until the ‘Equals’ (I.) button is pressed. After pressing the save button, the generated buttons (not A.-J.) will appear green. Press one of the generated buttons to save the current calculation into the input field corresponding to the button pressed.
Buttons representing numerical inputs from the page will be dynamically generated, and as a result will vary in size and appearance depending on the labels of your fields. These buttons will appear either as:
- Inactive, grey in color and with the value (Empty) meaning the input does not currently have a value on the page.
- Active, light blue in color and with the value corresponding to the input field found on the page. Both Inactive (K.) and Active buttons appear in alphabetical order from left to right.
To calculate the cost of our computer, we want to know the price after tax. We can calculate this as Raw Price + ( Raw Price * Tax Rate ). To enter this into our calculator, we press the buttons corresponding to the expression we want to create.
We can then press the equals button 
to calculate the cost.
We now want to save the value into our cost field, and can click the save button
, which will turn all of our generated buttons (Cost, Raw Price, Tax Rate) green. We can then click any of the green buttons to save our calculated value into that field.
Clicking the Cost button saves our calculated cost (1034.55) into the Cost Field, and updates the button value on our calculator. The cost field will no longer be gray because the input now has a value on the page.
Clicking anywhere outside of the calculator window on the page will close the calculator. We can see that the field has been updated on the page.
This has been a tutorial of Pericror’s Input Calculator Chrome Extension.
