How to make a form to calculate payments with Html and Java Script

HTML/JavaScript form to calculate payments using APR



How much would you like to pay?:

Negotiated price:*
Sales tax:*
 %
Term:
Interest Rate:*
 %
Down payment:
 

Your estimated monthly payment is:

0

The form you see above is a form that calculates monthly payments, i.e car loan payments.
It could be also used as a mortage calculator if you make some changes to the formula.
Below you will find the HTML and Java Script code used to build the form.

Html source code:

<form>
<td width=”94″>Negotiated price:*</td>
<td width=”165″><input type= “text” name=”nprice” /></td>
</tr>
<tr>
<td>Sales tax:*</td>
<td><input type=”text” name=”tax”/></td>
<td width=”53″>%</td>
</tr>
<tr>
<td height=”31″>Term:</td>
<td><select name=”term”>
<option value=”36″>36 months</option>
<option value=”48″>48 months</option>
<option value=”60″>60 months</option>
</select> </td>
</tr>
<tr>
<td>Interest Rate:*</td>
<td><label>
<input type=”irate” name=”rate”/>
</label> </td>
<td>%</td>
</tr>
<tr>
<td>Down payment:</td>
<td><label>
<input type=”downpayment” name=”payment” />
</label> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name=”Input” type=”button” value=”Calculate payments” onclick=”calcpayments()”/></td>
<td><input name=”reset2″ type=”reset” value=”Clear” /></td>
</tr>
</table>
<br />
<b>Your estimated monthly payment is:</b>
<div id=”monthlypayment”></div>
</form>

Java Script source code for the calculation:

<script>function calcpayments()

{

//The five variables we are going to use in the formula

var nprice=document.forms[0].nprice.value*1;
var salestax=document.forms[0].tax.value*1;
var interest=document.forms[0].rate.value*1;
var dpayment=document.forms[0].payment.value*1;

var t;

//We used a loop to select the term for the payments

for (i=0; i<document.forms[0].term.options.length; i++)

{

if (document.forms[0].term.options[i].selected)
t = document.forms[0].term.options[i].value*1;
}

//This is the formula that does the math

var result=(nprice*(salestax/100 +1)-dpayment)*((interest/100)/12) / (1-Math.pow((1+(interest/100)/12),(-t)));

result=Math.round(result*100) /100;

//The line below shows the result in the box

document.getElementById(“monthlypayment”).innerHTML=result;

}

</script>

You can try changing the term into years instead of months to make it work
for a home mortgage payment calculation.

CLICK HERE TO DOWNLOAD THE CODE

3 Responses

  1. level

    Good day! This is my 1st comment here so I just
    wanteԀ to give a quick shout out and telⅼ you I genuinely enjoy reading through your articles.
    Cɑn you recommend any other blogs/websites/forums that cover the same topics?

    Thanks for youг time!

  2. Hi, thanks for your codes but the calculate payment button not working for me. Its not showing the total amount. Can you please solve this issue? Thanks in advance.

    • Flavio M Galizia

      Hello, thanks for your comment. It seems the code gets corrupted when copying it from the page.
      I included a download link at the bottom.

Leave a comment