The JavaScript Source: Math Related : APR or Flat Rate Loan Repayment Calculator

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

This calculator provides a method of comparing compound and flat rates of interest. Flat rates of interest are often used in illustrations because they appear lower than the APR but are in actual fact more expensive. For example, an APR of 7.8% represents a better value than a flat rate of 5%. Includes comments.

Notes

Created by: Morley Computing
Web Site: http://www.morley-computing.co.uk/
Posted: October 8, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: arpFlatRate.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Morley Computing | http://www.morley-computing.co.uk/ */
var currency = '$';

//
// Do the calculation. 
//
function calculatePayment(form) {

	// P = Lr(1+r/1200)^n/[1200{(1+r/1200)^n - 1}]
	// P is monthly payment
	// L is loan amount
	// r is interest rate
	// n is number of months

	L = 1 * form.amount.value;
	r = 1 * form.interest.value;
	n = 1 * form.months.value;
	
	// String to capture output...
	var str = '';
	
	// Do calculations and build output...
	for (i=0; i < form.type.length; i++) {
		if (form.type[i].checked) {
			val = form.type[i].value
			if (val == 'both' || val =='compound')  {
				P = doCompoundCalculation(L, r, n);
				str = str +
					"<h2>Compound Rate</h2>" + 
					"<strong>Total amount repayable:</strong> " + formatMoney(n*P) +
					"<strong>Monthly repayment:</strong> " + formatMoney(P);
			}
			if (val == 'both' || val =='flat')  {
				P = doFlatRateCalculation(L, r, n);
				str += 
					"<h2>Flat Rate</h2>" + 
					"<strong>Total amount repayable:</strong> " + formatMoney(n*P) +
					"<strong>Monthly repayment:</strong> " + formatMoney(P);
			}
		}
	}
	
	document.getElementById('result').innerHTML = str;
	
}

//
// Calculate payment using a compounded rate. 
//
function doCompoundCalculation(L, r, n) {
	// L is loan amount
	// r is APR
	// n is number of months

	P = L * r * Math.pow(1+r/1200,n) / (1200 * (Math.pow(1+r/1200,n) - 1));
	return P;
}

//
// Calculate payment using a flat rate (no compounding). 
//
function doFlatRateCalculation(L, r, n) {
	// L is loan amount
	// r is flat rate
	// n is number of months
	
	T =  (1 + (n * r/1200)) * L;
	P = T/n;
	return P;
}

//
// Only allow digits and decimal point.
//
function setNumericOnly(object) {
	value = object.value;
	object.value = value.replace(/[^\d\.]/g, "");
}

//
// Format money to 2dp and add commas...
// Based on script by: Cyanide_7
// See: http://javascript.internet.com/forms/currency-format.html
// 
function formatMoney(num) {
	num = num.toString().replace(/\$|\,/g,'');
	if(isNaN(num)) num = "0";
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	dec = num%100;
	num = Math.floor(num/100).toString();
	if(dec<10) dec = "0" + dec;
	for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) {
		num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
	}
	return currency + (((sign)?'':'-') + num + '.' + dec);
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#calculator {
  width: 410px;
}

#calculator label {
 	display: block;
 	margin-top: 0.8em;
}

#result strong {
 	display: block;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="arpFlatRate.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="calculator">
	<form id="calculatorForm">
		<fieldset>
			<legend>Loan Details</legend>
			<label for="amount">Loan Amount:</label>
			<input type="text" class="numeric" id="amount" name="amount" value="10000" maxlength="10" size="6" onkeyup="setNumericOnly(this);" />
			<label for="interest">Interest Rate:</label>
			<input type="text" class="numeric" id="interest" name="interest" value="7.8" maxlength="6" size="6" onkeyup="setNumericOnly(this);" />
			<label for="months">Length of Loan (Months):</label>
			<input type="text" class="numeric" id="months" name="months" value="12" maxlength="6" size="6" onkeyup="setNumericOnly(this);" />
			<label for="type">Interest Type:</label>
			<input type="radio" name="type" id="type" value="compound" checked="true" />Compound (APR)
			<input type="radio" name="type" id="type" value="flat" />Flat Rate
			<input type="radio" name="type" id="type" value="both" />Calculate Both
		<label for="action"> </label>
		<input type="submit" id="action" name="action" value="Calculate" maxlength="10" onclick="calculatePayment(document.forms.calculatorForm); return false;" />
		</fieldset>
	</form>
	<!-- Calculation results will appear here -->
	<div id="result"></div>
</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

1. From: Robert Harrold
Added a link
10/12/2007 20:40:02

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

1. From: Robert HarroldAdded a link10/12/2007 20:40:02

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: Robert Harrold
Added a link
10/12/2007 20:40:02