Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Monthly Payment Loan Calculator Form Programming Tutorial

Learn to program a Monthly Payment Loan Calculator with simple interest calculations included. The JavaScript logic can be used with or without value gathering form controls. In this tutorial we are adding the HTML form elements that will gather values needed by the script. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> // This script is explained line by line in depth in the following video: // http://www.developphp.com/view.php?tid=1389 function computeLoan(){ var amount = document.getElementById('amount').value; var interest_rate = document.getElementById('interest_rate').value; var months = document.getElementById('months').value; var interest = (amount * (interest_rate * .01)) / months; var payment = ((amount / months) + interest).toFixed(2); payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); document.getElementById('payment').innerHTML = "Monthly Payment = $"+payment; } </script> </head> <body> <p>Loan Amount: $<input id="amount" type="number" min="1" max="1000000" onchange="computeLoan()"></p> <p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()">%</p> <p>Months: <input id="months" type="number" min="1" max="72" value="1" step="1" onchange="computeLoan()"></p> <h2 id="payment"></h2> </body> </html>
thumb

JavaScript Videos

Form Programming

Contact Form Web Application Tutorial Ajax HTML5 PHPCheckbox Toggle Tutorial Select Deselect All ElementsIn Place Editing CMS Development HTML JavaScript TutorialCustom Progress Bar Meter Development For File Upload FormsMultiphase Form Programming Tutorial Multi StepRestrict Text Input Characters HTML JavaScript TutorialMonthly Payment Loan Calculator Form Programming TutorialDynamic Select Year List Script HTML Form ElementsTip Calculator Application Form Programming Tutorialtextarea Form Field Character Counting and LimitingBuilding a WYSIWYG Rich Text Editor Textarea Replacement Part 1Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2Div contenteditable Click Select All Text execCommand selectAllToggle Password Security Form Input Characters TutorialTrap User Check for Unsaved Written Work TutorialReal Time Text Input or Textarea Filter TutorialForm Select Change Dynamic List Option Elements Tutorial