Forms - Beginner question

Discussion in 'JavaScript' started by JamesDE, Jun 22, 2008.

  1. #1
    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;
    }
     
    JamesDE, Jun 22, 2008 IP