The Element object is an indexed array containing information about specific form elements present in the document.
| Properties | Methods | Events |
| checked, defaultChecked, defaultValue, form**, length, name, options, selectedIndex, type* | blur, click, focus, select | OnBlur, OnChange, OnClick, OnFocus, OnSelect |
NOTE : The Element object covers all of the possible valid <FORM> elements. Here, the object has been broken down into the properties, methods and values. Not all the possible elements support all of the properties (or method/events). Details of which elements are supported will be given with appropriate property, method or event.
Element Properties
checked
applies to : checkbox, radio
The checked property can be used to determine (or set) whether a checkbox, or radio button is checked. For example, assume we have a form laid out that has a checkbox called mailList
if (document.forms(0).mailList.checked) then
. . . other code . . .
The above would run the code (in the 'other code' section) if the checkbox was checked.
defaultchecked
applies to : checkbox, radio (Netscape only)
The defaultChecked property returns, or sets whether the particular element is checked by default or not (checkboxes and radio buttons can be set to be checked by default using standard HTML - see the <INPUT> element for more information).
defaultValue
applies to : password, text, textarea
This property determines (or can be used to set) the default text displayed in the elements that it is supported by. For example :
vText=document.forms.email.defaultValue
sets vText to be the default text set in the particular form element that is called email (this can be a password, text or textarea box).
form
applies to : all elements (except select and hidden)
The form property can be used to determine the name of the form that contains the particular element. For example, suppose you had two forms that contained a common text box called email, but you needed the script to act differently according to which form the text was in :
if (email.form="Form1") then
. . .some code. . .
else
. . .some other code. . .
would execute the 'some code' if the particular form was called 'Form1', executing the 'some other code' if it isn't.
NOTE : although this is detailed in official documentation, on testing, it didn't seem to work.
length
applies to : select
The length property returns a number giving the number of various options (<OPTION>) in a select element (<SELECT>). See the options property below for more information about the options array properties.
name
applies to : all elements
The name property can be used to determine of any element in the form. For example :
vName=document.forms(0).elements(0).name
sets vName to the name of the the first forms first element.
options
applies to : select
The options property is actually an array, containing an entry for each of the <OPTION> elements specified within a <SELECT> element. It has the following properties :
SELECTED attribute of the <OPTION> element contained within the <SELECT> element.
length returns the number of options in the options array.
<SELECT> element containing the options.
defaultSelected property.
selectedIndex can be).
selectedIndex
applies to : select
The selectedIndex property returns the array index of the option selected from the <SELECT> element. (See SelecetedIndex property in the options array above).
type
applies to : all elements (Netscape only)
This Netscape specific property reflects the type attribute for the particular form element. For example :
vType=document.forms[0].elements[2].type
would set the variable vType to the first forms third element type (e.g. radio, file, button, checkbox etc.)
Element Methods
blur
applies to : password, text, textarea, select
The blur method can be used to force focus away from a particular element.
click
applies to : button, reset, submit, checkbox, radio
This method can be used to force an OnClick event handler to be executed. Essentially, it can be used to mimick the user clicking on any of the supported elements. For example, consider a document that contains an ActiveX timer control, set to execute it's Timer event in 30 seconds :
Sub ActiveXTimer_Timer()
document.forms(0).submit.click
End Sub
...
Sub Submit_OnClick
document.forms(0).submit
alert "You ran out of time...the form has been submitted"
End Sub
The above code fragment would execute the timers Timer event after 30 seconds, which would force the submit button click method, which in turn executes the Submit_OnClick event, submitting the form and alerting the user that they ran out of time. While this may see a trivial example, such a method could be used in form based questioning, where the user has only a certain time to fill out the form.
focus
applies to : password, text, textarea, select
The focus method can be used to force the users focus to a particular element. For an example, see the OnBlur event below.
select
applies to : password, text, textarea
The select method selects the contents of the element. The example given below in the OnBlur event could easily be tweaked to force the textbox contents to be selected if the user doesn't enter at least 5 digits, by substituting focus for select
Element Events
OnBlur
applies to : select, text, textarea
This event handler can be used to execute script functions when the user moves focus away from the particular element. The example given below forces the users focus back to the text element if they haven't entered 5 digits before moving the focus away to another element.
Sub phone_OnBlur
if len(document.form1.phone.value)<5 then
alert "Not enough numbers"
document.form1.phone.focus
end if
End Sub
Try it. Enter a number, then click away from the text box.
OnChange
applies to : select, text, textarea
The OnChange method can be used to execute script functions whenever the contents of the particular element are changed. It is only executed if the user changes the value of the element, then moves the focus away. The example above could easily be changed to use the OnChange event instead of OnBlur, and would then check the number of digits, alerting the user if they've entered too few. However, if they entered too few digits, received the warning, then moved away again (without changing their entry), no further warnings would be given, until the text in the text box is actually changed.
OnClick
applies to : button, reset, submit, checkbox, radio
The OnClick event executes script functions when the user clicks any of the supported elements. For example :
<INPUT TYPE="button" VALUE="Try it out!" NAME="egClick">
<SCRIPT LANGUAGE="VBScript">
Sub egClick_OnClick
alert "You clicked me"
End Sub
</SCRIPT>
OnFocus
applies to : select, text, textarea
The OnFocus event can be used to execute script functions when the user moves their focus to the particular element.
OnSelect
applies to : text, textarea
The OnSelect event handler can be used to execute script functions when the user selects some text in the textbox. NOTE :