Hi,
I want to build a mortgage calculator but when I click the calculate button nothing happens. I hope you can see what I've done wrong.
I've had to use inline styles because the CSS window in the Template Design page in Goolge Blogspot only works on the main page.
My code:
I'm using jQuery
<script src="http://code.jquery.com/
jquery-1.4.2.min.js" type="text/javascript">
</script></script>
This is my background to the calculator
<div id="Calc" style="background-color: khaki; border-bottom: black 2px solid; border-left: khaki 4px solid; border-right: khaki 4px solid; border-top: black 2px solid; height: 260px; width: 250px;">
This is my main heading on the calculator itself
<h3 style="text-align: center;">
Mortgage Calculator</style> </h3>
This is the calculator showing the lables and text fields
<form>
<span style="float: left;">Loan</span><span style="float: right;"><input class="mortgageField" id="cLoan" name="cLoan" /></span>
<span style="float: left;">Rate</span><span style="float: right;"><input class="mortgageField" id="cRate" name="cRate" /></span>
<span style="float: left;">Term</span><span style="float: right;"><input class="mortgageField" id="cTerm" name="cTerm" /></span>
<span style="float: right;"><button class="Button" id="mortgageCalc" onclick="return false" type="submit">Calculate</
button></span>
<span style="float: right;"><input class="mortgageAnswer" id="cPayment" name="cPayment" /> </span></form>
This is the function with the formula
<script type="text/javascript">
$("#mortgageCalc").click(function(){
var L,P,n,c,;
L = parseInt($("#cLoan").val());
n = parseInt($("#cTerm").val()) * 12;
c = parseFloat($("#cRate").val())/100;
c=c/12;
P=(c*L)/(1-(Math.pow((1+c),-n)));
This is to verify the result is a number
if(!isNaN(P))
{
$("#cPayment").val(P.toFixed(
2));
}
else
{
$("#cPayment").val('There was an error');
}
return true;
});
</script>
<h3>
</h3>
</div>
I hope you can help because I'm lost on this. Thanks.