I’ve developed a few real estate websites in the past and one common request is a loan calculator. I’ve put together an example of a simple loan calculator using Impromptu with states. It also makes use of form fields, submit functions and demonstrates how to validate and show errors, so its a little more detailed example of using a form. I’ve designed it where you can call a function with optional parameters to default the amount, years, or interest rate. Take a peak:

To use this puppy first copy this javascript function into your code:


function openLoanCalculatorPrompt(o){
	o = jQuery.extend({},{ amount:100000, years:15, rate:5 },o);

	var formstr = '<p>Calculate monthly payments:</p>'+
		'<div class="field"><label for="intamount">Amount</label><input type="text" name="intamount" id="intamount" value="'+ o.amount +'" /></div>'+
		'<div class="field"><label for="intyears">Years</label><input type="text" name="intyears" id="intyears" value="'+ o.years +'" /></div>'+
		'<div class="field"><label for="intrate">Rate</label><input type="text" name="intrate" id="intrate" value="'+ o.rate +'" /></div>';

	jqistates = {
		state0: {
			html: formstr,
			focus: 1,
			buttons: { Cancel: false, Calculate: true },
			submit: function(v, m, f){
				var e = "";
				m.find('.errorBlock').hide('fast',function(){ jQuery(this).remove(); });

				if (v) {

					if(isNaN(f.intamount))
						e += "Please enter a numeric amount<br />";

					if(isNaN(f.intyears))
						e += "Please enter a numeric number of years<br />";

					if(isNaN(f.intrate))
						e += "Please enter a numeric interest rate<br />";

					if (e == "") {

						var interest = f.intrate/100;
						var years = f.intyears;
						var amount = f.intamount;

						var n = years * 12;
						var i = interest / 12;
						var i_to_n = Math.pow((i + 1), n);

						var p = amount * ((i * i_to_n) / (i_to_n - 1));
						var m = Math.round(p * 100) / 100;

						jQuery('#intmonthlypayment').text(m);
						jQuery.ImpromptuGoToState('state1');

					}
					else{
						jQuery('<div class="errorBlock" style="display: none;">'+ e +'</div>').prependTo(m).show('slow');
					}
					return false;
				}
				else return true;
			}
		},
		state1: {
			html: 'Monthly Payment: $<span id="intmonthlypayment"></span>',
			focus: 1,
			buttons: { Back: false, Done: true },
			submit: function(v,m,f){
				if(v)
					return true;

				jQuery.ImpromptuGoToState('state0');
				return false;
			}
		}
	};

	$.prompt(jqistates);
}

First in this function you’ll see I check for parameters, and default them if they’re not present. Then we build our form, just three fields. Then we build our states. Once valid numbers are submitted we calculate the monthly payment, populate the result in “state1″, then go to “state1″. Since the parameters are all optional you can easily customize values on the fly. You know how this works…


// use all options
openLoanCalculatorPrompt({ amount:150000, years:30, rate:5.25 });

// just one option
openLoanCalculatorPrompt({ amount:150000 });

// use defaults
openLoanCalculatorPrompt();

Thats all there is to it. Use it how you like, although use at your own risk, I am not a finance guru by any means! You can find the full working loan calculator here.

Be Sociable, Share!

Related posts:

  1. Updated jQuery Impromptu Loan Calculator
  2. Finance.js – Financing, Loan, Interest Javascript Library
  3. jQuery Impromptu 2.0 – States
  4. New jQuery Impromptu Theme
  5. New jQuery Impromptu Show Effect