How VBScript Interacts with Forms

HTML forms currently put a great deal of the processing burden on the server. Not only must the server dish out the form in the first place, but it must also validate the submitted data, massage the information, and return another Web page. Your VBScript code can help relieve at least a little of that burden by implementing one or both of the following:

• Validating the data before it gets sent to the server: As you'll see a bit later, form controls are just objects to VBScript. Therefore, your code can check the value of any field to see if it falls within the correct parameters. If it doesn't, VBScript can delay the submission until the user enters the correct data.
• Performing calculations or other functions within the page: Again, since VBScript can easily manipulate the contents of a field, it can assume some duties that would otherwise fall to the server. For example, if your form makes calculations, VBScript can perform those calculations on-the-fly without having to submit the form.

The Form Object

A Form object is a scripting object model representation of a Web page form, which means every object between (and including) the <FORM> and </FORM> tags. For pages with multiple forms, the Forms collection represents all the Form objects in the page.

To reference a Form object in your code, you have two choices:

• Use an index with the Forms object. For example, document.forms(0) refers to the first Form object in the page.
• Use the name of the form as defined by the NAME attribute in the <FORM> tag. For example, if a form has been set up with <FORM NAME="MyForm">, you could reference this form with the statement document.MyForm.

Form Properties

action: Returns or sets the URL that is used to submit the form. This is equivalent to the ACTION attribute in the <FORM> tag.

encoding: Returns or sets the form encoding (for example, text/html). This is equivalent to the <FORM> tag's ENCTYPE attribute.

method: Returns or sets the method used to submit the form. This is equivalent to the METHOD attribute in the <FORM> tag.

target: This property sets the target window for the form output. This is identical to setting the TARGET attribute in the <FORM> tag.

The following statements use these properties to adjust how the form will be sent:

document.MyForm.action = "http://www.server.com/cgi-bin/process.exe"
document.MyForm.encoding = "text/html"
document.MyForm.method = "POST"
document.MyForm.target = "resultsWindow"

Submitting a Form

A form is sent to the server when the user clicks a "submit" button. In VBScript, you can send a form to the server any time you like by invoking the Form object's submit method.

Note, too, that Form objects also recognize the onSubmit event. This event is fired, naturally enough, whenever a form is submitted to the server. This lets you set up an event handler to process or check the form data before passing it along to the server. For example, the following statement specifies that VBScript should run the ValidateIt procedure whenever the user (or your script) attempts to submit the form:

document.MyForm.onsubmit = "ValidateIt()"

The problem with setting up an onSubmit event handler in this manner is that you have no way to bail out of the submission if there's an error or some other anomaly. If you would like the ability to cancel a submission, you must include the return keyword in the onSubmit specification:

document.MyForm.onsubmit = "return ValidateIt()"

Here, ValidateIt must be a Function procedure that returns a Boolean value (True or False). If the procedure returns True, the submission continues. However, if the procedure returns False, the submission is aborted and the user stays with the form.

Dealing with Form Controls

The Form object has an elements property that is a collection of all the controls inside the form. These controls include not only the standard HTML controls, but also any objects inserted with the <OBJECT> tag (such as ActiveX controls).

You can use the elements collection to refer to a control by its index number (where the first control is 0, the second control is 1, and so on). However, this method makes your code difficult to read. Instead, you should name each control, either by using the NAME attribute in an HTML control or by using the ID attribute in an <OBJECT> tag. For example, if you have a command button named cmdOK on a form named MyForm, you can reference this button as document.MyForm.cmdOK.

Control Properties

The various types of controls have their own set of properties, some of which are common among all controls, and some of which are unique to each control. Most of these properties are straightforward, so here's a quick run-through:

checked: For a check box or option button, this property returns or sets the state of the specified control (where 1 or True means the control is activated, and 0 or False means the control is deactivated). For example, you could use the following statements to toggle the state of a check box on or off:

Set cb = document.MyForm.CheckBox1
cb.checked = Not cb.checked

TIP: USE OBJECT VARIABLES FOR SHORTER CODE

In the checked example, notice how I Set a variable named cb to the check box object given by document.MyForm.CheckBox1. This is always a good idea if the object's reference is long-winded and you'll be referring to the object more than once.

defaultChecked: Returns or sets the default state of a check box or option button.

defaultValue: Returns or sets the default value of the control.

form: Returns the Form object in which the control resides.

length: In a list (that is, a <SELECT> control), this property returns the number of items in the list.

name: Returns or sets the control name.

value: Returns or sets the value of the specified control.

selectedIndex: For a list, this property returns the selected item.

Control Methods

blur: Removes the focus from the specified control.

click: Clicks the control.

focus: Gives the specified control the focus.

select: Selects the contents of a TEXT, TEXTAREA, or PASSWORD control.

Control Events

For the first method, you include an ONEVENT attribute in the control's <INPUT> tag. Here, the EVENT part is the name of the event you want to trap. For the Click event, you would use the ONCLICK attribute, like so:

<INPUT TYPE=BUTTON NAME="cmdCalc" VALUE="Calculate" ONCLICK="DoIt">
<SCRIPT LANGUAGE="VBScript">
Sub DoIt
    Event handler code goes here.
End Sub
</SCRIPT>

In this case, the DoIt procedure executes whenever the user clicks the cmdCalc button.

For the second method, you add FOR and EVENT attributes to a separate <SCRIPT> tag. The FOR attribute specifies the name of the control, and the EVENT attribute specifies the event you want to trap. Here's an example:

<INPUT TYPE=BUTTON NAME="cmdCalc" VALUE="Calculate">
<SCRIPT FOR="cmdCalc" EVENT="onClick" LANGUAGE="VBScript">
    Event handler code goes here.
</SCRIPT>

Here's a summary of the control events you can trap in this manner:

onBlur: Fires when the specified control loses the focus.

onChange: Fires when the value of the control changes.

onClick: Fires when the user clicks the control.

onFocus: Fires when the specified control gets the focus.

onSelect: Fires when the contents of a TEXT, TEXTAREA, or PASSWORD control are selected.

Copyright © 1995-2008 Paul McFedries and Logophilia Limited