Related items

Chapter 6: Beginning JavaScript - Summary

You are here: irt.org | Articles | JavaScript | Form | Chapter 6: Beginning JavaScript [ previous next ]

Published on: Sunday 29th April 2001 By: Paul Wilton

Summary

In this chapter we looked at how to add a user interface onto our JavaScript so that we can interact with our user and acquire information from them. Let's look at some of the things discussed in this chapter.

The HTML form is where we place elements making up the interface in a page.
Each HTML form groups together a set of HTML elements. When a form is submitted to a server for processing, all the data in that form is sent to the server. We can have multiple forms on a page, but only the information in one form can be sent to the server.
A form is created using the opening tag <FORM> and ended with a close tag </FORM>. All the elements we want included in that form are placed in between the open and close <FORM> tags. The <FORM> tag has various attributes - for client-side scripting the NAME attribute is the important one. We can access forms with either their NAME attribute or ID attribute.
Each <FORM> element creates a Form object, which is contained within the document object. To access a form named myForm we write document.myForm. The document object also has a forms[] property which is an array containing every form inside the document. The first form in the page is document.forms[0], the second is document.forms[1], and so on. Using the length property of an Array object, document.forms.length tells us how many forms there are on the page.
Having discussed forms, we then went on to look at the different types of HTML elements available that can be placed inside forms, how to create them, and how they are used in JavaScript.
The objects associated with the form elements have a number of properties, methods, and events that are common to them all. They all have the name property, which we can use to reference them in our JavaScript. They also all have the form property that provides a reference to the Form object that element is contained inside. The type property returns a text string telling us what type of element this is; types include text, button, and radio.
We also saw that the methods focus() and blur(), and the events onfocus and onblur, are available to every form element object. Such an element is said to receive the focus when it becomes the active element in the form, either because the user has selected that element or because we used the focus() method. However an element got the focus, its onfocus event will fire. When another element is set as the currently active element the previous element is said to lose its focus, or to blur. Again loss of focus can be the result of the user selecting another element or the use of the blur() method; either way when it happens the onblur event fires. We saw that onfocus and onblur can, if used carefully, be a good place to check things like the validity of data entered by a user into an element.
All elements return a value, which is the string data assigned to that element. The meaning of the value depends on the element; for a text box it is the value inside the text box and for a button it's the text displayed on its face.
Having discussed the common features of elements we then looked at each of the more commonly used elements in turn, starting with the button element.
The button element's purpose in life is to be clicked by the user, where that clicking fires some script we have written. We can capture the clicking by connecting to the button's onclick event. A button is created using the <INPUT> tag with the TYPE attribute set to button. The VALUE attribute determines what text appears on the button's face. Two variations on a button are the submit and reset buttons. As well as acting as buttons, they also provide a special service not linked to code. The submit button will automatically submit the form to the server. The reset button clears the form back to its default state when loaded in the page.
The text element allows the user to enter a single line of plain text. A text box is created using the <INPUT> tag, with the TYPE attribute set to text. We can set how many characters the user can enter and how wide the text box is with the MAXLENGTH and SIZE attributes of the <INPUT> tag. The text box has the associated object called Text, which has the additional events onselect and onchange. The onselect event fires when the user selects text in the box, and the more useful onchange event fires when the element loses focus and its contents have changed since the element gained the focus. The onchange event is a good place to do validation of what the user has just entered. If they entered illegal values, such as letters when we wanted numbers, then we can let the user know and send them back to correct their mistake. A variation on the text box is the password box, which is almost identical to the textbox except the values typed into it are hidden and shown as an asterisk. Additionally the text box also has the onkeydown, onkeypress, and onkeyup events
The next element we looked at was the textarea, which is similar to the text box except it allows multiple lines of text to be entered. This element is created with the open tag <TEXTAREA> and closed with the </TEXTAREA> tag, the width and height in characters of the text box being determined by the COLS and ROWS attributes. Whether the textarea wraps text that reaches the end of a line and whether that wrapping is sent when the contents are posted to the server is determined by the WRAP attribute. If left off, or set to off, then no wrapping occurs; if set to soft it causes wrapping client-side, but it's not sent to the server when the form is sent; if set to hard it causes wrapping client-side and for that to be sent to the server. The associated Textarea object has virtually the same properties, methods and events as a Text object.
We then looked at the checkbox and radio button elements together. Essentially they are the same type of element except that the radio button is a grouped element. By this I mean that only one in a group can be checked at once. Checking another one causes the previously checked button to be unchecked. Both elements are created with the <INPUT> tag, the TYPE attribute being checkbox or radio. If CHECKED is put inside the <INPUT> tag, then that element will be checked when the page is loaded. Creating radio buttons with the same name creates a radio button group. The name of a radio button actually refers to an array, each element within which is a radio button defined on the form to be within that group. These elements have associated objects called Checkbox and Radio. Using the checked property of these objects, we can find out whether a checkbox or radio button is currently checked. Both objects also have the onclick event in addition to the common events, onfocus and onblur.
Next in our look at elements were the drop-down list and list boxes, both in fact actually the select element. The <SELECT> tag creates these elements, the SIZE attribute determining how many list items are visible at once. If a SIZE of 1 is given, then a drop-down box rather than list box is created. Each item in a select element is defined by the <OPTION> tag, or added to later using the Select object's options[] array property, which is an array containing each Option object for that element. However, adding options after the page is loaded is different for Netscape and Microsoft browsers. The Select object's selectedIndex property tells us which option is selected; we can then use that value to access that option in the options[] array and use the Option object's value property. The Option object also has the text and index properties, text being the displayed text in the list and the index being its position in the Select object's options[] array property. We can loop through the options[] array, finding out its length from the Select object's length property. The Select object has the onchange event which fires when the user selects another item from the list.
Finally we added a basic user interface to the Trivia Quiz. Now questions are created dynamically with the document.write() method and the user can select their answer from a group of radio buttons.

In the next chapter we'll be looking at how, once you have created a frameset in a page, you can access code and variables between frames. We'll also look at how to open new windows using JavaScript and methods of manipulating them once they are open. We'll see the trivia quiz become a frame based application.

Exercises

Suggested solutions to these questions can be found in Appendix A.

Question 1

Using the code from the temperature converter example we saw in Chapter 2, create a user interface for it and connect it to the existing code so that the user can enter a value in degrees Fahrenheit and convert it to centigrade.

Question2

Create a user interface that allows the user to pick the computer system of their dreams, similar in principle to the e-commerce sites selling computers over the Internet. For example, they could be given a choice of processor type, speed, memory, hard drive size, and the option to add additional components like DVD-ROM drives, sound cards, and so on. As the user changes the selection the price of the system should update automatically and notify the user of the cost of the system as they have specified it either by using an alert box or updating the contents of a text box.

HTML Forms: Interacting with the User

Form Image Button Fields

Creating 'Encoded' Name & Value Pairs

Disabling form elements

Passing data from one form to another

Addressing Form Field Validation with Regular Expressions and JavaScript 1.2

Dynamic Dropdown Menus

Form Tricks

Dropdown Menus #3

Check Boxes and Radio Buttons