Published: October 30, 2011
Edited: 12 May 2015
The only component of the amortization calculator that users directly interact with is the HTML input table. This table provides a HTML form where the user may enter the data used to calculate the characteristics of the loan's terms and perform the amortization. The operations are then completed when the user clicks on the button labeled Commit.
The following code module presents the entire HTML file for the amortization program:
HTML Table Code
The commitData() Function
The commitData() function is the control or dispatch module for the program. This is the function that the user calls by pressing the button labeled Commit in the HTML form and specified in the <input> element of the HTML code. There are a number of housekeeping routines initiated by this function, the first of which is to create a table on a new page and echo the data that the user supplied. The module is displayed below:
The commitData() function is a dispatcher module, which simply means that this function calls other functions to perform the actions necessary for the program to generate the desired results, in this case the loan amortization.
This function begins by declaring and initializing the variables necessary to retrieve the user's data from the HTML form.
The function then calls the functions that echo the user's input back so the user may see what was entered, this is the renderEchoInput() function. Next, the function to render the amortization table is called, which is the renderAmortizationTable() function.
The displayData() function is called four times to echo back the data the user entered and finally the functions to calculate the terms of the loan and perform the amortization are called.
The functions called by the commitData() function comprise the meat of the program and the remainder of this hub explains each of those functions.
Render the Table to Echo Input
The purpose of the renderEchoTable() function is to simply create the table that will display back the information entered by the user for verification. The commitData() function calls this function exactly one time.
After creating the echo table, the amortization table is created as determined by the number of payments that the user entered:
Render the Amortization Table
Like the renderEchoTable() function above, the renderAmortizationTable() function displays an empty table that the program will later populate. The major difference in the functionality of the two modules is that this table varies in length according to a value entered by the user.
This variation is accomplished using a looping structure, which is dependent on the numPay parameter supplied by the calling routine.
One innovative method included in this function is using the tagNam variable to create dynamic id's for the <td> elements within the code. These id's are used by the getElementById() function later in the program so they must be unique. An alternative to the dynamic id's would have been to hard code an HTML table representing the maximum length of a loan, say 30 years or 360 payments but this would entail creating 360 static rows in the HTML table. This would have been a tedious exercise in codingcoding. However, in some cases the tedious method may someimes be easier than figuring out the alternative. Which method to apply isd up to the coder developing the program.
The amortizePmts() function performs the steps to amortize the loan. These steps include calculating the current interest due on the loan, subtracting that interest from the amount of the monthly payment, then subtracting the resulting amount from the old balance. The result of this final subtraction then becomes the new balance for the loan. These operations repeat for as many payments are included in the terms of the loan and the final result is the loan amortization.
Display a Table Field
The displayTableField() function is the shortest function in the program and was created as an early demonstration of the benefits of modularization. The two attributes included in the definition of the function are passed to the function when it is invoked and this short routine actually eliminates quite a bit of redundant coding by shortening the lengths of the lines used to display a table field if the function were not a separate module.
Are tutorials worthwhile
Calculate the Monthly Payment
A standard accounting function forms the basis for the function used to calculate the monthly payment. This function uses the amount of the loan, the interest rate, and the number of payments to determine what the monthly payment would be for the given terms of the loan. The payment is calculated one time then echoed back to the user and finally used by the amortization routine to specify the state of the loan after each payment is made.
Convert a Format to Two-Decimal
When interest rates are calculated they generally extend out to quite a few decimal places. This floating point number then influences monetary calculations so the number of decimal places may become quite large.
The twoDecimal() function converts a floating point number to one limited to two decimal places. This function is necessary to convert the output to a more readable form and ensure that the output in fact fits in the table fields..
Was this hub informational?
The author appreciates all comments.
Note: The code contained in this hub contains some minor errors, which are left to the learner to discover and correct as an exercise. Therefore, no warranty, implied or otherwise, is supplied as a guarantee for this code. The program was created and presented as a learning exercise.
The Complete amort.js file
eli on November 13, 2017:
if i want to open the table in another page ? in blank page..
and not like in here in the same page..
how can i do that ?
JustMike on April 30, 2016:
this is just what i was looking for. Thank you.
OllyDbg on December 17, 2015:
Thank you so much!
This Old Guy (author) from Somewhere in Ohio on February 09, 2012:
You can use the isnumeric keyword to validate a required field that must be numeric. If the test passes, then data was entered into the field.
You can validate the value using the following:
Boss on February 08, 2012:
Can you help me out with validation as a required field, Must be a Number Field, Number must be greater than 0.
Patel on February 08, 2012:
This Old Guy (author) from Somewhere in Ohio on November 01, 2011:
I'm glad I could help you, YellowOC1.
YellowOC1 on November 01, 2011:
Nice tips, helped me out in working this new project
BABYCHICOSREVEIWS from Fort Pierce Florida on October 30, 2011:
I thought I knew it all, amazing review. Thank you