jpederson

$( selector ).accrue({
  mode: "basic",
  operation: "keyup",
  default_values: {
    amount: "$7,500",
    rate: "7%",
    rate_compare: "1.49%",
    term: "36m",
  },
  field_titles: {

jpederson

$(".calculator-amortization").accrue({
  mode: "amortization"
});

jpederson

$(".calculator-compare").accrue({
  mode: "compare"
});

jpederson

$(".calculator-loan").accrue();

jpederson

{
  num_payments:                 36,
  original_amount:              "7500",
  payment_amount:               231.5782264902889,
  payment_amount_formatted:     "231.58",
  total_interest:               836.8161536504012,
  total_interest_formatted:     "836.82",
  total_payments:               8336.816153650401,
  total_payments_formatted:     "8336.82"
}

jpederson

var loan_info = $.loanInfo({
  amount: "$7,500",
  rate: "7%",
  term: "36m"
});
// log the calculation data for test purposes
console.log( loan_info );

jpederson

<input type="text" class="term" value="36m">
<select class="term">
  <option value="36m">36 months</option>
  <option value="4y">4 years</option>
</select>
<input type="text" class="accrue-term" value="36m">
<input type="text" name="term" value="36m">

jpederson

<div class="calculator"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.accrue.min.js"></script>
<script>
$(document).ready(function(){
	$(".calculator").accrue();
});
</script>

jpederson

<input type="text" class="rate_compare" value="3%">
<select class="rate_compare">
  <option value="3">3%</option>
  <option value="4">4%</option>
</select>
<input type="text" class="accrue-rate_compare" value="3%">
<!-- OR, you may want to hide the rate you're comparing their existing rate to -->
<input type="hidden" name="rate_compare" value="3%">

jpederson

<input type="text" class="rate" value="7%">
<input type="text" class="accrue-rate" value="7%">
<select class="rate"><option value="7">7%</option><option value="8">8%</option></select>