Emi Calculator jquery

by sunil puvvada

HTML

<form action="#" method="post" id="test">
	<p><strong>Please insert decimals using the dot notation, e.g. <code>5.9</code></strong></p>
	<div>
		<label for="balance">Loan balance (&euro;)</label>
		<input name="balance" id="balance" type="text" />
	</div>
	<div>
		<label for="rate">Interest rate (%)</label>
		<input name="rate" id="rate" type="text" />
	</div>
	<div>
		<label for="term">Loan term (years)</label>
		<input name="term" id="term" type="text" />
	</div>
	<div>
		<label for="period">Period</label>
		<select name="period" id="period">
			<option>Select</option>
			<option value="12">Monthly</option>
			<option value="6">Bimonthly</option>
		</select>
	</div>
	<p><input type="submit" id="submit" name="submit" value="Calculate" /></p>	
    
</form>

CSS

label, div input, div select {
	display: block;
	margin: 0.5em 0;
}

label {
	font-weight: bold;
}

form p {
	margin: 0.5em 0;
}

JavaScript

(function($) {
	$.fn.calculateMortgage = function(options) {
		var defaults = {
			currency: '&euro;',
			params: {}
		};
		options = $.extend(defaults, options);
		
		var calculate = function(params) {
			params = $.extend({
				balance: 0,
				rate: 0,
				term: 0,
				period: 0
			}, params);
			
			var N = params.term * params.period;
			var I = (params.rate / 100) / params.period;
			var v = Math.pow((1 + I), N);
			var t = (I * v) / (v - 1);
			var result = params.balance * t;
			
			return result;
		
		};
		
		return this.each(function() {
			var $element = $(this);
			var $result = calculate(options.params);
			var output = '<p>' + options.currency + ' ' + $result.toFixed(2) + '</p>';
			$(output).appendTo($element);
		
		
		});
	
	};


})(jQuery);

$(function() {
	$('#test').on('submit', function(e) {
		e.preventDefault();
		var $params = {
			balance: $('#balance').val(),
			rate: $('#rate').val(),
			term: $('#term').val(),
			period: $('option:selected', '#period').val()
		};
		
		$(this).calculateMortgage({
			params: $params
		})
	
	});	


});