Best Mortgage Calculator for Easy Loan-Get A free code and script

Mortgage Calculator for Easy Loan >

This is a live demo and preview. Get this Mortgage Calculator for Easy Loan for free for your own websites and blogs
Mortgage Calculator

Enter the house price, interest rate, length of the loan, your down payment, insurance and taxes to see how much your monthly mortgage payment will be:

House Price

Interest Rate

# of Years

15 30

Down Payment

Insurance

Taxes

Monthly Insurance & Taxes

Insurance

Taxes

Total Monthly Payments
Including Taxes, Insurance, and Mortgage Insurance if applicable

FHA

USDA

Conventional

If you would like the information presented in this calculator to keep for offline viewing, printing, or sharing, enter your email below and click Send.

This is Code and demo of Mortgage Calculator for Easy Loan. Copy this code and paste it into your own website and blog posts.

<html>
<head>
  <meta charset="UTF-8">
  <title>Mortgage Calculator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="mortgage.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script> $(document).ready(function() {
  // Initiate popovers for '?' buttons next to input labels
  $("[data-toggle='popover']").popover({
    container: "body",
    placement: "auto"
  });

// Lay out number inputs as Jquery selector to iterate upon for validation
  var inputs = $("input[name=house-price], input[name=interest-rate], input[name=down-payment], input[name=insurance], input[name=taxes]");

// Declare input variables for ease of use
  var housePrice = $("input[name=house-price]");
  var interestRate = $("input[name=interest-rate]");
  var years;
  var downPayment = $("input[name=down-payment]");
  var insurance = $("input[name=insurance]");
  var taxes = $("input[name=taxes]");

// Booleans for input validation
  var housePriceValid = false;
  var interestRateValid = false;
  var yearsValid = false;
  var downPaymentValid = false;
  var insuranceValid = false;
  var taxesValid = false;

// Iterate upon inputs, making white when empty.
  $.each(inputs, function() {
    var input = $(this);
    input.keyup(function() {
      if (!input.val()) {
        input.closest($("div .requisite")).removeClass("has-error").removeClass("has-success");
      }
    });
  });

// Check if House Price input is greater than 0 on each keyup.
  housePrice.keyup(function() {
    if ($(this).val()) {
      if (parseFloat($(this).val()) > 0) {
        $(this).closest($("div .requisite")).removeClass("has-error").addClass("has-success");
        housePriceValid = true;
      } else {
        $(this).closest($("div .requisite")).removeClass("has-success").addClass("has-error");
        housePriceValid = false;
      }
    }
  });

// Check if Interest Rate input is greater than 0 and less than 100 on each keyup.
  interestRate.keyup(function() {
    if ($(this).val()) {
      if (parseFloat($(this).val()) > 0 && parseFloat($(this).val()) < 100) {
        $(this).closest($("div .requisite")).removeClass("has-error").addClass("has-success");
        interestRateValid = true;
      } else {
        $(this).closest($("div .requisite")).removeClass("has-success").addClass("has-error");
        interestRateValid = false;
      }
    }
  });

// Handle switching of radio buttons
  $("input:radio[name=years-radio]").change(function() {
    years = $("input:radio[name=years-radio]:checked");
    if ($("input:radio[name=years-radio]:checked").val() === "15") {
      $("div#years-group").removeClass("has-error").addClass("has-success");
      $("label[name=years-button-30]").removeClass("btn-success btn-danger");
      $("label[name=years-button-15]").removeClass("btn-danger").addClass("btn-success");
      yearsValid = true;
    } else if ($("input:radio[name=years-radio]:checked").val() === "30") {
      $("div#years-group").removeClass("has-error").addClass("has-success");
      $("label[name=years-button-15]").removeClass("btn-success btn-danger");
      $("label[name=years-button-30]").removeClass("btn-danger").addClass("btn-success");
      yearsValid = true;
    }
    $("div#years-group").addClass("has-success");
  });

// Check if Down Payment input is >= 0 and < 100 for validation
  downPayment.keyup(function() {
    if ($(this).val()) {
      if (parseFloat($(this).val()) >= 0 && parseFloat($(this).val()) < 100) {
        $(this).closest($("div .requisite")).removeClass("has-error").addClass("has-success");
        downPaymentValid = true;
      } else {
        $(this).closest($("div .requisite")).removeClass("has-success").addClass("has-error");
      }
    }
  });

// Make sure no negative number is inputted for insurance dollar amount
  insurance.keyup(function() {
    if ($(this).val()) {
      if (parseFloat($(this).val()) > 0) {
        $(this).closest($("div .requisite")).removeClass("has-error").addClass("has-success");
        insuranceValid = true;
      } else {
        $(this).closest($("div .requisite")).removeClass("has-success").addClass("has-error");
      }
    }
  });

// Make sure no negative number is inputted for taxes dollar amount
  taxes.keyup(function() {
    if ($(this).val()) {
      if (parseFloat($(this).val()) > 0) {
        $(this).closest($("div .requisite")).removeClass("has-error").addClass("has-success");
        taxesValid = true;
      } else {
        $(this).closest($("div .requisite")).removeClass("has-success").addClass("has-error");
      }
    }
  });

var emailHousePrice;
  var emailInterestRate;
  var emailYears;
  var emailDownPayment;
  var emailInsurance;
  var emailTaxes;
  var emailInsuranceMonthly;
  var emailTaxesMonthly;
  var emailFHA;
  var emailVA;
  var emailUSDA;
  var emailCONV;

// Validate inputs and calculate if all is valid.
  $("button[name=calculate]").click(function() {
    if (!$("input:radio[name=years-radio]:checked").val()) {
      $("div#years-group").addClass("has-error");
      $("label[name=years-button-15]").addClass("btn-danger");
      $("label[name=years-button-30]").addClass("btn-danger");
    }
    $.each(inputs, function() {
      var input = $(this);
      if (!input.val()) {
        input.closest($("div .requisite")).addClass("has-error");
      }
    });
    if (housePriceValid && interestRateValid && yearsValid && downPaymentValid && insuranceValid && taxesValid) {
      calculate();
      emailHousePrice = $("input[name=house-price]").val();
      emailInterestRate = $("input[name=interest-rate]").val();
      emailYears = $("input:radio[name=years-radio]:checked").val();
      emailDownPayment = $("input[name=down-payment]").val();
      emailInsurance = $("input[name=insurance]").val();
      emailTaxes = $("input[name=taxes]").val();
      emailInsuranceMonthly = $("input[name=insurance-monthly]").val();
      emailTaxesMonthly = $("input[name=taxes-monthly]").val();
      emailFHA = $("input[name=fha]").val();
      emailVA = $("input[name=va]").val();
      emailUSDA = $("input[name=usda]").val();
      emailCONV = $("input[name=conv]").val();
    }
  });

// Handle all calculations given the values inputted.
  function calculate() {
    function getTotal(principle, payment) {
      return ((((principle * interestRateM) / (1 - Math.pow(1 + interestRateM, (-1 * months))) * 100) / 100) + insuranceMonthly + taxesMonthly + payment);
    }
    var numYears = parseInt(years.val());
    var principle = housePrice.val() - (housePrice.val() * (downPayment.val() / 100));
    var interestRateM = interestRate.val() / (100 * 12);
    var months = numYears * 12;
    var monthlyPayment = ((principle * interestRateM) / (1 - Math.pow(1 + interestRateM, -1 * months)) * 100) / 100;
    var insuranceMonthly = insurance.val() / 12;
    $("input[name=insurance-monthly]").val(insuranceMonthly.toFixed(2));
    var taxesMonthly = taxes.val() / 12;
    $("input[name=taxes-monthly]").val(taxesMonthly.toFixed(2));

var fhaTotal;
    if (downPayment.val() >= 3.5) {
      fhaTotal = getTotal(fhaPrinciple, fhaPayment);
      $("input[name=fha]").val(fhaTotal.toFixed(2));
    } else {
      $("input[name=fha]").val("3.5% down required");
    }

var vaPrinciple;
    if (downPayment.val() >= 10) {
      vaPrinciple = (principle * 1.0125);
    } else if (downPayment.val() >= 5 && downPayment.val() < 10) {
      vaPrinciple = (principle * 1.015);
    } else {
      vaPrinciple = (principle * 1.0215);
    }
    var vaTotal = getTotal(vaPrinciple, 0);
    $("input[name=va]").val(vaTotal.toFixed(2));

var usdaPrinciple = principle + (principle * 0.01);
    var usdaPayment = (usdaPrinciple * 0.0035) / 12;
    var usdaTotal = getTotal(usdaPrinciple, usdaPayment);
    $("input[name=usda]").val(usdaTotal.toFixed(2));

var convPayment;
    if (numYears == 15) {
      if (downPayment.val() >= 3 && downPayment.val() < 5) {
        convPayment = (principle * 0.0033) / 12;
      } else if (downPayment.val() >= 5 && downPayment.val() < 10) {
        convPayment = (principle * 0.0028) / 12;
      } else if (downPayment.val() >= 10 && downPayment.val() < 15) {
        convPayment = (principle * 0.0021) / 12;
      } else if (downPayment.val() >= 15 && downPayment.val() < 20) {
        convPayment = (principle * 0.0018) / 12;
      } else if (downPayment.val() >= 20 && downPayment.val() <= 100) {
        convPayment = 0;
      }
    } else if (numYears == 30) {
      if (downPayment.val() >= 3 && downPayment.val() < 5) {
        convPayment = (principle * 0.0062) / 12;
      } else if (downPayment.val() >= 5 && downPayment.val() < 10) {
        convPayment = (principle * 0.0052) / 12;
      } else if (downPayment.val() >= 10 && downPayment.val() < 15) {
        convPayment = (principle * 0.0030) / 12;
      } else if (downPayment.val() >= 15 && downPayment.val() < 20) {
        convPayment = (principle * 0.0019) / 12;
      } else if (downPayment.val() >= 20 && downPayment.val() <= 100) {
        convPayment = 0;
      }
    }

var convTotal;
    if (downPayment.val() >= 3) {
      convTotal = monthlyPayment + insuranceMonthly + taxesMonthly + convPayment;
      $("input[name=conv]").val(convTotal.toFixed(2));
    } else {
      $("input[name=conv]").val("3% down required");
    }
  }

$("form").submit(function(event) {
    event.preventDefault();
    event.stopImmediatePropagation()
    $("#email-group").removeClass("has-error");
    $(".help-block").remove();
    $(".alert-success").remove();
    var email = $("input[name=email]").val();

var formData = {
      "housePrice": emailHousePrice,
      "interestRate": emailInterestRate,
      "years": emailYears,
      "downPayment": emailDownPayment,
      "insurance": emailInsurance,
      "taxes": emailTaxes,
      "insuranceMonthly": emailInsuranceMonthly,
      "taxesMonthly": emailTaxesMonthly,
      "fha" : emailFHA,
      "va": emailVA,
      "usda": emailUSDA,
      "conv": emailCONV,
      "email": email
    };

$.ajax({
        type: "post",
        url: "emailMortgage.php",
        data: formData,
        dataType: "json",
        encode: true
      })
      .done(function(response) {
        if (!response.success) {
          if (!response.wp_mail) {
            if (response.errors.email) {
              $("#email-group").addClass("has-error");
              $("#email-group").append("<div class='help-block'>" + response.errors.email + "</div>");
            }

$("button[name=submit-email]").prop("disabled", false);
          } else if (response.wp_mail) {
            $("div[name=response]").append("<div class='alert alert-danger text-center'>" + response.wp_mail + "</div>");
          }
        } else {
          $("div[name=response]").append("<div class='alert alert-success text-center'>" + response.action + "</div>");
          $("button[name=submit-email]").prop("disabled", true);
        }
      });
  });
});</script>
</head>
<body class="container-fluid">
  <div class="row">
    <form class="form-horizontal well" id="mortgage-calculator" method="POST">
      <div class="col-xs-12 text-center">
        <p>Enter the <i>house price</i>, <i>interest rate</i>, <i>length of the loan</i>, <i>your down payment</i>, <i>insurance</i> and <i>taxes</i> to see how much your monthly mortgage payment will be:</p>
      </div>
      <div class="form-group">
        <div id="house-price-group" class="col-xs-6 col-sm-4 input-spacer requisite">
          <label class="control-label">House Price</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="number" class="form-control" placeholder="Amount" name="house-price" tabindex="1">
          </div>
        </div>
        <div id="interest-rate-group" class="col-xs-6 col-sm-4 input-spacer requisite">
          <label class="control-label">Interest Rate</label>
          <div class="input-group">
            <input type="number" class="form-control" name="interest-rate" tabindex="2" step="0.001">
            <div class="input-group-addon">%</div>
          </div>
        </div>
        <div id="years-group" class="col-xs-6 col-sm-4 input-spacer requisite">
          <label class="control-label"># of Years</label>
          <div class="btn-group btn-group-justified" data-toggle="buttons" name="years">
            <label class="btn btn-default" name="years-button-15">
            <input type="radio" name="years-radio" autocomplete="off" value="15">15</label>
            <label class="btn btn-default" name="years-button-30">
            <input type="radio" name="years-radio" autocomplete="off" value="30">30</label>
          </div>
        </div>
        <div id="down-payment-group" class="col-xs-6 col-sm-4 input-spacer requisite">
          <label class="control-label">Down Payment</label>
          <div class="input-group">
            <input type="number" class="form-control" name="down-payment" tabindex="3" step="0.001">
            <div class="input-group-addon">%</div>
          </div>
        </div>
        <div id="insurance-group" class="col-xs-6 col-sm-4 requisite">
          <label class="control-label">Insurance</label>
          <button type="button" class="btn btn-xs btn-default" data-toggle="popover" data-trigger="hover" title="Annual Insurance" data-content="Enter the amount of your annual premium.">?</button>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="number" class="form-control" placeholder="Amount" name="insurance" tabindex="4">
          </div>
        </div>
        <div id="taxes-group" class="col-xs-6 col-sm-4 requisite">
          <label class="control-label">Taxes</label>
          <button type="button" class="btn btn-xs btn-default" data-toggle="popover" data-trigger="hover" title="Annual Taxes" data-content="Enter the amount of your annual tax bill.">?</button>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="number" class="form-control" placeholder="Amount" name="taxes" tabindex="5">
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
          <button type="button" class="btn btn-primary btn-lg btn-block" name="calculate" tabindex="6">Calculate</button>
        </div>
      </div>
      <h3 class="text-center">Monthly Insurance & Taxes</h4>
      <div class="form-group">
        <div id="insurance-monthly-group" class="col-sm-offset-3 col-sm-3 col-xs-6">
          <label class="control-label" for="insurance-monthly">Insurance</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="number" class="form-control" name="insurance-monthly" readonly>
          </div>
        </div>
        <div id="taxes-monthly-group" class="col-sm-3 col-xs-6">
          <label class="control-label" for="monthly-taxes">Taxes</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="number" class="form-control" name="taxes-monthly" readonly>
          </div>
        </div>
      </div>
      <h3 class="text-center">Total Monthly Payments <br><small>Including Taxes, Insurance, and Mortgage Insurance if applicable</small></h4>
      <div class="form-group">
        <div id="fha-group" class="col-sm-3 col-xs-6 input-spacer">
          <label class="control-label" for="fha">FHA</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" name="fha" readonly>
          </div>
        </div>
        <div id="va-group" class="col-sm-3 col-xs-6 input-spacer">
          <label class="control-label" for="va">VA</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" name="va" readonly>
          </div>
        </div>
        <div id="usda-group" class="col-sm-3 col-xs-6 input-spacer">
          <label class="control-label" for="usda">USDA</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" name="usda" readonly>
          </div>
        </div>
        <div id="conv-group" class="col-sm-3 col-xs-6 input-spacer">
          <label class="control-label" for="conv">Conventional</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" name="conv" readonly>
          </div>
        </div>
      </div>
      <p class="col-xs-12 col-sm-8 col-sm-offset-2 text-center">If you would like the information presented in this calculator to keep for offline viewing, printing, or sharing, enter your email below and click <q>Send</q>.</p>
      <div class="form-group">
        <div id="email-group" class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
       	  <div class="input-group">
            <input type="email" class="form-control" name="email" placeholder="Email"</input>
      	    <span class="input-group-btn">
      	      <button type="submit" class="btn btn-success" name="submitEmail">Send</button>
      	    </span>
      	  </div>
        </div>
      </div>
      <div class"form-group" name="response">
      </div>
    </form>
    </div>
</body>
</html>

Code terms

You Can freely use it for personal and users
You Can modify/change the main code
You Can freely add your blogs and websites
Attribution is not required.

If you have any questions about this converter, please feel free to reach out to us via email.

Best Mortgage Calculator for Easy Loan-Get A free code and script

Monthly Insurance & Taxes

Total Monthly Payments
Including Taxes, Insurance, and Mortgage Insurance if applicable

Code Editor

Code Editor

Popular

Tags

Navigation

Best Mortgage Calculator for Easy Loan-Get A free code and script

Monthly Insurance & Taxes

Total Monthly Payments Including Taxes, Insurance, and Mortgage Insurance if applicable

Code Editor

Code Editor

Popular

Tags

Navigation

Total Monthly Payments
Including Taxes, Insurance, and Mortgage Insurance if applicable