Forms - Beginner question

JamesDE · Joined: 22 Jun 2008 Posts: 2

I'm trying to create an amortization table with text boxes as input fields and I'd like to output the table to the same page. I have the input part working but can't get the table to output. Thank you.

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Loan Amortization</title>
<style type="text/css">
body {background-color: #CCCCCC}
</style>
<script type="text/javascript" src="loanamortization.js"></script>
</head>
<body>
<form id="loanAmortization" name="loanAmortization">
<fieldset>
<legend>Inputs</legend>
<label for="principal">Principal</label><br />
<input type="text" name="principal" id="principal" value="10000" /><br />

<label for="interest">Interest</label><br />
<input type="text" name="interest" id="interest" value=".05" /><br />

<label for="terms">Terms</label><br />
<select name="terms" id="terms">
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
<option value="48">48</option>
<option value="60">60</option>
</select><br /><br />
<input type="submit" value="Calculate" onclick="calculate()" /><br />
</fieldset>
<DIV id="output">
</DIV>
</form>
</body>

JS:

function calculate()
{
var principal = parseFloat(document.loanAmortization.principal.value);

var interest = parseFloat(document.loanAmortization.interest.value);
var terms = parseInt(document.loanAmortization.terms.value);
document.loanAmortization.output.value = amort(principal, interest, terms);

}

function amort(balance, interestRate, terms)
{
var monthlyRate = interestRate/12;
var payment = balance * (monthlyRate/(1-Math.pow(
1+monthlyRate, -terms)));

var result = "Loan amount: $" + balance.toFixed(2) + "<br />" +
"Interest rate: " + (interestRate*100).toFixed(2) + "%<br />" +
"Number of months: " + terms + "<br />" +
"Monthly payment: $" + payment.toFixed(2) + "<br />" +
"Total paid: $" + (payment * terms).toFixed(2) + "<br /><br />";

result += "<table border='1'><tr><th>Month</th><th>Balance</th>" +
"<th>Interest</th><th>Principal</th>";

var interest = 0;
var principal = 0;
for (var i = 1; i <= terms; i++)
{
interest = balance * monthlyRate;
principal = payment - interest;
result += "<tr><td>" + i + "</td>" + "<td>" + balance.toFixed(2) +
"</td>" + "<td>" + interest.toFixed(2) + "</td>" + "<td>" +
principal.toFixed(2) + "</td></tr>";
balance = balance - principal;
}
result += "</table>";
return result;
}

rangana · Posted: Tue Jun 24, 2008 3:39 am Post subject: Re: Forms - Beginner question

You are referencing to an id and not an element of a form, so this part is erroneous: