Java Script Loan Payment Calculator
By Stephen Bucaro
The goal for any Web site owner is to attract visitors to their Web site and
get them to stick around. This is referred to as making your Web site "sticky".
One way to do this is to provide useful features like online calculators.
In this article, I provide you with Java Script code for a loan payment
calculator. The process of designing a loan payment calculator, like any
calculator, can be divided into the five steps listed below.
- Acquire the proper formula.
- Design an html form to get input values from the user.
- Code the basic calculation function.
- Add Code to format the output to the user.
- Add Code to handle errors.
Click here
to view the working Loan Payment Calculator
The Loan Payment Formula
The loan payment formula is well known and can be found in many mathematics
textbooks and at many locations on the Web. The formula is shown below.
monthlyRate
monthlypayment = loanAMT x ----------------------------------
1 - ( 1 + monthlyRate) ^ -numPayments
loanAMT = The initial amount of the loan.
monthlyRate = The monthly interest (the annual interest rate / 12).
numPayments = number of payments (made monthly).
The important point about this formula is that it calculates the payment with
compound interest. With compound interest you pay interest not only on the
principal, but also on the accumulated interest. Yearly Compounding is the
number of times per year that the compound interest calculation is performed.
Interest is usually compounded monthly.
• In case you're not familiar with the syntax,
^ -numPayments
means raise it to the negative power of the number of payments.
Loan Payment Input Form
We need an html form to get input values from the user. The html code for a loan
payment calculator form is shown below.
<form>
Loan Amount $:<input style="text-align:right" type="text" name="loanAMT">
Interest Rate %:<input style="text-align:right" type="text" name="iRate">
Yearly Compounding:<input style="text-align:right" type="text" name="numComp" value="12">
Loan Term in months:<input style="text-align:right" type="text" name="numPayments">
<input type="button" value="Monthly Payment:" onClick="calcPayment(this.form)">
<input style="text-align:right" type="text" name="payment">
</form>
Important things to note about this code is that each input element has a unique
name attribute. Each input element has a style attribute that applies
the rule text-align:right. This causes the input to appear at the right side
of the input box like a normal calculator.
Note that the form provides a Yearly Compounding input element which has
a default value of 12. Interest is usually compounded 12 times a year (monthly),
but this input box allows the user to try different compounding rates. If the
user is considering borrowing from a loan shark, they may need to enter the
number 365 for daily compounding.
Note that the form has a button and that the button's onClick event calls a
function named calcPayment, passing the form to the function.
When you try this form, you'll note that it doesn't have a neat appearance.
Forms are usually formatted by embedding their elements in a table. I left
the html table tags out in the code above to make it easier to read. below
is the same form code with table tags included.
<form>
<table>
<tr><td>Loan Amount $:</td><td><input style="text-align:right" type="text" name="loanAMT"></td></tr>
<tr><td>Interest Rate %:</td><td><input style="text-align:right" type="text" name="iRate"></td></tr>
<tr><td>Yearly Compounding:</td><td><input style="text-align:right" type="text" name="numComp" value="12"></td></tr>
<tr><td>Loan Term in months:</td><td><input style="text-align:right" type="text" name="numPayments"></td></tr>
<tr><td><input type="button" value="Monthly Payment:" onClick="calcPayment(this.form)"></td><td>
<input style="text-align:right" type="text" name="payment"></td></tr>
</table>
</form>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
