Working with Form Elements

Every Web page containing forms exposes a document.forms collection, which is an array of forms on the page. Each <form> block in the page can be therefore referred to by number, where document.forms[0] refers to the first <form> block on the page, document.forms[1] refers to the second form, and so on. The number of forms is always available as document.forms.length.

If a <form> tag includes a name attribute, you can also refer to it by name as a property of the document object. So, if a page includes a single form that has a name="SignupForm" attribute, you can refer to the form as either document.forms[0] or document.SignupForm.

Each form element (text inputs, select boxes, checkboxes, and so on) within a form can be referred to by name. So, if a form named SignupForm contains a text input field with a name="FirstName" attribute, then that element can be referred to as document.forms[0].FirstName or document. SignupForm.FirstName.

Table 17.10 shows the most important properties available for controlling each type of form element via JavaScript, where "most important" means the properties you need to use to obtain or change the element's value. In this table, element refers to the element object, so you would replace element with document.forms[0].elementname, where elementname corresponds to the NAME attribute of the <input>, <select>, or <textarea> element in question.

Table 17.10. Accessing the Value of Form Fields via Script

FORM ELEMENT	DESCRIPTION
Text input fields	To get the current value of a text field, use the element.value property. To change the text in a text field, just set element.value to the desired value. This applies to elements created with <input type="Text"> or <textarea>.
Hidden fields	You can also use element.value to get or set the value of hidden fields. Of course, there will be no visual reflection of any change you make to the value, but the new value should will be available to the server if the form is submitted.
Select boxes	There is no value property for <select> elements. Instead, you use element.selectedIndex to find which <option> is selected; selectedIndex is 0 if the first option is selected, 1 if the second option is selected, and so on (if no items are selected, selectedIndex is -1). The element.options collection is an array of the element's options, each of which has a text and value property, which means that element.options [element.selectedIndex].value corresponds to the value attribute of the currently selected <option>. Similarly, element.options [element.selectedIndex].text is the text between the <option> tags for the current selection.
Checkboxes	If the checkbox has a name attribute that is unique to the form, you can find out whether it is checked using the element.checked boolean property, and you can access its value attribute using element.value. If there is more than one checkbox with the same name, then element becomes a collection (basically an array), where each element in the array represents one of the checkboxes. The number of checkboxes in the collection is available as element.length; element[0].checked reflects whether the first checkbox in the group is checked; element[1].value holds the second checkbox's value, and so on.
Radio buttons	For purposes of scripting, radio buttons behave just like checkboxes (above).
The form itself	You can discover or change the page the form submits to (that is, the value of the action attribute) using the formelement.action property. The formelement.elements collection is an array of all form elements (text inputs, checkboxes, hidden fields, and so on) contained within the form; you can iterate through this array in a for loop if you want to do something to each element or find out what fields are actually in the form at runtime. You can also submit the form programmatically using the formelement.submit() method.

NOTE

Always remember that JavaScript is case-sensitive, so if you have an <input> with a name="FirstName" attribute, you can replace element in this table with document.forms[0].FirstName but not document.forms[0].firstname or Document.Forms[0].Firstname.

So, if a page contains a single form with a name attribute of SignupForm, and the form contains a text field called FirstName and a drop-down list (select box) called CCType, then the following line of JavaScript would change the value of the FirstName field to "Nate":

 document.forms[0].FirstName.value = "Nate"; 

The following if block would execute only if the first element of the CCType dropdown is currently selected, or if no selection has been made at all:

 if (document["SignupForm"].CCType.selectedIndex < 1) {  alert("Don't leave the credit card type blank!"); } 

The following would get the value of the currently selected option in the drop-down list (. In an actual code file, this should be all on one line, but it's too long to print in this book):

 document["SignupForm"].CCType.options[  document["SignupForm"].CCType.selectedIndex].value 

You can use JavaScript's with statement to make that last snippet a little easier to type and read, like so:

 with (document["SignupForm"].CCType) {  options[selectedIndex].value; } 

Note that if the <select> allows multiple selections via the multiple attribute, you must iterate through the element.options array, accessing each option's selected property to find out whether it is selected. The number of options is always available as element.options.length, so the following snippet would allow you to perform some action for each selected option:

 with (document["SignupForm"].CCType) {  for (var i = 0; i < options.length; i++) {  if ( options[i].selected ) {  // ...your code here...  }  } } 

You will see further examples of working with form fields in nearly every example listing in this chapter.