
Turn a form into a calculatingwidget
Ok, so I've got this form, and I want people to be able to input the info and get a result... It's kind of a mortgage calculator.
Problem is... Javascript hates me.
I want them to be able to input a monthlypayment to find the maximum homeprice for that size payment OR a homeprice to find the payment.
I also want them to be able to put in a percentage for the down payment and it will show them the dollaramount OR they can put in a dollaramount and it will tell them what percent that would be.
They can also choose between a 15 and 30 year fixedrate mortgage and supply the interest rate.
So here is the math, as I understand it, to find the payment from the "borrwed amount":
Code:
totalPayments = yearsOfLoan / 12;
monthlyInterest = annualInterest / 12;
monthlyPayment = totalBorrowed ( monthlyInterest (1 + monthlyInterest) ^ totalPayments ) / ((1 + monthlyInterest) ^ totalPayments  1)
// where ^ indicates an exponent, so a loop that multiplies by itself "totalPayments" times
... and here is the basic form that I have to stuff this math into:
HTML Code:
<form enctype="multipart/formdata">
<label for="price">Loan Amount:<br/>$<input type="text" name="price" /></label><br/>
<label for="down">Down Payment:<br/><input type="text" name="down1" />%<br/>$<input type="text" name="down2" /></label><br/>
<label for="type">Loan Type:<br/><select name="type">
<option value="30">30Year Fixed</option>
<option value="15">15Year Fixed</option>
</select></label><br/>
<label for="interest">Interest Rate:<br/><input type="text" name="interest" />%</label><br/>
<label for="payment">Monthly Payment:<br/>$<input type="text" name="payment" /></label><br/>
<input type="submit" name="calculate" value="Calculate" />
</form>
Thanks in advance for any help!

it's kind of unclear what your calculations are supposed to be, but the below should at least help you with getting the form values:
Code:
<input type="button" name="calculate" value="Calculate" onclick="getPayments(this.form)"/>
</form>
<script type="text/javascript">
function getPayments(frm){
var totalPayments = frm.type.value / 12;
var monthlyInterest = frm.interest.value / 12;
frm.payment.value = frm.price.value*( monthlyInterest* ((1 + monthlyInterest) * totalPayments ) / (1 + monthlyInterest) * totalPayments  1)
}
</script>
</body>
fwiw, there are a ton of mortgage calculator script examples on the web...

Ok, so by combining your help with a "script" I found on the internet, I now have this for my JS Code:
Code:
<script language="JavaScript" type="text/javascript">
<! // hide the mortgage calculator formula from non JavaScript browsers
function find_payment(PRIN, INTR, TERM) {
//var PAY = (PR * IN) / (1  Math.pow(1 + IN, PE))
var PAY = PRIN[INTR * Math.pow((1 + INTR),TERM)]/[Math.pow((1 + INTR),TERM)  1]
return PAY
}
function pullLoanData(){ // This doesn't work either, by the way...
var principal = document.getElementById('price').value
var interest = document.getElementById('interest').value
var term = document.getElementByName('loanTerm').value
var monthly_payment = find_payment(principal, interest / 12, term * 12)
alert("Amount of the loan:\t$" + principal + "\n" +
"Annual interest rate:\t" + interest * 100 + "%\n" +
"Term of the mortgage loan:\t" + term + " years\n\n" +
"Monthly payment:\t$" + monthly_payment)
}
//>
</script>
It handles the math  more or less  at this point, But it doesn't quite do what I need it to yet...
Here is my HTML, btw:
HTML Code:
<form enctype="multipart/formdata" style="margin:0 auto;">
<label for="price">Loan Amount:<br/>$<input type="text" name="price" /></label><br/><br/>
<label for="down">Down Payment:<br/><input type="text" name="down1" size="4" />percent or<br/>$<input type="text" name="down2" /></label><br/><br/>
Loan Type:<br/>
<input type="radio" name="loanTerm" value="30" id="loanTerm_0">30year Fixed</label><br/>
<label><input type="radio" name="loanTerm" value="15" id="loanTerm_1">15year Fixed</label><br/><br/>
<label for="interest">Interest Rate:<br/><input type="text" name="interest" size="4" />percent</label><br/><br/>
<label for="payment">Monthly Payment:<br/>$<input type="text" name="payment" /></label><br/><br/>
<input type="submit" name="calculate" value="Calculate Mortgage" onClick="pullLoanData()" />
</form>
What I need it to do, when the form is submitted, is stick the results into the right boxes...
I also want to add a feature that can check if they entered a LoanAmount or a Monthly Payment (if both, then pretend they just put a loan amount) and calculate it backwards if needed...
And I want to add a feature that can check if they entered the percentage or dollaramount of the downpayment, then display the other one in right box (display dollaramount if they supplied a percentage, and viceversa) and if both it should default to percentage...
IN FACT, if it can automatically empty or disable the "other one" when they fill in one of the two options, that'd be even more awesome. (like an "onfocus" sort of thing?)
I swear JavaScript will be the death of me.

this...
Code:
var principal = document.getElementById('price').value
and everything like it will never work because (from what I can see) you have no element with an ID "price". You have an element with a NAME "price" but they are two different things.
javascript will be the death of you if you don't pay attention to details, and if you refuse to debug your own code.
Have a look at my post, the way the button onclick passes the form object to the getPayments function, making it easier for that function to reference the input values
Originally Posted by amandaNHT
I also want to add a feature that can check if they entered a LoanAmount or a Monthly Payment (if both, then pretend they just put a loan amount) and calculate it backwards if needed...
And I want to add a feature that can check if they entered the percentage or dollaramount of the downpayment, then display the other one in right box (display dollaramount if they supplied a percentage, and viceversa) and if both it should default to percentage...
why not use a select box, or radio buttons for both of these things, making the coding simpler and letting the user know what's going on ?
Originally Posted by amandaNHT
IN FACT, if it can automatically empty or disable the "other one" when they fill in one of the two options, that'd be even more awesome. (like an "onfocus" sort of thing?)
simple enough. Why don't you get your design (and html) sorted out  that makes the javascript much easier.
one other thing  a submit button:
Code:
<input type="submit" name="calculate" value="Calculate Mortgage" onClick="pullLoanData()" />
is to submit a form, and will generally wipe the form fields contents when it is clicked. It sounds to me more like you are looking for an ordinary button:
Code:
<input type="button" name="calculate" value="Calculate" onclick="getPayments(this.form)"/>

See this page translate and remove it.
The use (fill a line and click on the legend of the other) is to remove !
Last edited by 007Julien; 09082012 at 06:58 AM.
Reason: complements
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
 You may not post new threads
 You may not post replies
 You may not post attachments
 You may not edit your posts

Forum Rules

