Question

This is my first week teaching myself javascript and i have run into a problem.

I am trying to create a simple mortgage ‘loan to value’ calculator. My calculator works fine but I am trying to set up a minimum value validation for one of my two form fields.

Here is a link to the page

Link

My code is below

function calculate (form) {
    var propVal = form.propertyValue.value; var loanAmt =
    form.mortgageAmount.value; var type = form.mortgageType.value;

    var ltv = loanAmt / propVal * 100 ;

    var roundedLtv = Math.floor(ltv);

    if ( type === "First Time Buyer" && roundedLtv <= 91 )  {   
        document.getElementById("result").innerHTML= ("Your loan to value is: <b>" + (roundedLtv) + "%</b> <br /> We can help place your mortgage");
    }
    else if ( type === "Moving Home" && roundedLtv <= 91 )  {   
        document.getElementById("result").innerHTML= ("Your loan to value is: <b>" + (roundedLtv) + "%</b> <br /> We can help place your mortgage");
    }
    else if ( type === "Remortgage" && roundedLtv <= 86 )  {    
        document.getElementById("result").innerHTML= ("Your loan to value is: <b>" + (roundedLtv) + "%</b> <br /> We can help place your mortgage");
    }
    else if ( type === "Buy To Let Purchase" && roundedLtv <= 81 )  {   
        document.getElementById("result").innerHTML= ("Your loan to value is: <b>" + (roundedLtv) + "%</b> <br /> We can help place your mortgage");
    }
    else if ( type === "Buy To Let Remortgage" && roundedLtv <= 76 )  {     
        document.getElementById("result").innerHTML= ("Your loan to value is: <b>" + (roundedLtv) + "%</b> <br /> We can help place your mortgage");   
    }
    else 
    {       
        document.getElementById("result").innerHTML= ("Your loan to value is: <b>" + (roundedLtv) + "%</b> <br /> Unfortunatly we cannot help you place a mortgage");    
    }
}

All works ok until this point, where i am trying to alert the user that the loan amount needs to be larger than 45000. Below in the HTML you will see im am trying to use the onBlur function

function loancheck (propVal,loanAmt,form) {      
    if (loanAmt >= 45000) {
        document.getElementById("val1").innerHTML= ("Thank You"); 
    }
    else   
    {       
         document.getElementById("val1").innerHTML= ("Higher");   
    }
} 

This is the html to go with it

<form name="myform" ACTION="" METHOD="GET"> Mortgage Type 
    <select name="mortgageType"> 
        <option>First Time Buyer</option> 
        <option>Moving Home</option> 
        <option>Remortgage</option> 
        <option>Buy To Let Purchase</option> 
        <option>Buy To Let Remortgage</option> 
     </select> 

     <br /> 
     Value <input name="propertyValue" type="text" value=""/><br />

     Mortgage Amount <input name="mortgageAmount" type="text" value="" onBlur="loancheck(this.value)" />

     <p id="val1"></p>

     <INPUT TYPE="button" NAME="button" Value="Click" onClick="calculate(this.form)">
</form> 

<br /><br /> 
<p id="result"> </p>

Im sure I’m doing something fundamentally wrong but if someone could point it out to me i would be most thankful.

Answer 1

When loancheck is called, the variable loanAmt is undefined, because not enough parameters were passed to the function. Consider cleaning up the function definition in the following way:

function loancheck (loanAmt) { // remove unused parameters
    var userAlert = document.getElementById("val1") // don't repeat yourself
    if (loanAmt >= 45000) { 
        userAlert.innerHTML= "Thank You"; // remove extraneous parens
    } else { 
        userAlert.innerHTML= "Higher";
    }
}