www.webdeveloper.com
Results 1 to 5 of 5

Thread: Turn a form into a calculating-widget

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    Exclamation Turn a form into a calculating-widget

    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":
    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/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!

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    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...

  3. #3
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    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 + "&#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:
    HTML Code:
    <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.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    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

    Quote Originally Posted by amandaNHT View Post
    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 ?

    Quote Originally Posted by amandaNHT View Post
    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)"/>

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    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; 09-08-2012 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
  •  
HTML5 Development Center



Recent Articles