Calculator script?

JavaScript
1

Hi guys

I’m looking for a calculator script to go within my ASP page that will allow my users to work out how much they can afford.

I have searched the web for around 2 days straight and can’t find any script examples that do what I need and that I can work from. The closest I have come to a form with everything I need is here:

http://www.tesol.net/scripts/AffordaBilly/affordabilly.cgi

Unlike any calculator script examples I have seen so for, this one allows the user to add in a monthly payment, interest rate, loan length and payment frequency. Does anyone know how I can create this calculator in classic ASP/javascript?

Any help would be fully appreciated

Best regards

Rod from the UK

2

The following script will work for you but you will need to give each of the input tags in your HTML the correct id and add on the output area to your table. To keep it simple I have kept the payments monthly.


<script type="text/javascript">
 function calc()
  { if(paymentObj.value.length==0 || interestObj.value.length==0 ){return; }
    var mPayments=yearsObj.value*12;
    var iRate=interestObj.value/1200;
    var elem2=(Math.pow((1+iRate),mPayments))-1;
    var maxAmount=paymentObj.value/(iRate+(iRate/elem2));
    outputObj.innerHTML="$"+Math.round(maxAmount);
  }
// --------
var paymentObj,interestObj,yearsObj,howOftenObj,outputObj;   // global
function init()
  { paymentObj=document.getElementById("payment");
    interestObj=document.getElementById("interest");
    yearsObj=document.getElementById("years");
    howOftenObj=document.getElementById("howOften");
    outputObj=document.getElementById("output");
  }
// --------
 function clearIt(){ outputObj.innerHTML="-"; return true; }
 window.onload=init;
</script>
3

Hi Allan

Thank you so much for your response - it’s really is appreciated.

Your formula seems spot on for what I need.

However, I have little or no knowledge about coding in javascript. I was, probably naively, hoping that there was a script out there that I could adopt but I don’t think it’s going to be as simple as that.

So far I have this:

<script type="text/javascript">
 function calc() 
  { if(paymentObj.value.length==0 || interestObj.value.length==0 ){return; }
    var mPayments=yearsObj.value*12;
    var iRate=interestObj.value/1200;
    var elem2=(Math.pow((1+iRate),mPayments))-1;
    var maxAmount=paymentObj.value/(iRate+(iRate/elem2));
    outputObj.innerHTML="$"+Math.round(maxAmount);
  }
// --------
var paymentObj,interestObj,yearsObj,howOftenObj,outputObj;   // global
function init()
  { paymentObj=document.getElementById("payment");
    interestObj=document.getElementById("interest");
    yearsObj=document.getElementById("years");
    howOftenObj=document.getElementById("howOften");
    outputObj=document.getElementById("output");
  }
// --------
 function clearIt(){ outputObj.innerHTML="-"; return true; }
 window.onload=init;  
</script>
<form method="" action="">
  <p>Deposit:<input type="text" name="payment" size="20" id="payment"></p>
  <p>Interest rate:<input type="text" name="interest" size="20" id="interest"></p>
  <p>Loan length:<input type="text" name="years" size="20" id="years"></p>
  <p>How many payments<input type="text" name="howOften" size="20" id="howOften"></p>
  <p>You car afford: <input type="text" name="output" size="20" id="output"></p>
<p><input type="submit" value="Calculate" name="B1"></p>
</form>

This idea is that when the user hits the “Calculate” button the figure would appear in the Output box.

Is this correct and if so, how do I get this to work? If you could let me know then that would be great.

I look forward to hearing from you

Best regards

Rod from the UK

4

Hi Rod,
I have copied the whole of the script below so that you can try it out.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Loan Calculator</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
table td { font-weight:bold; }
#wrap { position:relative; top:0px; left:0px; width:500px; height:500px; margin-left:100px;  }
.bg { background-color:#EEE; }
</style>
</head>

<body>

<div id="wrap">
  <p><b>Please enter the amount of the monthly (or bi-weekly) payment you can afford,
  an interest rate (e.g. 7.25), and the number of years you expect to extend the
  loan.</b></p>
  <form>
    <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="450">
      <tr>
        <td align="right" width="50%">Payment you can afford: </th>
        </td>
        <td class="bg" width="50%">
        <input id="payment" type="text" name="payment" size="10" value> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Interest Rate: </td>
        </td>
        <td class="bg" width="50%">
        <input id="interest" type="text" name="interest" size="4" value><span><b>&nbsp;
        %</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Loan Length (Term): </td>
        <td class="bg" width="50%"><select id="years" name="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="30">30</option>
        </select><span><b>&nbsp; Years</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment frequency: </td>
        </td>
        <td class="bg" width="50%">Monthly</td>
      </tr>
      <tr>
        <td width="50%"></td>
        <td class="bg" width="50%">
        <input type="button" onclick="calc()" value="Calculate">
        <input type="reset" onclick="return clearIt()" value="Reset"> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Amount you can afford: </td>
        </td>
        <td id="output" class="bg" width="50%">-</td>
      </tr>
    </table>
  </form>
</div>
<!-- end wrap -->
<script type="text/javascript">
 function calc()
  { if(paymentObj.value.length==0 || interestObj.value.length==0 ){return; }
    var mPayments=yearsObj.value*12;
    var iRate=interestObj.value/1200;
    var elem2=(Math.pow((1+iRate),mPayments))-1;
    var maxAmount=paymentObj.value/(iRate+(iRate/elem2));
    outputObj.innerHTML="$"+Math.round(maxAmount);
  }
// --------
var paymentObj,interestObj,yearsObj,howOftenObj,outputObj;   // global
function init()
  { paymentObj=document.getElementById("payment");
    interestObj=document.getElementById("interest");
    yearsObj=document.getElementById("years");
    howOftenObj=document.getElementById("howOften");
    outputObj=document.getElementById("output");
  }
// --------
 function clearIt(){ outputObj.innerHTML="-"; return true; }
 window.onload=init;
</script>

</body>

</html>
5

I have some JavaScript/PHP loan calculators at http://www.felgall.com/jstip100.htm - there are three calculators depending on which four of the five pieces of information are known and which is to be calculated. There are calculators for calcuating the repayment, principal or period from the other four pieces of information.

If one or more of those provides the JavaScript version of what you want then you would only need to rewrite the PHP part into the ASP equivalent in order to be able to use them.

6

Hi Allan

Thank you so much!

Your script works excellently.

I just need it to do one more thing. If you look at my/your code below, you will see that I have added a “deposit” field at the top. The idea is that the user would add a deposit figure and this figure would be added to the “Amount you can afford” figure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Loan Calculator</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
table td { font-weight:bold; }
#wrap { position:relative; top:0px; left:0px; width:500px; height:500px; margin-left:100px;  }
.bg { background-color:#EEE; }
</style>
</head>

<body>

<div id="wrap">
  <p><b>Please enter the amount of the monthly (or bi-weekly) payment you can afford,
  an interest rate (e.g. 7.25), and the number of years you expect to extend the
  loan.</b></p>
  <form>
    <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="450">
      <tr>
        <td align="right" width="50%">Deposit
        </td>
        <td class="bg" width="50%">
        <input type="text" name="deposit" size="10"> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment you can afford: </th>
        </td>
        <td class="bg" width="50%">
        <input id="payment" type="text" name="payment" size="10" value> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Interest Rate: </td>
        </td>
        <td class="bg" width="50%">
        <input id="interest" type="text" name="interest" size="4" value><span><b>&nbsp;
        %</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Loan Length (Term): </td>
        <td class="bg" width="50%"><select id="years" name="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="30">30</option>
        </select><span><b>&nbsp; Years</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment frequency: </td>
        </td>
        <td class="bg" width="50%">Monthly</td>
      </tr>
      <tr>
        <td width="50%"></td>
        <td class="bg" width="50%">
        <input type="button" onclick="calc()" value="Calculate">
        <input type="reset" onclick="return clearIt()" value="Reset"> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Amount you can afford: </td>
        </td>
        <td id="output" class="bg" width="50%">-</td>
      </tr>
    </table>
  </form>
</div>
<!-- end wrap -->
<script type="text/javascript">
 function calc()
  { if(paymentObj.value.length==0 || interestObj.value.length==0 ){return; }
    var mPayments=yearsObj.value*12;
    var iRate=interestObj.value/1200;
    var elem2=(Math.pow((1+iRate),mPayments))-1;
    var maxAmount=paymentObj.value/(iRate+(iRate/elem2));
    outputObj.innerHTML="$"+Math.round(maxAmount);
  }
// --------
var paymentObj,interestObj,yearsObj,howOftenObj,outputObj;   // global
function init()
  { paymentObj=document.getElementById("payment");
    interestObj=document.getElementById("interest");
    yearsObj=document.getElementById("years");
    howOftenObj=document.getElementById("howOften");
    outputObj=document.getElementById("output");
  }
// --------
 function clearIt(){ outputObj.innerHTML="-"; return true; }
 window.onload=init;
</script>

</body>

</html>

Can this be done? Any help would be fully appreciated

Best regards

Rod from the UK

7

Hi Allan

Further to my last post, I have managed to get the script working as I’d like.

However, I need to add the “Output” figure to an additional <form>. My script now look like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Loan Calculator</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
table td { font-weight:bold; }
#wrap { position:relative; top:0px; left:0px; width:500px; height:500px; margin-left:100px;  }
.bg { background-color:#EEE; }
</style>
</head>

<body>

<div id="wrap">
  <p><b>Please enter the amount of the monthly (or bi-weekly) payment you can afford,
  an interest rate (e.g. 7.25), and the number of years you expect to extend the
  loan.</b></p>
  <form>
    <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="450">
      <tr>
        <td align="right" width="50%">Deposit
        </td>
        <td class="bg" width="50%">
<select name="deposit">
<option value="500">500</option>
<option value="1000">1,000</option>
<option value="2000">2,000</option>
<option value="3000">3,000</option>
<option value="4000">4,000</option>
<option value="5000">5,000</option>
<option value="6000">6,000</option>
<option value="7000">7,000</option>
<option value="8000">8,000</option>
<option value="9000">9,000</option>
<option value="10000">10,000</option>
<option value="11000">11,000</option>
<option value="12000">12,000</option>
<option value="13000">13,000</option>
<option value="14000">14,000</option>
<option value="15000">15,000</option>
<option value="16000">16,000</option>
<option value="17000">17,000</option>
<option value="18000">18,000</option>
<option value="19000">19,000</option>
<option value="20000">20,000</option>
<option value="22500">22,500</option>
<option value="25000">25,000</option>
<option value="27500">27,500</option>
<option value="30000">30,000</option>
<option value="35000">35,000</option>
<option value="40000">40,000</option>
<option value="45000">45,000</option>
<option value="50000">50,000</option>
<option value="100000">100,000</option>
<option value="250000">250,000</option>
</select>
 </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment you can afford: </th>
        </td>
        <td class="bg" width="50%">

<select id="payment" name="payment">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1,000</option>
<option value="1250">1,250</option>
<option value="1500">1,500</option>
<option value="1750">1,750</option>
<option value="2000">2,000</option>
<option value="2250">2,250</option>
<option value="2500">2,500</option>
<option value="2750">2,750</option>
<option value="3000">3,000</option>
<option value="3250">3,250</option>
<option value="3500">3,500</option>
<option value="3750">3,750</option>
<option value="4000">4,000</option>
</select>
        </td>
      </tr>
      <tr>
        <td align="right" width="50%">Interest Rate: </td>
        </td>
        <td class="bg" width="50%">
        <input id="interest" type="text" name="interest" size="4" value><span><b>&nbsp;
        %</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Loan Length (Term): </td>
        <td class="bg" width="50%"><select id="years" name="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="30">30</option>
        </select><span><b>&nbsp; Years</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment frequency: </td>
        </td>
        <td class="bg" width="50%">Monthly</td>
      </tr>
      <tr>
        <td width="50%"></td>
        <td class="bg" width="50%">
        <input type="button" onclick="calc()" value="Calculate">
        <input type="reset" onclick="return clearIt()" value="Reset"> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Amount you can afford: </td>
        </td>
        <td class="bg" width="50%"><span id="output"></span></td>
      </tr>
    </table>
  </form>
</div>
<!-- end wrap -->
<script type="text/javascript">
 function calc()
  { if(paymentObj.value.length==0 || interestObj.value.length==0 ){return; }
    var mPayments=yearsObj.value*12;
    var iRate=interestObj.value/1200;
    var deposit=depositObj.value*1;
    var elem2=(Math.pow((1+iRate),mPayments))-1;
    var maxAmount=paymentObj.value/(iRate+(iRate/elem2));
    outputObj.innerHTML="$"+Math.round(maxAmount + deposit);
  }
// --------
var paymentObj,interestObj,depositObj,yearsObj,howOftenObj,outputObj;   // global
function init()
  { paymentObj=document.getElementById("payment");
    interestObj=document.getElementById("interest");
    depositObj=document.getElementById("deposit");
    yearsObj=document.getElementById("years");
    howOftenObj=document.getElementById("howOften");
    outputObj=document.getElementById("output");
  }
// --------
 function clearIt(){ outputObj.innerHTML="-"; return true; }
 window.onload=init;
</script>

<table>

<form method="post" action="">
<p><input type="text" name="output" size="20"><input type="submit" value="Submit" name="B1"></p>
</form>

</body>

Basically, I need the “output” value in my calculator to be automatically added to the “output” value in the form at the bottom.

Is this possible? Any help would be fully appreciated.

Best regards

Rod from the UK

8

Hi Rod,
I have made the necessary changes to our script. I have also added a zero deposit to your deposit options.

Hope this helps. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Loan Calculator</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
table td { font-weight:bold; }
#form2 { margin-top:20px; }
#wrap { position:relative; top:0px; left:0px; width:500px; height:500px; margin-left:100px;  }
.bg { background-color:#EEE; }
</style>
</head>

<body>

<div id="wrap">
  <p><b>Please enter the amount of the monthly payment you can afford, a % interest 
  rate (e.g. 7.25), and the number of years you expect to extend the loan.</b></p>
  <form id="form1">
    <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="450">
      <tr>
        <td align="right" width="50%">Deposit </td>
        <td class="bg" width="50%"><select id="deposit" name="deposit">
        <option selected value="0">0</option>
        <option value="500">500</option>
        <option value="1000">1,000</option>
        <option value="2000">2,000</option>
        <option value="3000">3,000</option>
        <option value="4000">4,000</option>
        <option value="5000">5,000</option>
        <option value="6000">6,000</option>
        <option value="7000">7,000</option>
        <option value="8000">8,000</option>
        <option value="9000">9,000</option>
        <option value="10000">10,000</option>
        <option value="11000">11,000</option>
        <option value="12000">12,000</option>
        <option value="13000">13,000</option>
        <option value="14000">14,000</option>
        <option value="15000">15,000</option>
        <option value="16000">16,000</option>
        <option value="17000">17,000</option>
        <option value="18000">18,000</option>
        <option value="19000">19,000</option>
        <option value="20000">20,000</option>
        <option value="22500">22,500</option>
        <option value="25000">25,000</option>
        <option value="27500">27,500</option>
        <option value="30000">30,000</option>
        <option value="35000">35,000</option>
        <option value="40000">40,000</option>
        <option value="45000">45,000</option>
        <option value="50000">50,000</option>
        <option value="100000">100,000</option>
        <option value="250000">250,000</option>
        </select> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment you can afford: </th>
        </td>
        <td class="bg" width="50%"><select id="payment" name="payment">
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="150">150</option>
        <option value="200">200</option>
        <option value="250">250</option>
        <option value="300">300</option>
        <option value="350">350</option>
        <option value="400">400</option>
        <option value="450">450</option>
        <option value="500">500</option>
        <option value="600">600</option>
        <option value="700">700</option>
        <option value="800">800</option>
        <option value="900">900</option>
        <option value="1000">1,000</option>
        <option value="1250">1,250</option>
        <option value="1500">1,500</option>
        <option value="1750">1,750</option>
        <option value="2000">2,000</option>
        <option value="2250">2,250</option>
        <option value="2500">2,500</option>
        <option value="2750">2,750</option>
        <option value="3000">3,000</option>
        <option value="3250">3,250</option>
        <option value="3500">3,500</option>
        <option value="3750">3,750</option>
        <option value="4000">4,000</option>
        </select> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Interest Rate: </td>
        </td>
        <td class="bg" width="50%">
        <input id="interest" type="text" name="interest" size="4" value="10"><span><b>&nbsp; 
        %</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Loan Length (Term): </td>
        <td class="bg" width="50%"><select id="years" name="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="30">30</option>
        </select><span><b>&nbsp; Years</b></span> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Payment frequency: </td>
        </td>
        <td class="bg" width="50%">Monthly</td>
      </tr>
      <tr>
        <td width="50%"></td>
        <td class="bg" width="50%">
        <input type="button" onclick="calc()" value="Calculate">
        <input type="reset" onclick="return clearIt()" value="Reset"> </td>
      </tr>
      <tr>
        <td align="right" width="50%">Loan amount<br>
        you can afford: </td>
        </td>
        <td class="bg" width="50%">$<span id="output"></span></td>
      </tr>
    </table>
  </form>
  <form id="form2" name="form2" method="post" action>
    <p><input type="text" id="loanTotal" name="loanTotal" size="20"><input type="submit" value="Submit" name="B1"></p>
    </table>
  </form>
</div>
<!-- end wrap -->
<script type="text/javascript">
 function calc() 
  { if(paymentObj.value.length==0 || interestObj.value.length==0 ){return; }
    var mPayments=yearsObj.value*12;
    var iRate=interestObj.value/1200;
    var deposit=depositObj.value*1;
    var elem2=(Math.pow((1+iRate),mPayments))-1;
    var maxAmount=paymentObj.value/(iRate+(iRate/elem2));
    loanTotalObj.value = outputObj.innerHTML = ""+Math.round(maxAmount + deposit);
   }
// --------
var paymentObj,interestObj,depositObj,yearsObj,howOftenObj,outputObj;   // global
function init()
  { paymentObj=document.getElementById("payment");
    interestObj=document.getElementById("interest");
    depositObj=document.getElementById("deposit");
    yearsObj=document.getElementById("years");
    howOftenObj=document.getElementById("howOften");
    outputObj=document.getElementById("output");
    loanTotalObj=document.getElementById("loanTotal");
  }
// --------
 function clearIt(){ outputObj.innerHTML="-"; return true; }
 window.onload=init;  
</script>

</body>

</html>
9

Excellent!!

This is perfect!

Thanks so much for all your help on this Allan!

Best regards

Rod from the UK