In the script section of the HTML code, VBScript code is used to total the cost for registering and to perform some simple client-side validation before the data gets passed to the server. VBScript code is also used to add some dynamic behavior to the web page, by changing the caption of one of the Label controls. The script section is organized into separate modules containing subroutines that work together. The script section is inserted between the <HEAD>
</HEAD> tags of the HTML code.
Begin the first script module by defining and initializing the value of a variable to hold the total cost for the registration. You initially set the first-class ticket as the default value by setting the CHECKED attribute of the <INPUT> tag, so make the default value of the initial ticket cost $50. Add the following code to set up the initial cost:
<SCRIPT LANGUAGE="VBScript">
<!--
Option Explicit
Dim curTotal
Dim curTicket
curTicket=50 Notice that the beginning comment tag, <!- -, is used. Its purpose is to hide the script code from browsers that do not understand scripting code. A closing comment tag, - ->, will be used at the end of this script module.
Every time the user selects a different option for the event, the program calculates the total cost. In this way, the user can see the running total for the options that are currently selected. A simple routine is called to set the total whenever options change. Add the following code to calculate the total cost:
Sub Calculate
Dim MyForm
Set MyForm=Document.frmRegister
curTotal=curTicket
If MyForm.chkHat.Checked Then
curTotal=curTotal+10
End If
If MyForm.chkMug.Checked Then
curTotal=curTotal+5
End If
If MyForm.chkShirt.Checked Then
curTotal=curTotal+20
End If
MyForm.lblTotal.Caption="$" & curTotal & ".00"
MyForm.txtTotal.Value=curTotal
End Sub To track the type of ticket selected and the cost incurred, you built a set of three mutually exclusive Radio controls. Radio controls are normally ideal for control arrays, but VBScript does not support them, so instead of using control arrays, this program calls a routine from the OnClick event of each Radio control. The program passes an index into the routine, indicating which control was selected. Add the following code to calculate the ticket price when a new Radio control is selected:
Sub Tickets(curValue)
curTicket=curValue
Calculate
End Sub Complete this script module by adding the closing comment and script tags:
-->
</SCRIPT> Begin a new script module in which to hold the validation code for the form. The validation will be simple and will consist of ensuring that certain fields actually have some data in them. The program uses the OnBlur event, which correlates to Visual Basic's LostFocus event, to check whether a text box contains a value. Add the following code module to perform the validation for this form:
<SCRIPT LANGUAGE="VBScript">
<!--
Option Explicit
Sub txtName_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtName.Value="" Then
MsgBox "Please enter Name",16,"Register"
End If
End Sub
Sub txtAddress_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtAddress.Value="" Then
MsgBox "Please enter Address",16,"Register"
End If
End Sub
Sub txtCity_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtCity.Value="" Then
MsgBox "Please enter City",16,"Register"
End If
End Sub
Sub txtState_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtState.Value=" " Then
MsgBox "Please enter State",16,"Register"
End If
End Sub
Sub txtZip_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtZip.Value="" Then
MsgBox "Please enter Zip Code",16,"Register"
End If
End Sub
Sub txtEmail_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtEmail.Value="" Then
MsgBox "Please enter Email Address",16,"Register"
End If
End Sub
Sub txtCardNumber_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtCardNumber.Value="" Then
MsgBox "Please enter Card Number",16,"Register"
End If
End Sub
Sub txtCardExpDate_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtCardExpDate.Value="" Then
MsgBox "Please enter Card Expiration Date",16,"Register"
End If
End Sub
-->
</SCRIPT> Note that the reference to the form is obtained by using Document.formname. This is an important concept. All forms must be accessed with the Document object.
Finally, you will add some VBScript code to periodically change the text in the label caption, as a form of advertising. This example uses the Timer control's Timer event to change the caption. The code will display a random message every 5 seconds. Add the following code to change the message:
<SCRIPT LANGUAGE="VBScript">
<!--
Option Explicit
Sub tmrEvent_Timer
Dim intIndex
Dim strBanner
Dim MyForm
Set MyForm=Document.frmEvent
Randomize Timer
intIndex=Int(3*Rnd)+1
Select Case intIndex
Case 1
strBanner="Order a Shirt!"
Case 2
strBanner="Order a Hat!"
Case 3
strBanner="Order a Mug!"
End Select
MyForm.lblBanner.Caption=strBanner
End Sub
-->
</SCRIPT>
That completes the HTML code. Listing 7-1 shows the completed HTML code, along with comments.
<HTML>
<HEAD>
<TITLE>Event Registration</TITLE>
<!--
This is the code for the event registration page.
The page contains the following elements:
Type of ticket
Option to purchase additional items
Personal information
Credit card information
Total cost
Submit and Reset buttons
Once the user completes the registration
form, he or she can submit the information
to a database where it can be further
processed.
-->
<SCRIPT LANGUAGE="VBScript">
<!--
Option Explicit
Dim curTotal
Dim curTicket
curTicket=50
Sub Calculate Listing 7-1.
The complete code for the HTML page.
`Author: New Technology Solutions, Inc.
`Purpose: Calculate total cost
`5/23/96 Original
Dim MyForm
Set MyForm=Document.frmRegister
curTotal=curTicket
If MyForm.chkHat.Checked Then
curTotal=curTotal+10
End If
If MyForm.chkMug.Checked Then
curTotal=curTotal+5
End If
If MyForm.chkShirt.Checked Then
curTotal=curTotal+20
End If
MyForm.lblTotal.Caption="$" & curTotal & ".00"
MyForm.txtTotal.Value=curTotal
End Sub
Sub Tickets(curValue)
curTicket=curValue
Calculate
End Sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Option Explicit
`Author: New Technology Solutions, Inc.
`Purpose: The procedures in this module
`make sure data has been entered
`5/18/96 Original
Sub txtName_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtName.Value="" Then
MsgBox "Please enter Name",16,"Register"
End If
End Sub
Sub txtAddress_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtAddress.Value="" Then
MsgBox "Please enter Address",16,"Register"
End If
End Sub
Sub txtCity_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtCity.Value="" Then
MsgBox "Please enter City",16,"Register"
End If
End Sub
Sub txtState_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtState.Value="" Then
MsgBox "Please enter State",16,"Register"
End If
End Sub
Sub txtZip_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtZip.Value="" Then
MsgBox "Please enter Zip Code",16,"Register"
End If
End Sub
Sub txtEmail_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtEmail.Value="" Then
MsgBox "Please enter Email Address",16,"Register"
End If
End Sub
Sub txtCardNumber_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtCardNumber.Value="" Then
MsgBox "Please enter Card Number",16,"Register"
End If
End Sub
Sub txtCardExpDate_OnBlur
Dim MyForm
Set MyForm=Document.frmRegister
If MyForm.txtCardExpDate.Value="" Then
MsgBox "Please enter Card Expiration Date",16,"Register"
End If
End Sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Option Explicit
Sub tmrEvent_Timer
`Author: New Technology Solutions, Inc.
`Purpose: Change label periodically
`5/21/96 Original
Dim intIndex
Dim strBanner
Dim MyForm
Set MyForm=Document.frmEvent
Randomize Timer
intIndex=Int(3*Rnd)+1
Select Case intIndex
Case 1
strBanner="Order a Shirt!"
Case 2
strBanner="Order a Hat!"
Case 3
strBanner="Order a Mug!"
End Select
MyForm.lblBanner.Caption=strBanner
End Sub
-->
</SCRIPT>
</HEAD>
<BODY BACKGROUND="backgnd2.gif">
<FORM NAME="frmEvent">
<TABLE WIDTH=550 CELLPADDING=5 BORDER=0>
<TR>
<TD ROWSPAN=14>
<!--
This is a vertical page label
-->
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID="lblFree"
HEIGHT=300
WIDTH=90
>
<PARAM NAME="Angle" VALUE="90">
<PARAM NAME="ForeColor" VALUE="#FF0000">
<PARAM NAME="Caption" VALUE="Event Registration">
<PARAM NAME="FontName" VALUE="Arial Black">
<PARAM NAME="FontSize" VALUE="22">
<PARAM NAME="Visible" VALUE="True">
</OBJECT>
</TD>
<TD ALIGN="CENTER" COLSPAN=10>
<!--
This label handles the advertising messages
-->
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID="lblBanner"
HEIGHT=40
WIDTH=400
>
<PARAM NAME="ForeColor" VALUE="#0000FF">
<PARAM NAME="Caption" VALUE="Register Here!">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="20">
<PARAM NAME="FontBold" VALUE="True">
<PARAM NAME="Visible" VALUE="True">
</OBJECT>
</TD>
</TR>
<TR>
<!--
This is the actual registration form.
Notice that a table inside a table is used
for attractive formatting on the screen.
-->
<TD COLSPAN=6>
<FORM NAME="frmRegister" METHOD="POST" ACTION=
"/Scripts/oleisapi.dll/eventreg.Person.Register">
<TABLE WIDTH=400 BORDER=0>
<B><FONT SIZE=2>
<TR>
<TD COLSPAN=1>
Tickets
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="RADIO" VALUE="First"
NAME="optTicket" CHECKED OnClick="Tickets(50)">
First-Class $50
<P><P>
</TD>
<TD NOWRAP COLSPAN=1>
<P><P>
<INPUT TYPE="RADIO" VALUE="Second"
NAME="optTicket" OnClick= "Tickets(20)">
Second-Class $20
</TD>
<TD NOWRAP COLSPAN=1>
<P><P>
<INPUT TYPE="RADIO" VALUE="Third"
NAME="optTicket" OnClick= "Tickets(10)">
Third-Class $10
</TD>
</TR>
<TR>
<TD COLSPAN=1>
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="CHECKBOX" NAME="chkHat"
VALUE="Yes" OnClick="Calculate">
Hat $10
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="CHECKBOX" NAME="chkMug"
VALUE="Yes" OnClick="Calculate">
Mug $5
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="CHECKBOX" NAME="chkShirt"
VALUE="Yes" OnClick="Calculate">
Shirt $20
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Name
</TD>
<TD COLSPAN=3>
<INPUT TYPE="TEXT" NAME="txtName" SIZE=72>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Company
</TD>
<TD COLSPAN=3>
<INPUT TYPE="TEXT" NAME="txtCompany" SIZE=72>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Address
</TD>
<TD COLSPAN=3>
<INPUT TYPE="TEXT" NAME="txtAddress" SIZE=72>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
City
</TD>
<TD COLSPAN=1>
<INPUT TYPE="TEXT" NAME="txtCity" SIZE=20>
</TD>
<TD COLSPAN=1 ALIGN="RIGHT">
State
<INPUT TYPE="TEXT" NAME="txtState" SIZE=2
MAXLENGTH=2>
</TD>
<TD COLSPAN=1 ALIGN="RIGHT">
Zip
<INPUT TYPE="TEXT" NAME="txtZip" SIZE=9
MAXLENGTH=9>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Email
</TD>
<TD COLSPAN=11>
<INPUT TYPE="TEXT" NAME="txtEmail" SIZE=47>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="RADIO" VALUE="Visa"
NAME="optCardType" CHECKED>
VISA
<P><P>
</TD>
<TD NOWRAP COLSPAN=1>
<P><P>
<INPUT TYPE="RADIO" VALUE="MC" NAME="optCardType">
MasterCard
</TD>
<TD COLSPAN=1>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Card #
</TD>
<TD COLSPAN=1>
<INPUT TYPE="TEXT" NAME="txtCardNumber" SIZE=20>
</TD>
<TD COLSPAN=1>
Exp Date
<INPUT TYPE="TEXT" NAME="txtCardExpDate" SIZE=4>
</TD>
<TD COLSPAN=1 ALIGN="CENTER">
TOTAL
</TD>
</TR>
<TR>
<TD COLSPAN=3>
</TD>
<TD ALIGN="CENTER">
<OBJECT
CLASSID=
"clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID="lblTotal"
HEIGHT=20
WIDTH=100
>
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="Caption" VALUE="$50.00">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="20">
<PARAM NAME="FontBold" VALUE="True">
<PARAM NAME="Visible" VALUE="True">
</OBJECT>
<INPUT TYPE="HIDDEN" NAME="txtTotal" VALUE="50">
</TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN="CENTER">
<INPUT TYPE="SUBMIT" VALUE="Register Now!">
<INPUT TYPE="RESET">
</TD>
</TR>
</FONT></B>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE>
<!--
This is the Timer control
-->
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrEvent"
>
<PARAM NAME="Interval" VALUE="5000">
<PARAM NAME="Enable" VALUE="True">
</OBJECT>
</FORM>
</BODY>
</HTML>