Web Page Programming: ActiveX and VBScript

Visual Basic for Applications Unleashed

Chapter 21—Web Page Programming: ActiveX and VBScript

Example: A Mortgage Calculator

To finish our look at VBScript, let's check out a sample form that demonstrates both form validation and client-side processing. The form we'll be using is shown in Figure 21.17. As you can see, it's a simple calculator that, given various parameters such as house price and interest rate, figures out the monthly mortgage payment (among other things).

Mortgage Minder
Figure 21.17.
The sample mortgage calculator that we'll be using.

The top part of the form consists of four HTML text boxes that you use to enter the mortgage data. The bottom half of the form contains three ActiveX Label controls that are used to display the results of the calculation. Thanks to VBScript, the form is set up to do the following:

Recalculate every time you change a text box value and then navigate to another text box.
Recalculate whenever you click the Calculate button.
Prevent zero values from being entered into the text boxes.

Listing 21.4 gives you the complete HTML file for this application (see MORTMIND.HTM on the CD). Although this listing looks intimidatingly long, most of the code is needed just to display the form properly.

Listing 21.4. A form-based mortgage calculator with VBScript validation and calculations.

<HTML>
<HEAD>
<TITLE>Mortgage Minder</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<FORM NAME="MortgageMinder">
<TABLE BORDER=5 BGCOLOR=SILVER CELLPADDING=2>
<TR><TD COLSPAN=2 ALIGN=CENTER>
<B><FONT SIZE=+2 COLOR=BLUE>M<FONT SIZE=+1>ORTGAGE 
<FONT SIZE=+2>M<FONT SIZE=+1>INDER</FONT></B>
</TD></TR>
<TR><TD COLSPAN=2>
<TABLE BORDER=0 CELLPADDING=2>
<TR><TD COLSPAN=2><B>Mortgage Data:</B></TD>
<TR><TD ALIGN=RIGHT>House Price:</TD>
<TD><INPUT
    TYPE=TEXT
    NAME="Price"
    VALUE="200000"
    SIZE=7>
</TD></TR>
<SCRIPT FOR="Price" EVENT="onChange" LANGUAGE="VBScript">
    Set ctrl = document.MortgageMinder.Price
    If ctrl.Value = "" Then
        alert ("The House Price can't be 0!")
        ctrl.focus
    Else
        CalculatePayment()
    End If
</SCRIPT>
<TR><TD ALIGN=RIGHT>Down Payment:</TD>
<TD><INPUT
    TYPE=TEXT
    NAME="DownPayment"
    VALUE=0
    ONCHANGE="CalculatePayment()"
    SIZE=7>
</TD></TR>
<TR><TD ALIGN=RIGHT>Annual Interest Rate:</TD>
<TD><INPUT
    TYPE=TEXT
    NAME="InterestRate"
    VALUE="7.5"
    SIZE=4>
%
</TD></TR>
<SCRIPT FOR="InterestRate" EVENT="onChange" LANGUAGE="VBScript">
    Set ctrl = document.MortgageMinder.InterestRate
    If ctrl.Value = "" Then
        alert ("The Interest Rate can't be 0!")
        ctrl.focus
    Else
        CalculatePayment()
    End If
</SCRIPT>
<TR><TD ALIGN=RIGHT>Term:</TD>
<TD><INPUT
    TYPE=TEXT
    NAME="Term"
    VALUE="30"
    SIZE=4>
Years
</TD></TR>
<SCRIPT FOR="Term" EVENT="onChange" LANGUAGE="VBScript">
    Set ctrl = document.MortgageMinder.Term
    If ctrl.Value = "" Then
        alert ("The Term can't be 0!")
        ctrl.focus
    Else
        CalculatePayment()
    End If
</SCRIPT>
</TABLE></TD></TR>
<TR><TD>
<TABLE BORDER=0 CELLPADDING=2>
<TR><TD COLSPAN=2><B>Results:</B></TD>
<TR><TD ALIGN=RIGHT>Mortgage Principle:</TD>
<TD><OBJECT ID="Principle" WIDTH=71 HEIGHT=19
 CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
    <PARAM NAME="Size" VALUE="1870;494">
    <PARAM NAME="SpecialEffect" VALUE="2">
    <PARAM NAME="FontCharSet" VALUE="0">
    <PARAM NAME="FontPitchAndFamily" VALUE="2">
    <PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TD><TR>
<TD ALIGN=RIGHT>Total Payments:</TD>
<TD><OBJECT ID="TotalPayments" WIDTH=71 HEIGHT=19
 CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
    <PARAM NAME="Size" VALUE="1870;494">
    <PARAM NAME="SpecialEffect" VALUE="2">
    <PARAM NAME="FontCharSet" VALUE="0">
    <PARAM NAME="FontPitchAndFamily" VALUE="2">
    <PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TD></TR>
<TR><TD ALIGN=RIGHT>Monthly Payment:</TD>
<TD><OBJECT ID="Payment" WIDTH=71 HEIGHT=19
 CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
    <PARAM NAME="Size" VALUE="1870;494">
    <PARAM NAME="SpecialEffect" VALUE="2">
    <PARAM NAME="FontCharSet" VALUE="0">
    <PARAM NAME="FontPitchAndFamily" VALUE="2">
    <PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TD></TR>
</TABLE>
<TR><TD ALIGN=CENTER COLSPAN=2>
<INPUT
    TYPE=BUTTON
    NAME="cmdCalc"
    VALUE="Calculate">
<SCRIPT FOR="cmdCalc" EVENT="onClick" LANGUAGE="VBScript">
    Set frm = document.MortgageMinder
    If frm.Price.Value = "" Then
        alert ("The House Price can't be 0!")
        frmPrice.focus
    ElseIf frm.InterestRate.Value = "" Then
        alert ("The Interest Rate can't be 0!")
        frm.InterestRate.focus
    ElseIf frm.Term.Value = "" Then
        alert ("The Term can't be 0!")
        frm.Term.focus
    Else
        CalculatePayment()
    End If
</SCRIPT>
</TD>
</TR>
</TD></TR>
</TABLE>
</FORM>
</TABLE>
<SCRIPT LANGUAGE="VBScript">
Sub CalculatePayment
    Set frmCalc = Document.MortgageMinder
    price = frmCalc.Price.Value
    dnpmt = frmCalc.DownPayment.Value
    prin = price - dnPmt
    intRate = (frmCalc.InterestRate.Value/100) / 12
    term = frmCalc.Term.Value * 12
    pmt = int((prin*intRate)/(1-(1+intRate)^(-1*term))*100)/100
    frmCalc.Principle.Caption = prin
    frmCalc.TotalPayments.Caption = term
    frmCalc.Payment.Caption = pmt
End Sub
</SCRIPT>
</BODY>
</HTML>

The first thing to notice is that each text box has its own <SCRIPT> container with the appropriate FOR attribute pointing to the control. For example, here are the definition and the event handler for the House Price text box:

<TR><TD ALIGN=RIGHT>House Price:</TD>
<TD><INPUT
    TYPE=TEXT
    NAME="Price"
    VALUE="200000"
    SIZE=7>
</TD></TR>
<SCRIPT FOR="Price" EVENT="onChange" LANGUAGE="VBScript">
    Set ctrl = document.MortgageMinder.Price
    If ctrl.Value = "" Then
        alert ("The House Price can't be 0!")
        ctrl.focus
    Else
        CalculatePayment()
    End If
</SCRIPT>

This is an onChange event handler, so it fires every time the user makes a change to the text box value. The event handler first checks to see if the field is empty. If it is, an alert box is displayed and the focus is returned to the control. Otherwise, the CalculatePayment procedure (near the end of the listing) executes to recalculate the mortgage number.

The Calculate button also has an event handler that traps the onClick event. In this case, every field (except Down Payment) is checked for no value.

Finally, the CalculatePayment procedure, shown next, performs the nitty-gritty number crunching. First, the Value of each text box is stored in a variable (as well as the Form object). VBScript has no financial functions, so we have to use a formula to calculate the mortgage payment. When that's done, the calculations are stored in the ActiveX labels, and we're done.

<SCRIPT LANGUAGE="VBScript">
Sub CalculatePayment
    Set frmCalc = Document.MortgageMinder
    price = frmCalc.Price.Value
    dnpmt = frmCalc.DownPayment.Value
    prin = price - dnPmt
    intRate = (frmCalc.InterestRate.Value/100) / 12
    term = frmCalc.Term.Value * 12
    pmt = int((prin*intRate)/(1-(1+intRate)^(-1*term))*100)/100
    frmCalc.Principle.Caption = prin
    frmCalc.TotalPayments.Caption = term
    frmCalc.Payment.Caption = pmt
End Sub
</SCRIPT>