Turn a form into a calculating-widget

[amandaNHT]

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 monthly-payment to find the maximum home-price for that size payment OR a home-price 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 dollar-amount OR they can put in a dollar-amount and it will tell them what percent that would be.

They can also choose between a 15 and 30 year fixed-rate mortgage and supply the interest rate.

So here is the math, as I understand it, to find the payment from the "borrwed amount":

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:

<form enctype="multipart/form-data">
	<label for="price">Loan Amount:<br/>$<input type="text" name="price" /></label><br/>
	<label for="down">Down Payment:<br/><input type="text" name="down-1" />&#37;<br/>$<input type="text" name="down-2" /></label><br/>
	<label for="type">Loan Type:<br/><select name="type">
        <option value="30">30-Year Fixed</option>
        <option value="15">15-Year 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!

[xelawho]

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:

<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...

[amandaNHT]

Ok, so by combining your help with a "script" I found on the internet, I now have this for my JS 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 + "&#37;\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:

<form enctype="multipart/form-data" 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="down-1" size="4" />percent or<br/>$<input type="text" name="down-2" /></label><br/><br/>
	Loan Type:<br/>
	    <input type="radio" name="loanTerm" value="30" id="loanTerm_0">30-year Fixed</label><br/> 
        <label><input type="radio" name="loanTerm" value="15" id="loanTerm_1">15-year 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 Loan-Amount 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 dollar-amount of the down-payment, then display the other one in right box (display dollar-amount if they supplied a percentage, and vice-versa) 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.

[xelawho]

this...

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

I also want to add a feature that can check if they entered a Loan-Amount 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 dollar-amount of the down-payment, then display the other one in right box (display dollar-amount if they supplied a percentage, and vice-versa) 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 ?

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:

<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:

<input type="button" name="calculate" value="Calculate" onclick="getPayments(this.form)"/>

[007Julien]

See this page translate and remove it.
The use (fill a line and click on the legend of the other) is to remove !