[ Layout ] [ Multimedia ] [ Programming ] [ Scripting ] [ Communicate ] [ Navigation ]

Chapter 4

[ Up ] [ Chapter 1 ] [ Chapter 2 ] [ Chapter 3 ] [ Chapter 4 ] [ Chapter 5 ]

 

Frames and Forms and Elements, Oh My!

One of the most common uses of scripting is to respond to events from a form, such as typing text into a text box or checking data when the Submit button is pressed. There are two ways to reference form elements. First, you can reference them through the Object Model. Document.Form(0).Elements(1).Value refers to the Value property of the second element in the first form on the page. You can determine the number of forms in the page using Document.Forms.Count, and can determine the number of elements in the first form using Document.Forms(0).Elements.Count.

This is an awkward way of referring to elements. Instead, if you include a Name attribute in the form and element's HTML tags, you can refer to it by that.

<FORM NAME="aForm">
<INPUT TYPE="TEXT" NAME="txtGreet">
</FORM>
This element's Value could be referenced using aForm.txtGreet.Value

Unless you are write exclusively for IE4+, you should always put form elements in a form, and use the NAME attribute for them rather than the ID attribute.

Form elements expose both properties and events. The following example shows this.

Sub txtFred_OnFocus()
    With aForm.txtGreet
        If .Value = "Hello" Then
            .Value = "Goodbye"
        Else
            .Value = "Hello"
        End If
    End With
End Sub

The onFocus event fires whenever the element becomes active for input, such as by clicking it or tabbing to it. With is a keyword which allows the use of relative references. Normally, it would be necessary to use aForm.txtGreet.Value all three times, but it is much simpler to use with. Another way to do this would be to use the Set keyword. It makes a variable into a shortcut to another object. Ex:

Sub txtFred_OnFocus()
    Dim theCtl
    Set theCtl = aForm.txtGreet
        If theCtl.Value = "Hello" Then
            theCtl.Value = "Goodbye"
        Else
            theCtl.Value = "Hello"
        End If
    End With
End Sub

Here is an example of using VBScript to check user form input.

<SCRIPT TYPE="text/vbscript" LANGUAGE="VBScript">
<!--
Function lycosForm_OnSubmit()
    If Len(lycosForm.query.Value) = 0 Then
        lycosForm_OnSubmit = False
        Alert "You must enter a keyword."
        Exit Function
    End If
    If lycosForm.cat.Value = "null" Then
        lycosForm_OnSubmit = False
        Alert "You must choose a search type."
        Exit Function
    End If
End Function
'-->
</SCRIPT>

<form action="http://www.lycos.com/cgi-bin/pursuit" method=GET NAME="lycosForm">
Search
<SELECT NAME="cat">
<OPTION value="null">Please Choose a Search Type</OPTION>
<OPTION value="lycos">The Web</OPTION>
<OPTION value="sounds">Sounds</OPTION>
<OPTION value="graphics">Pictures</OPTION>
<OPTION value="point">TOP 5%</OPTION>
</SELECT> for:<INPUT TYPE="text" NAME="query" VALUE="" SIZE=22>
<input type="submit" value="Go Get It"></form>

And here is the result. A form which searches Lycos, but won't submit unless you've chosen a search type, and typed in a keyword.

Search for:

Note: This is a variation of the search form that Lycos makes available for use on other people's pages.

Notice that here, I treated the event as a Function rather than a Sub. Is you want to be able to cancel an event, that is how you do it, by making it a function and then returning either True or False, False canceling the event.

Window.Frames is like Document.Forms, in that it can contain multiple instances that can be referred to by name or index, and has a Count property.  The difference is that while Forms contain Elements, Frames contain a Document object.

Frames are much like windows. The contain a document, and can contain other frames. In fact, in almost all ways, you can treat a frame as if it was a window.

You can refer from one frame to another by using the Window.Parent object. It points at the window above it.

To see an example of one frame effecting another, link here. To view the source for this example, link here.

Frames are supported in NN2+ and IE3+, and are part of the HTML4 specification. For scripting, though, floating frames are even more useful than regular frames. The IFRAME tag allows you to make a frame which sits in the middle of a page, like an image. It is supported by IE3+, and is not part of HTML4. They are referred to in the same way as regular frames.

Below is an example of a scripted floating frame.

"
SPre3 = "
"
SPre4 = "
"
SPre5 = "
"
EPre = "<" & Chr(47) & "PRE><" & Chr(47) & "BODY>"
Sub AnimHelloFrame1
	Window.fraHello.Document.Write SPre1 & "H    " & EPre
	Window.fraHello.Document.Close	
	SetTimeOut "AnimHelloFrame2 True", 250, "VBScript"
End Sub
Sub AnimHelloFrame2(forw)
	Window.fraHello.Document.Write SPre2 & "He   " & EPre
	Window.fraHello.Document.Close	
	If forw Then
		SetTimeOut "AnimHelloFrame3 True", 250, "VBScript"
	Else
		SetTimeOut "AnimHelloFrame1", 250, "VBScript"
	End If
End Sub
Sub AnimHelloFrame3(forw)
	Window.fraHello.Document.Write SPre3 & "Hel  " & EPre
	Window.fraHello.Document.Close	
	If forw Then
		SetTimeOut "AnimHelloFrame4 True", 250, "VBScript"
	Else
		SetTimeOut "AnimHelloFrame2 False", 250, "VBScript"
	End If
End Sub
Sub AnimHelloFrame4(forw)
	Window.fraHello.Document.Write SPre4 & "Hell " & EPre
	Window.fraHello.Document.Close	
	If forw Then
		SetTimeOut "AnimHelloFrame5", 250, "VBScript"
	Else
		SetTimeOut "AnimHelloFrame3 False", 250, "VBScript"
	End If
End Sub
Sub AnimHelloFrame5
	Window.fraHello.Document.Write SPre5 & "Hello" & EPre
	Window.fraHello.Document.Close	
	SetTimeOut "AnimHelloFrame4 False", 250, "VBScript"
End Sub
Sub Window_OnLoad()
	AnimHelloFrame1
End Sub
-->
 



[ Back ] [ Up ] [ Next ]
[ Layout ] [ Multimedia ] [ Programming ] [ Scripting ] [ Communicate ] [ Navigation ]
[ Chapter 1 ] [ Chapter 2 ] [ Chapter 3 ] [ Chapter 4 ] [ Chapter 5 ]

The Web Wizard's Spellbook © 1998, Team WWS