JavaScript Loan Calculator : TextField « Form Control « JavaScript DHTML

JavaScript Loan Calculator

Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
<head><title>JavaScript Loan Calculator</title></head>
<body bgcolor="white">
  This is an HTML form that allows the user to enter data, and allows
  JavaScript to display the results it computes back to the user. The
  form elements are embedded in a table to improve their appearance.
  The form itself is given the name "loandata", and the fields within
  the form are given names like "interest" and "years".  These
  fieldnames are used in the JavaScript code that follows the form.
  Note that some of the form elements define "onchange" or "onclick"
  event handlers. These specify strings of JavaScript code to be
  executed when the user enters data or clicks on a button. 
<form name="loandata">
    <tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
      <td>Amount of the loan (any currency):</td>
      <td><input type="text" name="principal" size="12" 
      <td>Annual percentage rate of interest:</td>
      <td><input type="text" name="interest" size="12" 
      <td>Repayment period in years:</td>
      <td><input type="text" name="years" size="12" 
    <tr><td colspan="3">
      <input type="button" value="Compute" onclick="calculate();">
    <tr><td colspan="3">
      <b>Payment Information:</b>
      <td>Your monthly payment will be:</td>
      <td><input type="text" name="payment" size="12"></td>
      <td>Your total payment will be:</td>
      <td><input type="text" name="total" size="12"></td>
      <td>Your total interest payments will be:</td>
      <td><input type="text" name="totalinterest" size="12"></td>

  This is the JavaScript program that makes the example work. Note that
  this script defines the calculate() function called by the event
  handlers in the form.  The function refers to values in the form
  fields using the names defined in the HTML code above.
<script language="JavaScript">
function calculate() {
    // Get the user's input from the form. Assume it is all valid.
    // Convert interest from a percentage to a decimal, and convert from
    // an annual rate to a monthly rate. Convert payment period in years
    // to the number of monthly payments.
    var principal = document.loandata.principal.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    // Now compute the monthly payment figure, using esoteric math.
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);

    // Check that the result is a finite number. If so, display the results
    if (!isNaN(monthly) && 
        (monthly != Number.POSITIVE_INFINITY) &&
        (monthly != Number.NEGATIVE_INFINITY)) {

        document.loandata.payment.value = round(monthly); = round(monthly * payments);
        document.loandata.totalinterest.value = 
            round((monthly * payments) - principal);
    // Otherwise, the user's input was probably invalid, so don't
    // display anything.
    else {
        document.loandata.payment.value = ""; = "";
        document.loandata.totalinterest.value = "";

// This simple method rounds a number to two decimal places.
function round(x) {
  return Math.round(x*100)/100;


Related examples in the same category

1.Text field tab Index
2.Is Text Editable
3.Get vcard name
4.Text Field autocomplete Example
5.TextField focus and select all
6.Show TextField value in Dialog
7.TextField focus, blur, and click action
8.Display textfield value in new page
9.Another TextField jump
10.TextField get Focus and clear content
11.Validate an input field with minimum and maximum values
12.Validate an field with a maximum number of characters
13.Select the textfield and focus
14.Focus an input field
15.Jump to the next field
16.Get textfield value
17. Methods and Properties of the Text Object
18.Selecting Text Upon Focus
19.Assign a default value to a Text object
20.Compound Interest Calculator
21.Resetting a Text Object to Default Value
22.Getting and Setting a Text Object's Value
23.Passing a Text Object (as this) to the Function
24.Text Object Select and Focus
25.Data Validation via an onChange event Handler
26.Add textfield dynamically into HTML
27. Firing the onSame Event (FireFox)
28.Numerals Only
29.Letter only, yes no only textfield
30.Auto focus textfield
31.Block enter textfield
32.If the textfield has been changed
33.Check if text field input is a number
34.Call select method to highlight the text field
35.Check if a text field is empty
36.Change the text value in text box into upper case
37.Getting and Setting a Text Object's value Property
38.Feed value from array to text box