Loan Calculators

The first time I wrote code to create loan calculators was back when the main browsers people used were ones that still didn't support the Document Object Model. In order to ensure that the loan calculators didn't display a non-functional form on the web page I split the script for each calculator into two parts with one part to go in the body of the page where the calculator was to appear using document.write statements to actually write the HTML for the form into the page and the second script going in the head of the page to provide one function that would be called when the button in the calculator was pressed to perform the calculations. By doing it that way the calculator would only appear in the page when JavaScript was enabled and the script would then validate each of the values entered and display an alert if it found an error.

JavaScript has changed greatly since then and so about the only part of the original script that I kept in creating a replacement version is the three lines of code that actually perform the calculations.

In creating the new versions of these calculator scripts I have made a number of significant changes in the approach that I used.

  1. The HTML is now hard coded in the page since the new version of the calculator is intended to work whether JavaScript is enabled or not.
  2. The form tag now has an action attached to reload the page when the form is submitted.
  3. The page now uses a PHP version of the original JavaScript to validate each field and to output the answer if all of the inputs are valid.
  4. The answer is written into the page content rather than using a readonly input field. Also the error messages are written there instead of the answer if the inputs are not valid.
  5. The JavaScript has been completely rewritten to make it completely unobtrusive.
  6. Instead of waiting until all of the form has been entered before validating fields, the JavaScript now has each field validation as a separate function that is called when the input field loses the focus.
  7. The JavaScript writes the exact same error messages or answer to the exact same spot in the page as the PHP does so that the only difference between the two is when the error checking is performed and whether the page needs to be reloaded or not.

As well as being complete scripts that you can just plug into any site that supports PHP, the script also clearly demonstrates how much code needs to be added to a typical script in order to make it unobtrusive and also to provide all the appropriate validation. Most books teaching JavaScript would omit most of this code from their examples and so if they were demonstrating a loan calculator there would be very little JavaScript shown other than the actual calculations - perhaps half a dozen lines of JavaScript in all to demonstrate the use of some of the Math methods such as ceil and pow. A version of the code for unobtrusive cross browser event processing would likely appear in a different chapter of the book and the concepts of lazy loading and wrapping the entire script in an anonymous function would be separately covered (or possibly not mentioned). Demonstrating form field validation might appear in the book in yet another separate location (probably only as a very minor section that doesn't really emphasis just how important it is). Those who have learnt JavaScript from such a book will be able to clearly see how all of these concepts need to be combined together into one real world script by examining the source code for a loan calculator provided here.

Note that I have now added a third calculator so as well as checking out the working copies of both the Loan Principal Calculator and Loan Instalment Calculator you can also now check out the working copy of the Loan Period Calculator. The download also includes a copy of my Interest Rate Converter that allows you to convert between nominal and effective interest rates. If any of these are what you are looking for then you can download the PHP and JavaScript for all three to use any one or more on your own site.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow