jQuery Mortgage Calculator

Today I created a jQuery based mortgage calculator. Nothing to fancy, uses bootstrap for the main page but if you tear apart the code you can abstract it out for your purposes. It even creates a nice looking amortization table. Enjoy!

Want to play with it? Check it out live:

http://joelvasallo.com/mortgage.html

Browse the source:

https://github.com/jvasallo/jquery-mortgage

Lemme know what you think!

35 thoughts on “jQuery Mortgage Calculator”

  1. I have noticed you don’t monetize your site, don’t waste your
    traffic, you can earn additional bucks every month because you’ve got hi quality content.

    If you want to know how to make extra $$$, search for: best adsense
    alternative Wrastain’s tools

    Reply

  2. Hi admin, i must say you have hi quality content here. Your
    website should go viral. You need initial traffic boost only.
    How to get it? Search for: Mertiso’s tips go viral

    Reply

    1. Mark,

      Thanks for the great comments. You are saying essentially two payments per year? That shouldn’t be too difficult to do. It is just a matter of doing the right calculation and handling the selection from the dropdown. =)

      Reply

  4. Hi Joel. This is a great tool! I’ve updated it to Bootstrap 3 on my end, and it works great as a static HTML.

    I can’t for the life of me figure out why the JS doesn’t work properly on a WordPress(.org) page. I stripped the jquery link, and was using my own CSS (both of which worked just fine in a jsfiddle, yes, using the version of jquery that the wordpress install comes with). But when I load it on a page in a wordpress install (direct-inserting the script, linking the script as a .js file.. doesn’t matter), it just doesn’t work. It doesn’t calculate.

    Any idea what might be causing this? I wouldn’t have asked, but your own site is a WordPress site, so I thought you might have an idea, or be interested to know that it doesn’t work if you haven’t ever tried this approach.

    Thank you for a great free amortization calculator!

    Reply

    1. I personally haven’t ran into an issue, but do you have a sample place I can check it out on? Maybe can be related to how it is being implemented?

      Reply

  6. Ok fine. Sorry I’m asking a lot!
    Where can I add the code to pop an error window when the user enters a string instead of an integer?

    Reply

    1. The code already handles this exception, but if you want a pop up, you would need to program that yourself. I find that popups are usually annoying and a bad ux choice IMO.

      Reply

  8. Thanks for your reply dude.
    Do we really need every line in jquwey.js code? It’s a 27 page code!

    Thanks.

    Sayyag

    Reply

    1. Do you need all the lines? Probably not. jQuery is an external library used by almost every JavaScript developer. It makes this easier in JavaScript. Deleting random stuff is not easy because that library is so tightly coupled. There are no real efficiencies by deleting stuff in there anyways. If your concern is page speed, look at compression and caching strategies server side.

      Reply

  9. Awesome job, Jvasallo!

    How could I replace the date column to be “Payment Number” that creates rows based on period of months? So 36 months is 36 payments.

    Can you also please upload the code for the webpage that contains the choice of years and months.

    Thank you in Advance.

    Sayyaf

    Reply

    1. Thanks for the comments.

      So the code that enables either years or months is already present in Github. You just select from a drop down.

      To change the date column to an incremented number, just modify line 236 to some counter. You are already in a loop so just set a counter and add to it.

      Reply

    2. قال:وصلني التحديث لكن طلعت عندي الحروف العربية متفرقة وغير مقرؤه وعند اعادة التشغيل لخبطت في الرقم السري لاني ما استطيع اقرا هذه الكلمات المتقطعة وقفل ياليت احد يساعدني ويحط صورة اللوحة بالعربي اقصد لوحة المفاتيح التي تطلع لادخال الرقم السري او PUK شاكرا لكم مقدما

      Reply

      2. YESHA is like Citibank . Too big to fail. Untouchable. Which means when the sh*t really hits the fan the repercussions will be dreadful.Zionism has always been about audacity. Build a fort . Secure it. Build another. Migron is the same logic. But the stakes are too high now. The risk is coming back to Israel and it is too big for Israel to manage.

        Reply

    3. “je tym myslene kopiu legalne ziskaneho nosica, pokial ju vytvaras s cielom ju uzivat”…to si myslis ale iba ty. Ja tam nic o “legalne ziskanych nosicoch” nevidim.Ja nic neohybam, ja som iba citoval. Ty tu davas svoje domienky a svojske vyklady zakona. Mozes to zopakovat aj 300x pravdou sa to nestane;-)V tomto pripade autor nema narok na odmenu, ale dostava nahradu odmeny.

      Reply

    5. God has blessed me through your music for so many years! May God continue to use you for His Glory as you minister to others! Happy Birthday to a faithful servant.

      Reply

  12. My brother suggested I might like this web site. He was totally right.

    This post actually made my day. You can not imagine just how much time I had spent for this
    info! Thanks!

    Reply

  14. Very good job! I have a question, how to change the decimal format like this: Rp 500.000.000,00
    and not like this 500000000,00

    Reply

    1. A quick search I found:
      function numberWithCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }

      I would change the “,” to “.” for your case. This should hopefully work for you too 🙂 Lemme know how it goes.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.