Bucaro TecHelpHTTPS Encryption not required because no account numbers orpersonal information is ever requested or accepted by this site Custom Search

# Java Script Loan Payment Calculator

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.

1. Acquire the proper formula.
2. Design an html form to get input values from the user.
3. Code the basic calculation function.
4. Add Code to format the output to the user.
5. Add Code to handle errors.

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>
```

 .menubtn { margin-top:10px; margin-left:50px; width:220px; opacity:1; border-style:solid; border-color:#009000; background-color:#66ff66; transition-property: opacity; transition-duration: 1s; transition-timing-function: ease-out; } .menubtn:hover { opacity:1; background-color:#e5ff23; } Menu - More Java Script Programming RSS Feed  Follow @Stephen Bucaro
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268