Difference between revisions of "Building Forms with JavaScript"

Revision as of 20:30, 15 May 2007

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 Componments (GUI) objects such as buttons, text input fields, checkboxes, radio boxes and selections, together with the Form object which brings them all together.

The JavaScript Form Object

The JavaScript Form object serves a number purposes. It acts a container for all of the GUI objects that make up a form. It also acts as the mechansism 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 the form four JavaScript code.

• method - the method by which data is sent to the server. This will either be "GET" ot "POST" depdniong 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.

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>

Accessing Objects in a 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 oibjects 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). 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 whcih 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(). Assuming in our first example the Text object was assigned a name of phoneNumber we could asssign 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 );

The JavaScript Text Object

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 tyhe 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 - repesents the name by which this object may be reference in JavaScript.

• id - the id used when accessing Form object elements using the getElementById() method (decribed 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 outsite 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 toegther 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>

JavaScript TextArea Object

the JavaScript 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 attrinutes allow the number of rows and columns the TextArea should makie available to the user.

The following is an example of using the TextArea object:

<textarea name="myTextArea" rows="10" cols="60">
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.

The JavaScript Button Object