Simple Dynamic Loan Calculation Plugin For jQuery

A jQuery plugin helps you create a basic loan calculator with custom credit rates that auto update the result based on user input.

See also:

• jQuery Plugin For Flexible Loan and Interest Calculation - Accrue.js

How to use it:

1. Place the jQuery loan-calculator.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.loan-calculator.js"></script>

2. Create range sliders and output area for the loan calculator.

<label for="loan-amount">Cantidad: </label> 
<span id="selected-amount"></span>
<input type="range" id="loan-amount" min="50000" max="250000" step="1000" value="50000">

<label for="loan-duration">Periodo <small>(meses)</small>:</label> 
<span id="selected-duration"></span>
<input type="range" id="loan-duration" min="12" max="36" step="1" value="12">

<label for="credit-score">Calificacion crediticia:</label> <span id="selected-score"></span>
<select id="credit-score">
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
</select>

<h4 id="loan-total"></h4>
<h4 id="monthly-rate"></h4>

3. Active the loan calculation.

$('#loan-amount, #loan-duration').mousemove(function () {
  updateCalculator();
});

$('#loan-amount, #loan-duration, #credit-score').change(function() {
  updateCalculator();
});

function updateCalculator() {
  $('#widget').loanCalculator({
    loanAmount   : $('#loan-amount').val(),
    loanDuration : $('#loan-duration').val(),
    creditScore  : $('#credit-score').val()
  });
}

4. Override the default credit rate in the JavaScript.

var CREDIT_RATES = {
    'A': 5.32,  'A1': 5.32,  'A2': 6.24,  'A3': 6.89,  'A4': 7.26,  'A5': 7.89,
    'B': 8.18,  'B1': 8.18,  'B2': 9.17,  'B3': 9.99,  'B4': 10.99, 'B5': 11.53,
    'C': 12.29, 'C1': 12.29, 'C2': 12.69, 'C3': 13.33, 'C4': 13.99, 'C5': 14.65,
    'D': 15.61, 'D1': 15.61, 'D2': 16.55, 'D3': 16.99, 'D4': 17.57, 'D5': 17.86,
    'E': 18.25, 'E1': 18.25, 'E2': 18.55, 'E3': 19.19, 'E4': 19.99, 'E5': 20.99,
    'F': 21.99, 'F1': 21.99, 'F2': 22.99, 'F3': 23.99, 'F4': 24.99, 'F5': 25.78,
    'G': 26.77, 'G1': 26.77, 'G2': 27.31, 'G3': 27.88, 'G4': 28.49, 'G5': 28.99
};

5. Default plugin options.

// default values for a loan
loanAmount       : 50000,
loanDuration     : 12,
creditScore      : 'A',
valueAddedTax    : 0,
serviceFee       : 0,
paymentFrequency : 'monthly',

// inputs
loanAmountSelector       : '#loan-amount',
loanDurationSelector     : '#loan-duration',
creditScoreSelector      : '#credit-score',
paymentFrequencySelector : '#payment-frequency',

// display selected values
selectedAmount           : '#selected-amount',
selectedDuration         : '#selected-duration',
selectedScore            : '#selected-score',
selectedPaymentFrequency : '#selected-payment-frequency',

// display the results
loanTotalSelector       : '#loan-total',
paymentSelector         : '#payment',
interestTotalSelector   : '#interest-total',
serviceFeeSelector      : '#service-fee',
taxTotalSelector        : '#tax-total',
totalAnnualCostSelector : '#total-annual-cost',
loanGrandTotalSelector  : '#grand-total'

Change logs:

2017-08-22

• Make range sliders touch friendly

2017-05-03

• v3.1.2

2017-03-18

• v3.1.1: Format properly percentages in hundreds

2017-03-14

• v3.1.0: Reduce the credit rates default options

2017-03-10

• v2.0.2

2016-04-16

• Add payment frequency functionality

2016-04-12

• Add interest total to the results

2016-03-24

• Add total annual cost to the calculator

2016-03-23

• Add the amortization schedule method

2016-03-20

• JS update

2016-02-17

• Reverted back to old loan rates for now

2015-12-24

• corrected the way loan interests are calculated

---

This awesome jQuery plugin is developed by scrubmx. For more Advanced Usages, please check the demo page or visit the official website.