jpederson

$(function() {
 
  // scroll handler
  var scrollToAnchor = function( id ) {
 
    // grab the element to scroll to based on the name
    var elem = $("a[name='"+ id +"']");
 
    // if that didn't work, look for an element with our ID
    if ( typeof( elem.offset() ) === "undefined" ) {

jpederson

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

jpederson

$( selector ).accrue({ 
  callback: function( elem, data ){
    if ( data===0 ) {
      // ERROR FUNCTIONALITY HERE
    } else {
      // SUCCESS FUNCTIONALITY HERE
	
      // find elements inside the calculator div, and do things with them.
      elem.find( ".results:hidden" ).slideDown( 300 );
		

jpederson

<div class="calculator">
	<div class="form">
		<!--  your fields here.  -->
	</div>
</div>

jpederson

<input type="text" class="amount" value="$7,500">
<input type="text" class="accrue-amount" value="$7,500">
<input type="text" name="amount" value="$7,500">
<input type="text" name="loan-amount" value="$7,500">

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>

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

<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="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

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