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.

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:

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

<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.

<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 '-->

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.

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.

<--webbot bot="HTMLMarkup" startspan --><--webbot bot="HTMLMarkup" endspan --> <SCRIPT type="text/vbscript" language="VBScript"> <-- Dim SPre Dim EPre SPre1 = "

"
    SPre2 = "
"
    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
    -->
      

    
<--webbot bot="Navigation" S-Type="arrows" S-Orientation="horizontal" S-Rendering="text" B-Include-Home="FALSE" B-Include-Up="TRUE" U-Page S-Target -->
    
 
    <SCRIPT SRC="http://library.thinkquest.org/tq-admin/tqtrailer.js">