"Home Loan Calculator"
Bootstrap 3.3.0 Snippet by wadizorg

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home Loan | PropertiesGuru.com</title> <!--<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">--> <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--> <link href="http://pg.gaarsam.com//html/assets/bootstrap/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" > <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>--> <script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery-2.1.4.min.js"></script> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> <script type="text/javascript" src="http://pg.gaarsam.com//html/assets/bootstrap/js/bootstrap.min.js"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>--> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>--> <script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery.validate.min.js"></script> <style> .wrap { max-width: 980px; margin: 10px auto 0; } #steps { margin: 80px 0 0 0 } .commands { overflow: hidden; margin-top: 30px; } .prev {float:left} .next, .submit {float:right} .error { color: #b33; } #progress { position: relative; height: 5px; background-color: #eee; margin-bottom: 20px; } #progress-complete { border: 0; position: absolute; height: 5px; min-width: 10px; background-color: #337ab7; transition: width .2s ease-in-out; } </style> <link rel="stylesheet" href="homeloan.css"> <script src="jquery.formtowizard.js" type="text/javascript"></script> <script> $( function() { var $HomeLoan = $( '#HomeLoan' ); $HomeLoan.validate({errorElement: 'em'}); $HomeLoan.formToWizard({ submitButton: 'SaveAccount', nextBtnClass: 'btn btn-primary next', prevBtnClass: 'btn btn-default prev', buttonTag: 'button', validateBeforeNext: function(form, step) { var stepIsValid = true; var validator = form.validate(); $(':input', step).each( function(index) { var xy = validator.element(this); stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy); }); return stepIsValid; }, progress: function (i, count) { $('#progress-complete').width(''+(i/count*100)+'%'); } }); }); </script> </head> <body style="font-family: 'Montserrat Light', sans-serif;"> <div class="jumbotron text-center"> <h2 style="color:White;">Home Loans Calculators</h2> </div> <div class="container"> <ul id="tabs" class="nav nav-pills nav-stacked col-md-2"> <li class="active"><a href="#tab_a" data-toggle="pill">Loan Eligibility <br><span style="font-size:10px;">How much loan you are eligible for?</span></a></li> <li><a href="#tab_b" data-toggle="pill">EMI <br><span style="font-size:10px;">How much EMI you have to pay?</span></a></li> <li><a href="#tab_c" data-toggle="pill">Apply Loan</a></li> </ul> <div class="tab-content col-md-10"> <div class="tab-pane active" id="tab_a"> <script language="javascript" type="text/javascript"> function eligiable() { var P1 = document.formval2.pr_amt2.value; // pick the form input value.. var rate1 = document.formval2.int_rate2.value; // pick the form input value.. var n1 = document.formval2.period2.value; // pick the form input value.. var r1 = rate1/(12*100); // to calculate rate percentage.. var prate1 = (P1 * r1 * Math.pow((1+r1),n1*12))/(Math.pow((1+r1),n1*12)-1); // to calculate compound interest.. var emi1 = Math.ceil(prate1 * 100) / 100; // to parse emi amount.. var existing = document.formval2.ExLoan.value; var existingLoan=(existing-(existing*60/100)); var income1 = document.formval2.NetIncome.value; if (income1<=14999){ var incomere=((income1)*40/100)-existingLoan; } else if (income1<=29999){ var incomere=((income1)*45/100)-existingLoan; } else if (income1>=30000){ var incomere=((income1)*50/100)-existingLoan; } var incomereq=Math.floor(incomere / emi1 * P1); var prate2 = (incomereq * r1 * Math.pow((1+r1),n1*12))/(Math.pow((1+r1),n1*12)-1); // to calculate compound interest2.. var emi2 = Math.ceil((prate2) * 100) / 100; // to parse emi2 amount.. //Check again Reminder // to assign value in field1 as fixed upto two decimal.. if (incomereq > P1) { document.formval3.field13.value = ("You are Eligible for this loan "); document.formval3.field11.value = (("₹ "+P1+" at EMI "+"₹ "+emi1.toFixed(0))); document.formval3.field12.value = ("You are Eligible for a maximum loan of "+("₹ "+incomereq+" at EMI "+"₹ "+emi2.toFixed(0))); } else { document.formval3.field13.value = ("You are not Eligible for this loan"); document.formval3.field11.value = (""); document.formval3.field12.value = ("You are Eligible for a maximum loan of "+("₹ "+incomereq+" at EMI "+"₹ "+emi2.toFixed(0))); } //to assign value in field2.. } </script> <form name="formval2" class="form-horizontal col-md-8" style="font-size:12px;"> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Home Loan Required:</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" id="input" name="pr_amt2" placeholder="Enter Loan Amount"> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Net income per month</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" id="input" name="NetIncome" placeholder="Excluding LTA and Medical allowances"> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label" >Existing loan commitments</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" id="input" Name="ExLoan" placeholder="(per month)"> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Loan Tenure</label> <div class="col-sm-8"> <input type="number" class="form-control input-sm" id="input" name="period2" placeholder="(in years)"> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Rate of Interest</label> <div class="col-sm-8"> <div class="input-group"> <input type="number" class="form-control input-sm" id="input" disabled value="9.5" name="int_rate2"> <span class="input-group-addon">%</span> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-12"> <button type="button" class="btn btn-primary" onclick="eligiable()">Check Eligibility</button> <button type="reset" class="btn btn-link">Reset All</button> </div> </div> </form> <form name="formval3" class="form-horizontal col-md-4" style="font-size:12px;"> <div class="form-group"> <output class="col-sm-12" name="field13" style="font-size:20px; font-weight:bold; font-family:Roboto;"></output> <output class="col-sm-12" name="field11" style="font-size:15px; font-family:Roboto;"></output> </div> <div class="form-group"> <output class="col-sm-12" name="field12" style="font-size:17px; font-family:Roboto"></output> </div> </form> </div> <div class="tab-pane" id="tab_b"> <script language="javascript" type="text/javascript">         function emi()         {                 var P = document.formval.pr_amt.value; // pick the form input value..                 var rate = document.formval.int_rate.value; // pick the form input value..                 var n = document.formval.period.value; // pick the form input value..                 var r = rate/(12*100); // to calculate rate percentage..                 var prate = (P * r * Math.pow((1+r),n*12))/(Math.pow((1+r),n*12)-1); // to calculate compound interest..                 var emi = Math.ceil(prate * 100) / 100; // to parse emi amount..         // to assign value in field1 as fixed upto two decimal..                 document.formval4.field1.value = ("Monthly EMI: "+"₹ "+emi.toFixed(0));         }         </script> <form name="formval" class="form-horizontal col-md-8" style="font-size:12px;"> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Loan Amount</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="text" class="form-control input-sm" id="idLoanAmount" name="pr_amt" placeholder="Enter Loan Amount"> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Loan Tenure</label> <div class="col-sm-8"> <input type="text" class="form-control input-sm" id="idLoanTenure" placeholder="(in years)" name="period"> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Rate of Interest</label> <div class="col-sm-8"> <div class="input-group"> <input type="text" class="form-control input-sm" id="idROI" name="int_rate"> <span class="input-group-addon">%</span> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-12"> <button type="button" name="calculate" value="Calculate" onclick="emi()" class="btn btn-primary">Calculate EMI</button> <button type="reset" class="btn btn-link">Reset All</button> </div> </div> </form> <form name="formval4" class="form-horizontal col-md-4" style="font-size:12px;"> <div class="form-group"> <output class="col-sm-12" name="field1" style="font-size:20px; font-weight:bold; font-family:Roboto;"></output> </div>         </form> </div> <div class="tab-pane" id="tab_c"> <div class="row wrap"> <form id="HomeLoan" class="form-horizontal col-md-8" style="font-size:12px;"> <fieldset> <legend style="text-align:center; font-size:15px; font-weight:bold;">Personal Information</legend> <div class="form-group"> <label for="input" class="col-sm-4 control-label">You Are</label> <div class="col-sm-8"> <label class="radio-inline"><input type="radio" name="optradio">Male</label> <label class="radio-inline"><input type="radio" name="optradio">Female</label> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Full Name</label> <div class="col-sm-8"> <input type="text" class="form-control input-sm" id="input" placeholder="Enter Your Full Name"> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Phone No.</label> <div class="col-sm-8"> <input type="text" class="form-control input-sm" id="input" placeholder="Enter Your Phone No."> <small id="emailHelp" class="form-text text-muted">We'll never share your Phone No. with anyone else.</small> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Date of Birth</label> <div class="col-sm-8"> <input type="text" class="form-control input-sm" id="input" placeholder="Enter Your Date of Birth"> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Email ID</label> <div class="col-sm-8"> <input type="email" class="form-control input-sm" id="input" placeholder="Enter Your Email ID"> </div> </div> </fieldset> <fieldset> <legend style="text-align:center; font-size:15px; font-weight:bold;">Property Detail</legend> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Pupose for Loan</label> <div class="col-sm-8"> <select class="form-control input-sm" id="purpose"> <option value="" disabled selected>Select Pupose for Loan</option>     <option>Ready to move</option>     <option>Under Construction</option>     <option>Buy a Plot of Land</option>     <option>Home Renovation</option>   </select> </div> </div> <script type="text/javascript"> function ShowHideDiv() { var chkYes = document.getElementById("chkYes"); var dvFinalized = document.getElementById("dvFinalized"); dvFinalized.style.display = chkYes.checked ? "block" : "none"; } </script> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Property Finalized</label> <div class="col-sm-8"> <label for="chkYes"> <input type="radio" id="chkYes" name="chkFinalized" checked="checked" onclick="ShowHideDiv()" />  Yes       </label> <label for="chkNo"> <input type="radio" id="chkNo" name="chkFinalized" onclick="ShowHideDiv()"/>  No </label> </div> </div> <div id="dvFinalized"> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Property Address</label> <div class="col-sm-8"> <textarea rows="4" cols="41%" placeholder="Enter your Address" class="form-control input-sm"></textarea> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Property In</label> <div class="col-sm-8"> <input type="text" class="form-control input-sm" id="input" placeholder="Enter City"> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Possession By</label> <div class="col-sm-8"> <select class="form-control input-sm" id="possession">     <option>Ready to Move</option>     <option>1 Month</option>     <option>3 Month</option>     <option>6 Month</option> <option>1 Year</option> <option>Any</option>   </select> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Property Price</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" id="input" placeholder="Enter Property Price"> </div> </div> </div> <div id="dvFinalized"> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Down Payment</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" id="input" placeholder="Enter Down Payment Amount"> </div> </div> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Loan Amount</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" name="HomeLoanAmount" id="HomeLoanAmount" placeholder="Enter Loan Amount"/> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Tenure</label> <!--<div class="col-sm-4"> <input type="number" class="form-control input-sm" name="HomeLoanTenure" id="HomeLoanTenure"> </div>--> <div class="range-slider col-sm-6"> <input class="range-slider__range" name="HomeLoanTenure" id="HomeLoanTenure" type="range" value="10" min="5" max="30"/> <span class="range-slider__value"></span> Year </div> <div class="col-sm-2"> <button type="button" class="btn btn-success btn-xs" onclick="javascript:CheckEMI()"/>Check EMI</button> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Your EMI</label> <div class="col-sm-5"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="number" class="form-control input-sm" name="HomeLoanEMI20" disabled id="HomeLoanEMI20"/ style="font-weight:Bold; font-size:20px;"> </div> </div> <label for="input" class="col-sm-3 control-label" style="align:center">Per Month (@ 9.5%)</label> </div> <script language="javascript"> function CheckEMI() { var val1 = parseInt(document.getElementById("HomeLoanAmount").value); var val2 = parseInt(document.getElementById("HomeLoanTenure").value); var r = 9.5/(12*100); // to calculate rate percentage.. var ansD = document.getElementById("HomeLoanEMI20"); ansD.value = ((val1 * r * Math.pow((1+r),val2*12))/(Math.pow((1+r),val2*12)-1)).toFixed(0); } </script> <script type="text/javascript"> var rangeSlider = function(){ var slider = $('.range-slider'), range = $('.range-slider__range'), value = $('.range-slider__value'); slider.each(function(){ value.each(function(){ var value = $(this).prev().attr('value'); $(this).html(value); }); range.on('input', function(){ $(this).next(value).html(this.value); }); }); }; rangeSlider(); </script> </fieldset> <fieldset> <legend style="text-align:center; font-size:15px; font-weight:bold;">Professional Detail</legend> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Nature of occupation</label> <div class="col-sm-8"> <select class="form-control input-sm" id="purpose"> <option value="" disabled selected>Select Nature of occupation</option>     <option>Salaried</option>     <option>Self Employed</option>     <option>Self Employed Professional</option>     <option>Retired</option>   </select> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Working With</label> <div class="col-sm-8"> <input type="text" class="form-control input-sm" id="input" placeholder="Enter Company Name"> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Monthly Income</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="text" class="form-control input-sm" id="idLoanAmount" name="LoanAmount" placeholder="Enter Your Monthly Income"> </div> </div> </div> <div class="form-group"> <label for="input" class="col-sm-4 control-label">Monthly Liabilities</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon">₹</span> <input type="text" class="form-control input-sm" id="idLoanAmount" name="LoanAmount" placeholder="Enter Your Monthly Liabilities"> </div> </div> </div> </fieldset> <p> <button id="SaveAccount" type="button" class="btn btn-primary submit" data-toggle="modal" data-target="#submitbutton">Submit</button> <!-- Modal --> <div class="modal fade" id="submitbutton" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <img src="https://s28.postimg.org/n1msg47n1/logo.png" class="img-rounded"> <h4>Thanks for choosing us.</h4> <p> We try to be as responsive as possible. We'll get back to you soon.</p> </div> <div class="modal-footer">         <button type="button" class="btn btn-default" href="#" data-dismiss="modal">Close</button>       </div> </div> </div> </div> </p> </form> </div> </div> </div> </div> </body> </html>
.jumbotron { position: relative; background: #000 url("https://s14.postimg.org/brfoy05nl/homeloan.jpg") center center; width: 100%; height: 100%; background-size: cover; overflow: hidden; }
(function($) { $.fn.formToWizard = function( options, cmdParam1 ) { // Stop when selector found nothing! if (this.length == 0) return this; if( typeof options !== 'string' ) { options = $.extend({ submitButton: '', showProgress: true, showStepNo: true, validateBeforeNext: null, select: null, progress: null, nextBtnName: 'Next >', prevBtnName: '< Back', buttonTag: 'a', nextBtnClass: 'btn next', prevBtnClass: 'btn prev' }, options); } var element = this , steps = $( element ).find( "fieldset" ) , count = steps.size() , submmitButtonName = "#" + options.submitButton , commands = null; if( typeof options !== 'string' ) { //assign options to current/selected form (element) $( element ).data( 'options', options ); /**************** Validate Options ********************/ if( typeof( options.validateBeforeNext ) !== "function" ) options.validateBeforeNext = function() { return true; }; if( options.showProgress && typeof(options.progress) !== "function") { if( options.showStepNo ) $(element).before("<ul id='steps' class='steps'></ul>"); else $(element).before("<ul id='steps' class='steps breadcrumb'></ul>"); } /************** End Validate Options ******************/ steps.each(function(i) { $(this).wrap('<div id="step' + i + '" class="stepDetails"></div>'); $(this).append('<p id="step' + i + 'commands" class="commands"></p>'); if( options.showProgress && typeof(options.progress) !== "function") { if( options.showStepNo ) $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + $(this).find("legend").html() + "</span></li>"); else $("#steps").append("<li id='stepDesc" + i + "'>" + $(this).find("legend").html() + "</li>"); } if (i == 0) { createNextButton(i); selectStep(i); } else if (i == count - 1) { $("#step" + i).hide(); createPrevButton(i); // move submit button to the last step $(submmitButtonName).addClass('next').detach().appendTo("#step" + i + "commands"); } else { $("#step" + i).hide(); createPrevButton(i); createNextButton(i); } }); } else if( typeof options === 'string' ) { var cmd = options; initCommands(); if( typeof commands[ cmd ] === 'function' ) { commands[ cmd ]( cmdParam1 ); } else { throw cmd + ' is invalid command!'; } } /******************** Command Methods ********************/ function initCommands() { //restore options object from form element options = $( element ).data( 'options' ); commands = { GotoStep: function( stepNo ) { var stepName = "step" + (--stepNo); if( $( '#' + stepName )[ 0 ] === undefined ) { throw 'Step No ' + stepNo + ' not found!'; } if( $( '#' + stepName ).css( 'display' ) === 'none' ) { $( element ).find( '.stepDetails' ).hide(); $( '#' + stepName ).show(); selectStep( stepNo ); } }, NextStep: function() { $( '.stepDetails:visible' ).find( 'a.next' ).click(); }, PreviousStep: function() { $( '.stepDetails:visible' ).find( 'a.prev' ).click(); } }; } /******************** End Command Methods ********************/ /******************** Private Methods ********************/ function createPrevButton(i) { var stepName = 'step' + i; $('#' + stepName + 'commands').append( '<' + options.buttonTag + ' href="#" id="' + stepName + 'Prev" class="' + options.prevBtnClass + '">' + options.prevBtnName + '</' + options.buttonTag + '>' ); $("#" + stepName + "Prev").bind("click", function(e) { $("#" + stepName).hide(); $("#step" + (i - 1)).show(); selectStep(i - 1); return false; }); } function createNextButton(i) { var stepName = 'step' + i; $('#' + stepName + 'commands').append( '<' + options.buttonTag + ' href="#" id="' + stepName + 'Next" class="' + options.nextBtnClass + '">' + options.nextBtnName + '</' + options.buttonTag + '>'); $("#" + stepName + "Next").bind( "click", function(e) { if( options.validateBeforeNext(element, $("#" + stepName)) === true ) { $("#" + stepName).hide(); $("#step" + (i + 1)).show(); //if (i + 2 == count) selectStep(i + 1); } return false; }); } function selectStep(i) { if ( typeof(options.progress) === "function" ) { options.progress(i, count); } else if( options.showProgress ) { $("#steps li").removeClass("current"); $("#stepDesc" + i).addClass("current"); } if( options.select ) { options.select(element, $('#step'+i)); } } /******************** End Private Methods ********************/ return this; } })(jQuery);

Related: See More


Questions / Comments: