Would any one be able to tell me how to accomplish this? I need to create a website for a mortgage company and they would like to have all of these calculators like the site listed above....Any ideas?
Thanks!
Thanks!
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Calculators
- Thread starter jlskm74
- Start date
alsoknownas
Technical User
They use JavaScript: Here the code from the Loan Calculator
<head><title>First Choice Quick Loan Calculator</title>
<style type="text/css">
@import url(../includes/style.css) screen;
body,td {font-family:Tahoma; font-size:12px;}
</style>
</head>
<body bgcolor="#DDDDDD">
<!--
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.
-->
<B><FONT SIZE="3">First Choice Loan Calculator</FONT></B><br>
<TABLE height="90%" width="100%" cellpadding=0 cellspacing=0>
<TR valign=center>
<TD align=center>
<form name="loandata">
<table>
<tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the loan (any currency):</td>
<td><input type="text" name="principal" size="12"
onchange="calculate();"></td>
</tr>
<tr>
<td>2)</td>
<td>Annual percentage rate of interest:</td>
<td><input type="text" name="interest" size="12"
onchange="calculate();"></td>
</tr>
<tr>
<td>3)</td>
<td>Repayment period in years:</td>
<td><input type="text" name="years" size="12"
onchange="calculate();"></td>
</tr>
<tr><td colspan="3" align=center>
<BR>
<input type="button" value="Compute Payments" onclick="calculate();" style="color:#000000;font-face:Tahoma,Arial; font-size:10px; border-color:#A9BCA0;border-width:2px;background-color:#FFDC74;text-align:center;">
<BR><BR>
</td></tr>
<tr><td colspan="3">
<b>Payment Information:</b>
</td></tr>
<tr>
<td>4)</td>
<td>Your monthly payment will be:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
<!-- <tr>
<td>5)</td>
<td>Your total payment will be:</td>
<td><input type="text" name="total" size="12"></td>
</tr>
<tr>
<td>6)</td>
<td>Your total interest payments will be:</td>
<td><input type="text" name="totalinterest" size="12"></td>
</tr> -->
</table>
</form></TD>
</TR>
</TABLE>
<!--
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);
document.loandata.total.value = 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.total.value = "";
document.loandata.totalinterest.value = "";
}
}
// This simple method rounds a number to two decimal places.
function round(x) {
return Math.round(x*100)/100;
}
</script>
</body>
</html>
--------------------------------------------------------------------------------
<head><title>First Choice Quick Loan Calculator</title>
<style type="text/css">
@import url(../includes/style.css) screen;
body,td {font-family:Tahoma; font-size:12px;}
</style>
</head>
<body bgcolor="#DDDDDD">
<!--
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.
-->
<B><FONT SIZE="3">First Choice Loan Calculator</FONT></B><br>
<TABLE height="90%" width="100%" cellpadding=0 cellspacing=0>
<TR valign=center>
<TD align=center>
<form name="loandata">
<table>
<tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the loan (any currency):</td>
<td><input type="text" name="principal" size="12"
onchange="calculate();"></td>
</tr>
<tr>
<td>2)</td>
<td>Annual percentage rate of interest:</td>
<td><input type="text" name="interest" size="12"
onchange="calculate();"></td>
</tr>
<tr>
<td>3)</td>
<td>Repayment period in years:</td>
<td><input type="text" name="years" size="12"
onchange="calculate();"></td>
</tr>
<tr><td colspan="3" align=center>
<BR>
<input type="button" value="Compute Payments" onclick="calculate();" style="color:#000000;font-face:Tahoma,Arial; font-size:10px; border-color:#A9BCA0;border-width:2px;background-color:#FFDC74;text-align:center;">
<BR><BR>
</td></tr>
<tr><td colspan="3">
<b>Payment Information:</b>
</td></tr>
<tr>
<td>4)</td>
<td>Your monthly payment will be:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
<!-- <tr>
<td>5)</td>
<td>Your total payment will be:</td>
<td><input type="text" name="total" size="12"></td>
</tr>
<tr>
<td>6)</td>
<td>Your total interest payments will be:</td>
<td><input type="text" name="totalinterest" size="12"></td>
</tr> -->
</table>
</form></TD>
</TR>
</TABLE>
<!--
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);
document.loandata.total.value = 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.total.value = "";
document.loandata.totalinterest.value = "";
}
}
// This simple method rounds a number to two decimal places.
function round(x) {
return Math.round(x*100)/100;
}
</script>
</body>
</html>
--------------------------------------------------------------------------------
- Thread starter
- #3
alsoknownas
Technical User
How I found the code??
![[lookaround]](/data/assets/smilies/lookaround.gif "[lookaround] [lookaround]")
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
alsoknownas
Technical User
being facetious of course. Yes, right-click the pop-up window
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
alsoknownas
Technical User
Done
Done = Last Post
--------------------------------------------------------------------------------
Done = Last Post
--------------------------------------------------------------------------------
- Status