Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Apr 18, 2013, 04:10 AM   #1
bigMAC28
macrumors member
 
Join Date: Apr 2012
Location: Chicago
Help with creating a mortgage calculator in Jquery

Hi guys, its currently 3am and I am stumped. I have to create a loan calculator for class and Im stuck on the most silly part. The Algorithm. The current algorithim i have is

;
Code:
payment = amt*((int*(int+1)^24)/(1+int)^24)-1;
I know the problem is with the Powers but i dont really know how to do it in jQuery. Any help would be greatly appreciated! Thanks.

-Mike
bigMAC28 is offline   0 Reply With Quote
Old Apr 18, 2013, 06:45 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
jQuery is used to get values from form fields or the document in the DOM.
You use normal Javascript for most basic math functions.

For jQuery help on selectors (need to know your CSS first):
http://api.jquery.com/category/selectors/

To get field values to plug into your formula use $('selector').val:

Code:
$('#element_name').val();
or to convert it to an Integer:

Code:
var myvalue = parseInt($('#element_name').val());
Below is a quick example of how to call jQuery and how functions are loaded and nested and a simple math statement just to show you a high elevation view of syntax:

Code:
<script type="text/javascript">
<!--//

$(function(){

var myvalue1 = parseInt($('#element_name1').val());
var myvalue2 = parseInt($('#element_name2').val());

function calcPrice(){

var rate = 1.5;
var final_value = rate * myvalue1 * myvalue2;

}
calcPrice();
}

});

//-->
</script>
Once you get the concepts of how values are called and pieced together in a jQuery function, the math actually is the easy part. I am not helping you with how to calculate a mortgage - but how to do a math operation based on form or document values using jQuery.

Before responding back (post your relevant code if so) do this first:

1) Add in print values for each value used in your formula and ensure they're set to what they should be
2) Use a browser inspection tool and check console log for JS errors to see if something obviously broken or syntax issue (i.e. chrome, or Firebug in FF)
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Apr 18, 2013, 11:16 AM   #3
bigMAC28
Thread Starter
macrumors member
 
Join Date: Apr 2012
Location: Chicago
Heres what I have. I think its all correct except for the formula. This is the way the instructor wants me to do it so using other functions are out. Thanks!

Code:
<html>
    <head>
        <script src="js/jquery.js"></script>
    </head>
	<body>
       
        <H1>Mortgage Calculator</H1>
      
             <Table>
                
                
                <TR><TD>Start Date</TD><TD><input id="a"></TD></TR>
                <TR><TD>Loan Amount</TD><TD><input id="b"></TD></TR>
                <TR><TD>Interest Rate</TD><TD><input id="c"></TD></TR>
                <TR><TD>Term (Years)</TD><TD><input id="d"></TD></TR>
                <TR><TD>Monthly Payment</TD><TD><input id="e"></TD></TR>
        	</Table>
                    <script>
                        <!--Gets value of a, stores it into x. Then takes X and gives it to the value of B-->
                        function copy_content() { x = jQuery('#a').val(); jQuery('#b').val(x);}
       
                  			
                  			
   
                       <!-- computes interest rate value-->
                           function computeInterestRate() { 
                           
                           	amt = jQuery('#b').val();
                            rate = jQuery('#c').val();
                			term = jQuery('#d').val();
                            months = (term*12);
                            w = final_compute(months,rate,amt);
                            jQuery('#e').val(w);
                           }
                      
                        jQuery('#d').keyup(computeInterestRate);
                        
                        /*    
                        function getTerm(){
                           term = jQuery('#d').val();
                           months = term*(12);
                          jQuery('#d').val(months);
                          }
                  	jQuery('#d').keyup(getTerm);
                     
*/
                        
                    
                        
                        function final_compute(months,int,amt){
                        
                            payment = amt*((int*(int+1)^24)/(1+int)^24)-1;
                        
                        return payment;
                        }
 
					</script>
    </body>
    </html>
Quote:
Originally Posted by SrWebDeveloper View Post
jQuery is used to get values from form fields or the document in the DOM.
You use normal Javascript for most basic math functions.

For jQuery help on selectors (need to know your CSS first):
http://api.jquery.com/category/selectors/

To get field values to plug into your formula use $('selector').val:

Code:
$('#element_name').val();
or to convert it to an Integer:

Code:
var myvalue = parseInt($('#element_name').val());
Below is a quick example of how to call jQuery and how functions are loaded and nested and a simple math statement just to show you a high elevation view of syntax:

Code:
<script type="text/javascript">
<!--//

$(function(){

var myvalue1 = parseInt($('#element_name1').val());
var myvalue2 = parseInt($('#element_name2').val());

function calcPrice(){

var rate = 1.5;
var final_value = rate * myvalue1 * myvalue2;

}
calcPrice();
}

});

//-->
</script>
Once you get the concepts of how values are called and pieced together in a jQuery function, the math actually is the easy part. I am not helping you with how to calculate a mortgage - but how to do a math operation based on form or document values using jQuery.

Before responding back (post your relevant code if so) do this first:

1) Add in print values for each value used in your formula and ensure they're set to what they should be
2) Use a browser inspection tool and check console log for JS errors to see if something obviously broken or syntax issue (i.e. chrome, or Firebug in FF)
bigMAC28 is offline   0 Reply With Quote
Old Apr 18, 2013, 03:29 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
A little sloppy not using var to declare variables when first used and you could have applied parseInt() like I did instead of casting as you did, but overall seems okay to me in terms of syntax. So does it work or not?

If not, I already addressed what to do in my previous reply at the bottom.

If so, congratulations.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Apr 18, 2013, 04:05 PM   #5
bigMAC28
Thread Starter
macrumors member
 
Join Date: Apr 2012
Location: Chicago
Yeah I got it.

Quote:
Originally Posted by SrWebDeveloper View Post
A little sloppy not using var to declare variables when first used and you could have applied parseInt() like I did instead of casting as you did, but overall seems okay to me in terms of syntax. So does it work or not?

If not, I already addressed what to do in my previous reply at the bottom.

If so, congratulations.
bigMAC28 is offline   0 Reply With Quote
Old Apr 19, 2013, 06:10 AM   #6
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Well done for your class project.

Now for some informal advice for doing something like this in the real world, when clients are paying for it (this is not just for you, but anyone following as this is a teaching forum):

Move your custom JS to an external script document and reference it from within head, much like you did for jQuery library. In modern web development its wise to separate content from style from client side scripting. This centralizes the jQuery code and makes for much easier debugging and troubleshooting, plus a well organized site. Avoid embedding (script tags and code not in header) and inline (when JS or CSS is hard coded within attributes of HTML tags) unless necessary. Declare all JS variables upon first reference, add comments to explain your code and functions, and use sensible ID's and class names in your HTML so others can figure it out. Clean code is good code. Good code is good money, plus pride in doing it right. And if you come back a year later to debug an issue or add a new feature, etc., you'll spend less time re-learning your own code.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Mortgage Refinancing Stories samiwas Community Discussion 8 Jan 6, 2013 08:18 AM
Crazy Calculator Full--Change the way you use calculator wwssttt iPad Apps 0 Dec 30, 2012 07:37 AM
just wrote a mortgage statement h3blade Wasteland 4 Sep 21, 2012 10:52 AM

Forum Jump

All times are GMT -5. The time now is 05:56 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC