|
|
by William Robert Stanek
Now that you know VBScript basics and have learned about procedures, it's time to move on to the really fun stuff-putting VBScript to work in your Web pages. This chapter covers HTML controls, input boxes, and dynamic writing to pages with VBScript.
With HTML controls, you can create interactive buttons, text areas, checkboxes, and much more. Because VBScript takes advantage of existing HTML controls, you can easily perform complex tasks, such as validating form input. You can even submit your input to a server for processing after validation. Beyond HTML controls are dialog boxes that accept input and scripts that can make dynamic updates to your pages.
By combining form elements with a script, you can easily create highly interactive Web pages. For example, to add a button to your page, just use the following line of code:
<INPUT TYPE=BUTTON NAME=cmdButton VALUE="Click Me">
When you use the <INPUT> tag to execute scripts in your page, you're using intrinsic HTML controls. These controls are intrinsic because they're built into standard HTML. Controls you can use with VBScript include buttons, text fields, text areas, radio buttons, and checkboxes. Other form element tags you can use with VBScript include <SELECT> and <TEXTAREA>.
Although you can use the same attributes for these tags you learned
about earlier in Chapter 27, "Form Creation and Design,"
VBScript uses the attributes in unique ways and adds some new
attributes, too. Table 32.1 shows a summary of the common attributes.
| Attribute | Description | Example |
| chECKED | The control, such as a radio button or checkbox, is checked when first displayed | chECKED |
| DEFAULTVALUE | The default value for a text or text area control | DEFAULTVALUE="The beginning " |
| ENABLED | This attribute is used during testing to enable or disable a control. The default value is ENABLED=TRUE. | ENABLED=FALSE |
| FORM | The name of the form to which the control relates | FORM="subForm" |
| LANGUAGE | The scripting language used | LANGUAGE="VBScript" |
| NAME | The name of the control you're adding to the screen; often used to invoke events. | NAME=cmdButton |
| TYPE | The type of control you're adding to the page | TYPE=BUTTON |
| VALUE | The label for the control | VALUE="Click Me!" |
Buttons are one of the coolest controls to add to your page. You can add them anywhere in your page by using the <INPUT> tag and an element type of TYPE=BUTTON.
With button controls, you can boost the fun level of your pages. Figure 32.1 shows a page with three button controls. By passing a parameter from the button to a subroutine call, the same routine can be used to handle input from multiple buttons. Listing 32.1 shows the complete markup for the sample page.
Listing 32.1. Using button controls.
<HTML>
<HEAD>
<TITLE>Adding Buttons Controls to Your Pages</TITLE>
<STYLE>
H2 {font: 40pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2>Using Button Controls</H2>
<P></P>
<CENTER>
<P><INPUT TYPE="BUTTON" NAME="Button1" VALUE="Button One"
LANGUAGE="VBScript" OncLICK="DisplayDialog 1">
<P><INPUT TYPE="BUTTON" NAME="Button2" VALUE="Button Two"
LANGUAGE="VBScript" OncLICK="DisplayDialog 2">
<P><INPUT TYPE="BUTTON" NAME="Button3" VALUE="Button Three"
LANGUAGE="VBScript" OncLICK="DisplayDialog 3">
<P><INPUT TYPE="BUTTON" NAME="Button4" VALUE="Button Four"
LANGUAGE="VBScript" OncLICK="DisplayDialog 4">
</CENTER>
<HR SIZE=10 NOSHADE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub DisplayDialog(buttonValue)
Msgbox "When you clicked on button # " & buttonValue & _
" a parameter was passed to the DisplayDialog subroutine."
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.1 : Adding button controls to your pages.
By examining the code shown in Listing 32.1, you can learn many things about how buttons are used in Web pages. The following line sets a button on the page with an initial value and a name:
<INPUT TYPE=BUTTON VALUE="Click Me" NAME="funButton">
For finer control over the button, assign a procedure to execute when the button is clicked by using the OncLICK attribute. You can follow the procedure name with parameters in a comma-separated list. When this button is clicked, one parameter is passed to a procedure called DisplayDialog:
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Button One" LANGUAGE="VBScript" OncLICK="DisplayDialog 1">
The main body of the script in the page is a subroutine called displayDialog:
Sub DisplayDialog(buttonValue)
Msgbox "When you clicked on button # " & buttonValue & _
" a parameter was passed to the DisplayDialog subroutine."
End Sub
The routine accepts a parameter so that it can be used to display messages about any of the buttons being clicked. Although parameter passing is right for some input handling, many times you want each button on the page to drive related and unique events. Following this scenario, the displayDialog subroutine would be rewritten as four event-driven subroutines:
Sub Button1_OnClick
Insert code to handle click on Button1
End Sub
Sub Button2_OnClick
Insert code to handle click on Button2
End Sub
Sub Button3_OnClick
Insert code to handle click on Button3
End Sub
Sub Button4_OnClick
Insert code to handle click on Button4
End Sub
Other events, methods, and attributes you can use with buttons
are shown in Table 32.2.
| Attributes | Events | Methods |
| Enabled | OnClick | Click |
| Form | OnFocus | Focus |
| Name | ||
| Value |
With text controls, you can boost interactivity. A text control
allows users to input one line of data. You can add a text control
anywhere in your page by using the <INPUT>
tag and an element type of TYPE=TEXT.
Because TYPE=TEXT is the
default for the <INPUT>
tag, you might see this tag used without a TYPE
attribute. The markup <INPUT NAME=txtEntry>
is the same as
<INPUT TYPE=TEXT NAME=txtEntry>.
At the click of a button, your script can display an immediate response to a user's text entry. (See Figure 32.2.) The source code for the sample page is shown in Listing 32.2.
Listing 32.2. Using text controls.
<HTML>
<HEAD>
<TITLE>All About Text Controls</TITLE>
<STYLE>
H2 {font: 40pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2>Using Text Controls</H2>
<P>With text controls, you can boost interactivity to the max. A text control
allow users to input one line of data. As soon as the user presses the enter
key or a submission button, your script can display a response.</P>
<CENTER>
<INPUT TYPE=TEXT NAME="funText" SIZE=25 MAXLENGTH=25>
<INPUT TYPE=BUTTON VALUE="Display Entry" NAME="displayButton">
</CENTER>
<HR SIZE=10>
<SCRIPT LANGUAGE="VBScript">
<!-- Option Explicit
Sub displayButton_OnClick
Msgbox "You entered: " & funText.Value
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.2 : Adding text controls to your pages.
If you examine the code shown in Listing 32.2, you can see how text controls are used in Web pages. Because text controls are normally used with buttons, two lines of markup are needed:
<INPUT TYPE=TEXT NAME="funText" SIZE=25 MAXLENGTH=25> <INPUT TYPE=BUTTON VALUE="Display Entry" NAME="displayButton">
The first line of markup places the text control on the page. As you can see, you can use any of the valid attributes for text input fields with text controls. The SIZE attribute determines the width of the input field, and the MAXLENGTH attribute sets the maximum number of characters the user can enter. The script embedded in the page includes a single event-driven subroutine called displayButton_OnClick, which automatically displays a message box when the button is clicked.
To have some real fun with text controls, you need to use events directly related to what's happening with the text control itself, such as OnFocus and OnBlur. These events are driven by the user selecting different text controls on the page. (See Figure 32.3.) To direct output to the text controls, you must insert them in a named form, which allows you to target the form by using a method call. Here's an example of a named form:
<FORM NAME=coolForm> . . .
</FORM>
Figure 32.3 : Updating text controls on the page.
A named form is used in Listing 32.3 so that the text controls on the page can be updated when they're either selected or deselected.
Listing 32.3. Updating text controls.
<HTML>
<HEAD>
<TITLE>Updating Text Controls</TITLE>
<STYLE>
H2 {font: 40pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2>Updating Text Controls</H2>
<P>To have some real fun with text controls, you need to use
events that are directly related to what is happening with the text control
itself, such as OnFocus and OnBlur. The OnFocus and OnBlur events are driven
by the user selecting different text controls on the page. In order to direct
output to the text controls, you must insert them in a named form.</P>
<FORM NAME="coolForm">
<P>Text control A: <INPUT TYPE=TEXT NAME="funTextA" SIZE=25 MAXLENGTH=25></P>
<P>Text control B: <INPUT TYPE=TEXT NAME="funTextB" SIZE=25 MAXLENGTH=25></P>
<P>Text control C: <INPUT TYPE=TEXT NAME="funTextC" SIZE=25 MAXLENGTH=25></P>
</FORM>
<HR SIZE=10 NOSHADE>
<SCRIPT LANGUAGE="VBScript">
<!-- Option Explicit
Sub funTextA_OnFocus()
Dim form
Set form = document.coolForm
form.funTextA.Value = "Control A has focus!"
End Sub
Sub funTextA_OnBlur()
Dim form
Set form = document.coolForm
form.funTextA.Value = "Control A has lost focus!"
End Sub
Sub funTextB_OnFocus()
Dim form
Set form = document.coolForm
form.funTextB.Value = "Control B has focus!"
End Sub
Sub funTextB_OnBlur()
Dim form
Set form = document.coolForm
form.funTextB.Value = "Control B has lost focus!"
End Sub
Sub funTextC_OnFocus()
Dim form
Set form = document.coolForm
form.funTextC.Value = "Control C has focus!"
End Sub
Sub funTextC_OnBlur()
Dim form
Set form = document.coolForm
form.funTextC.Value = "Control C has lost focus!"
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Events, methods, and attributes you can use with text controls
are shown in Table 32.3.
| Attributes | ||
| DefaultValue | ||
| Enabled | ||
| Form | ||
| Maxlength | ||
| Name | ||
| Size | ||
| Value |
Radio button and checkbox controls are used just as you would use their corresponding form elements. You should use radio button controls when you want users to make only one selection and checkbox controls when you want them to make several selections.
One use for radio button and checkbox controls in your Web pages is to create interactive surveys like the one shown in Figure 32.4. Take a look at Listing 32.4 to see how the survey was created.
Listing 32.4. Radio button and checkbox controls.
<HTML>
<HEAD>
<TITLE>Using Radio Button Controls</TITLE>
</HEAD>
<STYLE>
H1 {font: 30pt Times; color: blue}
H2 {font: 20pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
OL LI {font: 10pt Arial; color: red}
</STYLE>
<BODY BGCOLOR="#FFFFFF">
<H1>Creating a Survey with Radio Button Controls</H1>
<P>Radio button and check box controls are used just liked you would use their
corresponding form elements. You should use radio button controls when you
want users to make only one selection and check box controls when you want
users to make multiple selections.</P>
<H2>Instant Web Survey</H2>
<OL>
<LI>Select your age group.<BR>
<INPUT TYPE="RADIO" NAME="userAge" OnClick="setAge('under 18' )" LANGUAGE="VBScript"> Under 18<BR>
<INPUT TYPE="RADIO" NAME="userAge" OnClick="setAge('18-21' )" LANGUAGE="VBScript"> 18-21<BR>
<INPUT TYPE="RADIO" NAME="userAge" OnClick="setAge('21-25' )" LANGUAGE="VBScript"> 21-25<BR>
<INPUT TYPE="RADIO" NAME="userAge" OnClick="setAge('26-35' )" LANGUAGE="VBScript"> 26-35<BR>
<INPUT TYPE="RADIO" NAME="userAge" OnClick="setAge('over 35' )" LANGUAGE="VBScript"> Over 35<BR>
<LI>What do you use the Web for? (Select all that apply).<BR>
<INPUT TYPE="chECKBOX" NAME="webFun" OnClick="setWeb" LANGUAGE="VBScript"> Fun<BR>
<INPUT TYPE="chECKBOX" NAME="webBus" OnClick="setWeb" LANGUAGE="VBScript"> Business<BR>
<INPUT TYPE="chECKBOX" NAME="webRes" OnClick="setWeb" LANGUAGE="VBScript"> Research<BR>
</OL>
<P><INPUT NAME="theResult" SIZE="65" VALUE="">
<HR SIZE=10 NOSHADE>
<SCRIPT LANGUAGE="VBScript">
<!--
Dim tempAge
Dim tempWeb
Sub setAge(inputAge)
tempAge = inputAge
Call displayStatus
End Sub
Sub setWeb()
Dim Result
tempWeb = Result
If webFun.Checked Then
Result = Result & "fun "
End If
If webBus.Checked Then
Result = Result & "business "
End If
If webRes.Checked Then
Result = Result & "research "
End If
tempWeb = Result
Call displayStatus
End Sub
Sub displayStatus()
theResult.Value = "You are " & tempAge & " and use the Web for: " & tempWeb
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.4 : Radio button and checkbox controls.
If you examine the code shown in Listing 32.4, you can see that adding radio button and checkbox controls to your page is more complex than adding other controls used previously. However, once you understand the basics of these controls, you can use them like a real pro.
When you add radio button controls, use a single name for all radio buttons in a particular group. In the example, the group userAge is used. Next, set up an event with a specific value, using OnClick. In the example, the setAge subroutine is passed these parameter values: under 18, 18-21, 21-25, 26-35, or over 35.
When you add checkbox controls, each checkbox is given a unique name. Next, you set up an event to call. In the example, the setWeb subroutine is called when a checkbox is selected. Within the subroutine, a series of If Then statements assign values to a result variable based on the checkbox's name.
The events, methods, and attributes you can use with radio button
and checkbox controls are shown in Table 32.4.
| Attributes | ||
| Checked | ||
| Enabled | ||
| Form | ||
| Maxlength | ||
| Name | ||
| Size | ||
| Value |
Text window controls are almost identical to text controls. The key differences are that with a text window control, users can enter more than one line of text and there's no maximum value for the input's size.
You can use text window controls to let users input large amounts of data. When you create a text window control, you define the size of the window in rows and columns. The number of rows defines the height of the window in lines, and the number of columns defines the width of the window in characters.
The tag used to add a text window control to the page is the <TEXTAREA> tag. Any text between the begin and end <TEXTAREA> tag is used as default text. You can add default text as follows:
<TEXTAREA NAME="coolWindow" ROWS=5 COLUMNS=65> Insert default text here.
</TEXTAREA>
As shown in Figure 32.5, you can use a text window control to gather information from a user, then respond instantly. Examine Listing 32.5 to see how the control was added to the page.
Listing 32.5. Using text window controls.
<HTML>
<HEAD>
<TITLE>Using Text Window Controls</TITLE>
</HEAD>
<STYLE>
H1 {font: 40pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
<BODY BGCOLOR="#FFFFFF">
<H1>A Text Window Control Can Gather Comments</H1>
<P>You can use text window controls to allow users to input large amounts of
data. When you create a text window control, you define the size of the
window in rows and columns. The number of rows defines the height of the
window in lines. The number of columns defines the width of the window
in characters.</P>
<P><TEXTAREA NAME="coolWindow" ROWS=5 COLUMNS=65>
</TEXTAREA></P>
<P><INPUT TYPE=BUTTON VALUE="enterComments" NAME="cmdButton"></P>
<SCRIPT LANGUAGE="VBScript">
<!--
Dim tempAge
Dim tempWeb
Sub coolWindow_OnFocus()
Alert "We welcome your comments."
End Sub
Sub cmdButton_OnClick()
Msgbox "Thankyou!"
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.5 : Creating text window controls.
Events, methods, and attributes you can use with text controls
are shown in Table 32.5.
| Attributes | ||
| DefaultValue | ||
| Enabled | ||
| Form | ||
| Name | ||
| Rows | ||
| Columns |
Password controls allow users to enter password information. All text entered in a password control is displayed as asterisks. You can add a password control to your page by using the <INPUT> tag and an element type of TYPE=PASSWORD. Because a password control is really a disguised text control, the options for a password control are identical to a text control's options.
Figure 32.6 shows how you can use password controls in your Web pages; Listing 32.6 shows how the control was added.
Listing 32.6. Using password controls.
<HTML>
<HEAD>
<TITLE>Learning About Password Controls</TITLE>
</HEAD>
<STYLE>
H1 {font: 35pt Times; color: blue}
H2 {font: 25pt Times; color: red}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
<BODY BGCOLOR="#FFFFFF">
<H1>Using Password Controls</H1>
<P>Password controls allow users to enter password information. All text
entered in a password control is seen as asterisks.</P>
<H2>Enter Your User Name and Password</H2>
<INPUT TYPE=TEXT NAME="userName" SIZE=8 MAXLENGTH=8>
<INPUT TYPE=PASSWORD NAME="userPassword" SIZE=8 MAXLENGTH=8>
<INPUT TYPE=BUTTON VALUE="Validate" NAME="inputButton">
<SCRIPT LANGUAGE="VBScript">
<!--
Sub inputButton_OnClick()
Dim Password
Password = userPassword.Value
If Len(Password) < 8 Then
Alert "Your password must be at least eight characters in length."
userPassword.Value = ""
End If
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.6 : Adding password controls to the page.
Events, methods, and attributes you can use with text controls
are shown in Table 32.6.
| Attributes | ||
| DefaultValue | ||
| Enabled | ||
| Form | ||
| Maxlength | ||
| Name | ||
| Size | ||
| Value |
VBScript is a powerful tool for adding interactivity to your pages. Still, there are times when you want to submit data to a server. Ideally, you would use VBScript to verify the data before submitting it, which eliminates the back-and-forth traffic between the client and server.
Submitting the contents of a VBScript-enhanced form to a server isn't much different than submitting a normal form. When you want to submit data to a server, you should insert your HTML controls in a FORM element:
<FORM NAME="myForm" ACTION="http://www.yourserver.com/feedback.pl" METHOD="GET" LANGUAGE="VBScript" OnSubmit="SubmitFeedback"> Insert HTML controls here. </FORM>
Just as with normal forms, the FORM element has an ACTION and a METHOD. To this, you add three attributes: Name, Language, and OnSubmit. The Name attribute gives the form a name so you can refer to it with a method in your script. The optional Language attribute identifies the scripting language, and the OnSubmit attribute specifies a subroutine to execute after the form is submitted. This subroutine is generally not the one that submits the form's contents to the server; rather, it's the subroutine executed after the contents are submitted to the server.
To submit the form to a server, add a button control to the form. Within a subroutine executed when the button is clicked, add a method reference to submit the form's contents, as shown in this example:
Sub custFeedback_OnClick document.frmFeedback.Submit
End Sub
Figure 32.7 shows a VBScript-enhanced form; the code for that page is given in Listing 32.7.
Listing 32.7. Submitting input to a server.
<HTML>
<HEAD>
<TITLE>Submit VBScript-Enhanced Forms to A Server</TITLE>
<STYLE>
H1 {font: 35pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
PRE {font: 14pt Courier; color: red;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Submitting Your Input is Easy</H1>
<FORM NAME="frmFeedback" ACTION="http://www.yourserver.com/feedback.pl"
METHOD="GET" LANGUAGE="VBScript" OnSubmit="SubmitFeedback">
<PRE>
Full Name: <INPUT NAME="customerName" SIZE=30>
Street Address: <INPUT NAME="customerAddress" SIZE=30>
City: <INPUT NAME="customerCity"SIZE=30>
State: <INPUT NAME="customerState"SIZE=30>
Zip Code: <INPUT NAME="customerZip"SIZE=10>
E-Mail: <INPUT NAME="customerEmail"SIZE=30>
</PRE>
<P><TEXTAREA NAME="feedbackWindow" ROWS=5 COLUMNS=65>
</TEXTAREA></P>
<INPUT TYPE="BUTTON" NAME="custFeedback" VALUE="Submit Feedback">
</FORM>
<HR SIZE=20 NOSHADE>
<SCRIPT LANGUAGE="VBScript">
<!--
dim addCrLf : addCrLf = Chr(13) & Chr(10) & Chr(13) & Chr(10)
Sub custFeedback_OnClick
If Len(document.frmFeedback.customerEmail.value) = 0 then
Alert "At a minimum, you must enter your e-mail address." & _
"This allows us to respond to your comments."
Else
Msgbox "Your feedback will be submitted with an action of " & _
document.frmFeedback.Action & addCrLf & _
"Click the OK button to confirm."
document.frmFeedback.Submit
End If
End Sub
Sub SubmitFeedback
MsgBox "Form was submitted."
MsgBox "The ACTION used is " & document.frmFeedback.Action & addCrLf & _
"The METHOD used is " & document.frmFeedback.Method & addCrLf & _
"The EncODING used is " & document.frmFeedback.Encoding & addCrLf & _
"The TARGET for results from server is " & document.frmFeedback.Target
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.7 : VBScript-enhanced feedback form.
| Note |
This listing contains the VBScript code continuation character. When you see the underscore at the end of a line, it means the line actually continues to the next line, but the programmer decided to break it up so it's easier to read. |
If you try to submit the form without filling in the required data, you'll see an alert box. (See Figure 32.8.) Although the current script looks only for the e-mail address, you can easily make other data entries mandatory, too.
Figure 32.8 : If you don't fill out the required fields, an alert box is displayed.
When you click the Submit Feedback button, you see the message box shown in Figure 32.9. Although this message box isn't essential to the script's working, it's an example of how you could let users verify that they wanted to submit the form.
Figure 32.9 : If you click the Submit Feedback button, a confirmation dialog box is shown.
An input box is another type of dialog box. (See Figure 32.10.) You can use input boxes to accept input from users and pass the information to your scripts. By default, all input boxes have an input area. To display an input box, use the InputBox function as follows:
InputBox "Please enter a message to display."
Figure 32.10: Input boxes can be used to gather information from visitors to your Web site.
Because you expect input from the user, you should always assign
the return value to a
variable:
userInput = InputBox ("Please enter a message to display.")
You can then evaluate the variable by using an If Then or Select Case structure, such as the following:
Select Case userInput
Case "A"
'Insert routine to handle this case
Case "B"
'Insert routine to handle this case
Case "C"
'Insert routine to handle this case
Case Else
'Insert routine to handle unknown or other category
End Select
Examine Listing 32.8 to see how input boxes can be used in scripts. By analyzing the script, you can see that an input box is continually displayed until the user enters a valid response. This is handled with a Do Until loop.
Listing 32.8. Getting input from the reader with an input box.
<HTML>
<HEAD>
<TITLE>Using Input Boxes</TITLE>
<STYLE>
H1 {font: 35pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Creating Input Boxes</H1>
<P>An input box is another type of dialog box. You can use input boxes
to accept input from users and pass the information to your scripts. By
default all input boxes have an input area.</P>
<P><INPUT TYPE="BUTTON" NAME="myinputBox" VALUE="Display Input Box"></P>
<HR SIZE=20 NOSHADE>
<SCRIPT LANGUAGE="VBScript">
<!--
dim addCrLf : addCrLf = Chr(13) & Chr(10) & Chr(13) & Chr(10)
Sub myinputBox_OnClick
fullName = InputBox ("Please enter your Full name and e-mail address.")
' Ensures the user enters valid information
Do Until fullName <> ""
fullName = InputBox ("You did not fill in the InputBox." & addCrLf & _
"Please enter your Full name and e-mail address.")
Loop
'Add call to routine that processes input here.
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Input boxes are very versatile and are similar to message boxes in that you can pass parameters to set different display aspects. The basic syntax for an input box is as follows:
userInput = InputBox ("The message to display", "Title for input box", "Default reponse",
x_position, y_position, helpFile, helpFileContext)
The first parameter you've seen many times before; you use it to specify the message to display.
The second parameter lets you specify a title for the input box, such as this:
userInput = InputBox ("Please verify with your user name.", "User Validation")
With the third parameter, you can specify a default response for the input box. Because users might want to erase the default text, it's always displayed in the input window. You can add a default response to an input box as follows:
userInput = InputBox ("Please verify with your user name.",
"User Validation", "Name: ")
By default, input boxes appear in a central position onscreen. The next two parameters allow you to specify the exact positioning of the input box when it's displayed. The x_position is the position on the horizontal axis, and the y_position is the one on the vertical axis.
The x/y coordinates are determined a little differently from what you may be used to. The upper-left corner of the user's screen is at coordinate (0,0). As you move out to the right in a straight line, the x coordinates grow larger, and as you move down in a straight line, the y coordinates grow larger. Here's an example of selecting the initial display position for the input box:
userInput = InputBox ("Please verify with your user name.",
"User Validation",, 0, 100)
| Note |
In the previous example, no default response is used. Because it uses parameters that follow the default response parameter, the parameter must still be accounted for, which is why you see two commas following the title information. |
The final parameters for the input box are used with help files. Just as you can specify a help file for message boxes, you can also specify one for input boxes.
Figure 32.11 shows how you could use an input box to validate a user's name. In this example, the validated user's name is echoed to a text control on the page. To see how this was done, examine Listing 32.9.
Listing 32.9. Validating input.
<HTML>
<HEAD>
<TITLE>Using Input Boxes</TITLE>
<STYLE>
H1 {font: 35pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Input Boxes</H1>
<P ALIGN=CENTER><INPUT TYPE="BUTTON" NAME="myInput"
VALUE="Please validate your user name."></P>
<FORM NAME="myForm">
<P>Returned Validation: <INPUT TYPE=TEXT NAME="textName" SIZE=50 MAXLENGTH=50>
</P>
</FORM>
<HR SIZE=20 NOSHADE>
<SCRIPT LANGUAGE="VBScript">
<!--
Dim addCrLf : addCrLf = Chr(13) & Chr(10) & Chr(13) & Chr(10)
Dim form
Set form = document.myForm
Sub myInput_OnClick
userInput = InputBox ("Please verify with your user name.", "User Validation")
' Ensures the user enters valid information
Do Until userInput <> ""
userInput = InputBox ("You did not fill in a response!" & addCrLf & _
"Please verify with your user name.", "User Validation")
Loop
form.textName.Value = "Your user name - " & userInput & _
" - has been verified."
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.11: Validating user input.
With VBScript, you can dynamically update the page when it's accessed.
You do this by
referring to a method of the document
object. This object has been used in several previous examples
when a script needed to refer to a form on the page, such as this:
Dim form Set form = document.myForm
In the sample code, a form called myForm
is referred to by a method call to the document
object:
<FORM NAME="myForm"> <P>Returned Validation: <INPUT TYPE=TEXT NAME="textName" SIZE=50 MAXLENGTH=50> </P> </FORM>
You can refer to objects of the form by name:
form.textName.Value = "Your user name - " & userInput & _
Although you can certainly refer to controls placed in forms, you can also write directly to the page. You do this by using the document.write method. If you write to a document, you should add HTML markup, as appropriate, in the method call. When the page shown in Listing 32.10 is loaded, the script is automatically executed and the dynamic write updates the page instantly.
Listing 32.10. Using document.write.
<HTML> <HEAD> <TITLE>Writing to Your Pages with VBScript</TITLE> </HEAD> <BODY> <H1>Hello</H1> <SCRIPT LANGUAGE="VBScript"> <!-- document.write "<H2>And welcome to my VBScript enhanced page!</H2>" --> </SCRIPT> </BODY> </HTML>
To see writing to a page in action, take a look at Figure 32.12.
This example uses several
dynamic writes and also uses the Now
function to display the current date and time. To see how this
was done, examine Listing 32.11.
Listing 32.11. Dynamic writing to Web pages.
<HTML>
<HEAD>
<TITLE>Writing to Your Pages with VBScript</TITLE>
<STYLE>
H1 {font: 35pt Times; color: blue}
P {font: 12pt Times; color: gray; text-indent: .5in; margin-right: 1in}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="VBScript">
<!--
document.write "<H1>Using document.write</H1>"
document.write "<P>With VBScript, you can dynamically update a page when it is" _
& "accessed. You do this by referencing a method of the document object.</P>"
document.write "<H2>You accessed this page at precisely: <BR><BR>" & Now & "</H2>"
-->
</SCRIPT>
</BODY>
</HTML>
Figure 32.12: Writing to documents dynamically.
Using the VBScript concepts you have learned, you can use dynamic writing to customize pages for users. One way to do this is shown in Figure 32.13. In this example, buttons on the page can be used to get customized information on a vacation package.
Figure 32.13: Click a button to get customized information.
Clicking a button updates the page. When you click the first button, the page is updated as shown in Figure 32.14. Examine Listing 32.12 to see how document.write was used to update the page dynamically.
Figure 32.14: Sample promotional information.
| Note |
When you update a page after it's downloaded, the new material replaces existing material. To compensate for this, you should include all the markup necessary to display the page as you want it to be displayed. In the example, you will see that the subroutines use a <BODY> tag that sets the background color to white. |
Listing 32.12. Customized information on demand.
<HTML>
<HEAD>
<TITLE>Using VBScript to Dynamically Update Pages</TITLE>
<STYLE>
.classB {font: 20pt Times;
color: black;
background: red;
margin: .1in}
.classA {font: 15pt Times;
font-weight: bold;
color: red;
background: black;
margin: .15in}
H2 { font: 30 pt Times; color: white}
</STYLE>
</HEAD>
<BODY BGCOLOR="Blue">
<IMG SRC="hawaii2.jpg" ALIGN="LEFT" BORDER="0">
<TABLE>
<TR><TH CLASS=classB>Extreme Sports Hawaii Getaways</TH>
<TR><TH CLASS=classA> </TH>
<TR><TH CLASS=classA>Vacation to the Max</TH>
<TR><TH CLASS=classA>Luxury and Style</TH>
<TR><TH CLASS=classA>On The Edge of Life</TH>
<TR><TH CLASS=classA>Gear up to Overdrive</TH>
<TR><TH CLASS=classA>You'll Never Forget</TH>
<TR><TH CLASS=classA> </TH>
</TABLE>
<BR CLEAR=ALL>
<DIV ALIGN=CENTER>
<H2 ALIGN=CENTER>More Information For Your Extreme Vacation Now!</H2>
<P><INPUT TYPE=BUTTON VALUE="Downhill Mountain Biking at 60 MPH"
NAME="m1Vacation"></P>
<P><INPUT TYPE=BUTTON VALUE="Surf Boarding From a 20,000 Ft Sky Dive"
NAME="s1Vacation"></P>
<P><INPUT TYPE=BUTTON VALUE="Surf's Up Combo: Wind Surfing,
Surf Boarding and Paragliding" NAME="s2Vacation"></P>
</DIV>
<SCRIPT LANGUAGE="VBScript">
<!-- Option Explicit
Sub m1Vacation_OnClick()
document.write "<BODY BGCOLOR=White>"
document.write "<HR SIZE=10 NOSHADE>"
document.write "<H2 ALIGN=CENTER>Downhill Mountain Biking at 60 MPH</H2>"
document.write "<H2 ALIGN=CENTER>Speed = Ultimate Thrill</H2>"
document.write "<H3 ALIGN=Right>Experience a thrill few have ever tasted!</H3>"
document.write "<H3 ALIGN=Left> Race downhill at speeds up to 60
miles per hour!</H3>"
document.write "<H3 ALIGN=Right>Hear the wind in your ears!</H3>"
document.write "<H3 ALIGN=Left>Watch life rush past your eyes!</H3>"
document.write "<P> </P>"
document.write "<H3 ALIGN=CENTER><A HREF=31samp13.htm>Make Your
Reservations Today!</A></H3>"
document.write "<HR SIZE=10 NOSHADE>"
End Sub
Sub s1Vacation_OnClick()
document.write "<BODY BGCOLOR=White>"
document.write "<HR SIZE=10 NOSHADE>"
document.write "<H2 ALIGN=CENTER>Surf Boarding From a 20,000 Ft Sky Dive</H2>"
document.write "<H2 ALIGN=CENTER>Altitude = Maximum Challenge</H2>"
document.write "<H3 ALIGN=Right>Experience a thrill few have ever tasted!</H3>"
document.write "<H3 ALIGN=Left> Sky surf while racing toward Earth!</H3>"
document.write "<H3 ALIGN=Right>Spin a 360!</H3>"
document.write "<H3 ALIGN=Left>Hear the wind in your ears!</H3>"
document.write "<P> </P>"
document.write "<H3 ALIGN=CENTER><A HREF=31samp13.htm>Make Your
Reservations Today!</A></H3>"
document.write "<HR SIZE=10 NOSHADE>"
End Sub
Sub s2Vacation_OnClick()
document.write "<BODY BGCOLOR=White>"
document.write "<HR SIZE=10 NOSHADE>"
document.write "<H2 ALIGN=CENTER>Surf's Up Combo: Wind Surfing, Surf
Boarding and Paragliding</H2>"
document.write "<H2 ALIGN=CENTER>Combo = Thrills X 3</H2>"
document.write "<H3 ALIGN=Right>Wind surf Maui's Best Shores!</H3>"
document.write "<H3 ALIGN=Left> Surf the Pipeline on the North
Shore of Oahu!</H3>"
document.write "<H3 ALIGN=Right>Paraglide in Honolulu!</H3>"
document.write "<P> </P>"
document.write "<H3 ALIGN=CENTER><A HREF=31samp13.htm>Make Your
Reservations Today!</A></H3>"
document.write "<HR SIZE=10 NOSHADE>"
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Enhancing your Web pages with VBScript is easy. With HTML controls, you can create interactive buttons, text areas, checkboxes, and much more. Because VBScript takes advantage of existing HTML controls, you can easily perform complex tasks, such as validating form input. You can even submit your input to a server for processing after validation.
Another way to collect information from users is with input boxes, which let you prompt users for information that can be passed back to your script. VBScript also allows you to dynamically update pages based on user input so you can customize pages instantly.
