Building Forms with JavaScript

Previous	Table of Contents	Next
JavaScript Timeouts		Understanding JavaScript Cookies

---

<google>BUY_JAVASCRIPT</google>

The ability to interact with, and obtain information from web site visitors, is a central theme behind the JavaScript language. No JavaScript book would be complete therefore, without exploring how to handle Graphical User Interface Components (GUI) objects such as buttons, text input fields, checkboxes, radio boxes and selections, together with the Form object which brings them all together.

The HTML Form object serves a number of purposes. It acts a container for all of the GUI objects that make up a form. It also acts as the mechanism for grouping together the information provided by the user and sending it back to the server for processing.

The <form> takes a number of attributes of which the following are the most commonly used:

• name - the name of the form, which will be used when referencing objects within the form using JavaScript code.

• method - the method by which data is sent to the server. This will either be "GET" or "POST" depending on the server-side configuration.

• action - the URL of the CGI script to which the data entered by the user will be sent. It is also possible to use mailto: to have the data sent to an email address.

• onsubmit - an optional function to call, or inline script to execute before the form data is submitted to the server. This can be useful for validating user input.

The following is an example of a Form object named registerForm which submits the user data to a cgi script called register.cgi located in the /cgi-bin directory on the server which hosts the web site. The transfer is configured to use the GET method:

<form name="registerForm" method="GET" action="/cgi-bin/register.cgi">

<-- Form Objects go here -->

</form>

As we mentioned in the previous section, the Form object is really just a container which contains other objects (such as text fields and buttons). Later in the chapter we will learn how to create those objects inside the Form object. First, however, it is useful to explore how to access the objects in a Form.

One way to access the elements in a Form is to use the Form object's elements property. This is an array containing all the objects in a Form (see JavaScript Arrays for details on arrays). We can, therefore, access any element in the array by using the index (note that the objects in the array are in the order in which they are specified in the Form). Suppose we have a text object which is the first object inside a Form called myForm:

<form action="" name="myForm">
<input type="TEXT" name="phoneNumber" id="phoneNumber" value="" />
</form>

We can access this object as follows:

document.myForm.elements[0];

We can then extend this to get the current value entered into the text object:

textValue = document.myForm.elements[0].value;

A much easier approach is to access the object using the name that was assigned to it at creation. This is achieved using the getElementById() method. Assuming in our first example the Text object was assigned a name of phoneNumber we could assign the object to a variable as follows:

phone = document.getElementById("phoneNumber");

We can then subsequently use the phone variable to access the current text value entered into the text field object:

document.write ( "The text is " + phone.value );

Now that we have covered the basics of the JavaScript Form Object it is time to look at the objects we can place into the Form container to interact with the user. The most common of these objects is the Text object. The Text object places a single line text field into the form into which the user can type information (such a name, address or telephone number).

The syntax for creating a text object within a Form is as follows:

<input type="TEXT" name="objectname" id="object id" value="current value" size="30" event handling>

• type - specifies that the type of object is a TEXT object.

• name - represents the name by which this object may be reference in JavaScript.

• id - the id used when accessing Form object elements using the getElementById() method (described later in this chapter)

• value - primes the text object with an initial value (optional).

• size - specifies the maximum number of characters that can be entered into the Text field.

event handling specifies what action to take when a particular event on the object is triggered. Events that can be triggered by the Text object are:

• onFocus - triggered when the text field gains focus (typically when the cursor is moved into the field to begin typing).

• onBlur - triggered when the text field loses focus (typically when the user clicks somewhere outside the text area).

• onChange - triggered when the contents of the text area is changed by the user and focus is lost.

• onSelect - triggered when the user highlights text in the text field.

In addition to events, the Text object also has a number of methods that can be accessed to perform such tasks as selecting text and changing focus:

• focus() - sets focus and sets the cursor on the text field

• blur() - Removes focus from the field (the opposite of focus())

• select() - Selects the text in the field so that when the user types all the existing text is replaced.

Now that we have covered some of the basics of building a FORM we can bring some of these concepts together in an example using the text object. The following example creates a Form containing a text field. When the user clicks in the text field the onFocus event is triggered which, in turn, calls the select() method to highlight the text in the field. Note that since we are referencing the current object when calling the select() method we can use the this keyword to refer to the current object:

<html>
<head>
<title>JavaScript Form Example</title>
<script language=javascript type="text/javascript">
function buttonPressed()
{
    // document.write ( document.myForm.elements[0].value );
    var phone = document.getElementById("myText");

    document.write ( phone.value );
}
</script>
</head>

<body>

<form action="" name="myForm">
<input type="TEXT" name="myText" id="myText" value="Some text" onFocus="this.select()"/>
</form>

</body>
</html>

The TextArea object is created using the <textarea> tag and differs from the Text object in that it allows multiple lines of text to be entered by the user. Additional attributes allow control over such issues as the size of the TextArea defined in terms of row and columns, whether the text should wrap or not and whether the TextArea should be read-only or not.

There are two options for the wrap attribute, virtual and physical. When set to virtual the TextArea object will wrap text at the end of each line as it is entered by the user but the actual text stored in the value will not contain any carriage returns unless the user specifically enters one while typing. The physical setting also wraps automatically as text is entered, but this time a carriage return is also inserted into the text.

The following is an example of using the TextArea object with pre-set dimensions and wrapping enabled:

<textarea name="myTextArea" rows="10" cols="60" wrap="virtual">
This is some default text
</textarea>

In the above example you will see some text before the closing </textarea> tag. If provided, this represents the text to be displayed by default in the TextArea object.

Next to the Text object the Button object is probably the second most commonly used GUI component when developing JavaScript forms. There are three types of Button object available. As with the Text object the Button objects use the <input> tag. The type= attribute is then used to define which type of button is to be created. The three different types are:

• type="BUTTON" - The basic button which performs no action by default unless an event handler is assigned to it.

• type="SUBMIT" - The submit button. When pressed this button causes the data in the Form to be sent to the server using the settings defined in the enclosing <Form> tag. If the onsubmit attribute on the enclosing <form> tag has been specified this will be executed before the form data is submitted (useful for form data validation).

• type="RESET" - The reset button. When pressed causes the fields in the Form to be either cleared, or reset to the defaultValue (if one has been specified).

A submit button can be created as follows:

<form name="registerForm" method="GET" action="/cgi-bin/register.cgi">

   <input type="TEXT" name="myName"  value=""/>
   <input type="TEXT" name="myPhone"  value=""/>
   <input type="SUBMIT" name="buttonName" value="Click here to submit information">

</form>

When the submit button is pressed in the above example the data in the two Text fields will be submitted to the register.cgi script specified in the <form> tag.

The generic "BUTTON" type can be defined as follows:

<form name="registerForm" method="GET" action="/cgi-bin/register.cgi">

   <input type="TEXT" name="myName"  value=""/>
   <input type="TEXT" name="myPhone"  value=""/>
   <input type="BUTTON" name="buttonName" value="Product codes" onClick="showCodes()">

</form>

In this case we have configured the button to call a function when it is pressed. This function could, for example, pop up a window containing a description or product code list.

The Check Box object creates a small square that changes between a checked and unchecked state when clicked. Check Boxes are ideal for providing the user with a "Yes" or "No" choice.

The Check Box object uses the <input> tag as follows:

<form action="" name="orderForm">
<input type="CHECKBOX" name="mailListBox" checked>Add me to the mailing List.
</form>

The checked attribute states whether the box should be checked by default when it is first created.

The current setting of a CheckBox can be obtained by accessing the checked property of the object. For example:

if (document.orderForm.mailListBox.checked)
{
     addToMailingList();
}

You can also change the state of a Check Box by explicitly setting the checked property:

document.orderForm.mailListBox.checked = false;

The Check Box object has one event, onClick, which is triggered when the user clicks on the box, and one method, click(), which simulates a user click when called.

The Radio Button object takes its name from the buttons on an old radio. In the old days a radio would a have a number of buttons for making selections (such as frequency band). Depressing one button would cause the currently selected button to pop up, thereby ensuring that only one button was pressed at any one time. JavaScript Radio Buttons provide a similar functionality for situations where a "one of many" choice is to be presented to the user.

The syntax for creating a group of Radio Buttons is as follows:

<form action="" name="orderForm">
   <input type="RADIO" name="myColor" value="Red" checked> Red
   <input type="RADIO" name="myColor" value="Green"> Green
   <input type="RADIO" name="myColor" value="Blue"> Blue
</form>

The above statements create a Radio Box group containing 3 Radio Buttons:

All three button share the same name attribute which acts to tie them together into a group. The value attribute defines the value that is passed through to the server to indicate which button is selected when the form is submitted.

There are number of actions that can be performed in JavaScript when working with Radio Buttons. Firstly, you can find out the number of Radio Buttons in a group by accessing the length property:

var numButtons = document.orderForm.myColor.length;

Secondly you can change the value of an individual button:

document.orderForm.myColor[0].checked = true;

Note: Programmatically changing the value of one Radio Button in a group using the above technique will not automatically uncheck the currently checked button (as it would if a user really clicked on it). You must, therefore, remember to programmatically change the checked status of the other buttons.

The Select object provides a drop down list of choices from which the user can choose (often referred to as ComboBoxes in other GUI environments). When the drop down list is not visible the current selection is displayed in a text area. Due to the fact that the Select Object supports both single and multiple selection of items in the list it is ideal for both "one of many" and "many of many" selection choices.

The Select Object uses the <select> tag together with <option> tags representing the choices to be displayed in the drop-down list:

<select name="carBrands">
<option value="Ford" SELECTED>Ford Motor Company
<option value="GM">General Motors
<option value="Honda">Honda Motor Company
</select>

The above example will create a Selection object that appears as follows. The image on the left shows the Select object before the user clicks on it. The image on the right shows the drop-down list as it appears after the object has been clicked:

If the size attrtibute is specified and set to a value greater than 1 then a scrolled list, instead of a drop down list, will be displayed with a scrollbar for scrolling through the list of options. For example:

<select name="carBrands" size=5>
<option value="Ford" SELECTED>Ford Motor Company
<option value="GM">General Motors
<option value="Honda">Honda Motor Company
<option value="Toyota">Toyota Motor Company
<option value="Ford">Jaguar
<option value="Mazda">Mazda
<option value="Volvo">Volvo
</select>

When displayed in a browser, the above example will appear as follows:

The optional multiple attribute may be added to the <select> tag to enable multiple selection of items from the list.

Obtaining the Current Selection from the JavaScript Select Object

The Select object contains a number of properties that can be used to obtain the currently selected list item:

name - The name of the Select Object instance

length - The number of items in the list

options - An array of options in the list. Each selectable option in the list has an entry in the array.

selectedIndex - The index of the currently selected item in the list.

The options array, in turn, has a length property that can be used to find the number of options contained in the array. Further, each element in the array contains the following properties:

index - the index into the array

defaultSelected - the state of the selected attribute

selected - specifies the current state of the option. Setting this to true selects this option

name - the value of the name attribute

text - the text that is displayed for this option

Using our car example from above we could output the value of the current selected item by first finding the currently selectedIndex value, and then using this index to read the value of that element in the options array. The following example demonstrates this:

<html>
<head>
<title>JavaScript Select Example</title>

<script language="javascript" type="text/javascript">
function readSelection()
{

   var index = document.myForm.carBrands.selectedIndex;

   document.write("selectedIndex= " + index + "<br>");

   var value = document.myForm.carBrands.options[index].value;

   document.write("Selected Value = " + value + "<br>");
}
</script>

</head>

<body>

<form action="" name="myForm">
<select name="carBrands">
<option value="Ford" SELECTED>Ford Motor Company
<option value="GM">General Motors
<option value="Honda">Honda Motor Company
<option value="Toyota">Toyota Motor Company
<option value="Jaguar">Jaguar
<option value="Mazda">Mazda
<option value="Volvo">Volvo
</select>
<input type="BUTTON" value="Click to get Selection" onClick="readSelection()"/>
</form>

</body>
</html>

When using multiple selection lists the selectedIndex property will return only the first selected item. It is necessary, therefore, to work through the options array testing each selected property to ascertain which selections have been made by the user.

The Password object is used to collect information from a user (typically, but not limited to, a password or acount number) whe nthe data entered should not visible on the screen. As the user types, the '*' character appears in the text field for each key press, instead of the actual typed character.

The basic syntax for the Password Object is as follows:

<input type="PASSWORD" name="objectName" size="10" />

<google>BUY_JAVASCRIPT_BOTTOM</google>

---

Previous	Table of Contents	Next
JavaScript Timeouts		Understanding JavaScript Cookies

---