Chapter 5

Java Script And Forms

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives

• Study form elements and objects

• Use JavaScript to manipulate and validate form elements

• Learn how to submit and reset forms

• Learn how to validate submitted form data

JavaScript, Third Edition 3

Introduction

• Forms:– One of the most common Web page elements used

with JavaScript

– Typical forms you may encounter on the Web include order forms, surveys, and applications

• Use JavaScript:1. To make sure data was entered properly into the

form fields

2. To perform other types of preprocessing before the data is sent to the server

JavaScript, Third Edition 4

Overview Of Forms

• Forms are used to: – Collect information from users

– Transmit that information to a server for processing

• Some popular server-side scripting languages that are used to process form data include:

– Common Gateway Interface (CGI)

– Active Server Pages (ASP)

– Java Server Pages (JSP)

JavaScript, Third Edition 5

The <form> Element

• Designates form within a Web page

• Contains all the text and elements that make up a form

• You can include as many forms as you like on a Web page

• You cannot nest one form inside another form

JavaScript, Third Edition 6

The <form> Element (Cont.)

JavaScript, Third Edition 7

Form Controls

• Four primary elements used within the <form> element to create form controls:

– <input>

– <button>

– <select>

– <textarea>

• The <input> and <button> elements:

– Create input fields with which users interact

JavaScript, Third Edition 8

Form Controls (Cont.)

• The <select> element:– Displays choices in a drop-down menu or scrolling

list known as a selection list

• The <textarea> element:– Used to create a text field in which users can enter

multiple lines of information

• Field– Any Form element into which a user can enter data

(such as a text box) or that a user can select or change (such as a radio button)

JavaScript, Third Edition 9

Form Controls (Cont.)

• The <input>, <textarea>, and <select> elements can include name and value attributes:

– The name attribute defines a name for an element

– The value attribute defines a default value

JavaScript, Third Edition 10

Using JavaScript with Forms

• JavaScript is often used with forms

– to validate or process form data before the data is

submitted to a server-side script

• To use JavaScript to access form controls and verify form information

– Use the Form object and Input object

JavaScript, Third Edition 11

Using JavaScript with Forms (Cont.)

• The Form Object:

– Represents a form on a Web page

• The Input object:

– Represents a form control, such as a text box

• Both objects are part of the browser object model

JavaScript, Third Edition 12

Referencing Forms and Form Elements

• Just as the Document object has a forms[] array, the Form object has an elements[] Array

• The elements[] array:

– Use to reference each element on a form

– Contains input objects representing each of the controls in a form

JavaScript, Third Edition 13

Referencing Forms and Form Elements (Cont.)

• Each element on a form is assigned to the elements[] array in the order in which it is encountered by the JavaScript interpreter

• To refer to an element on a form:

– Reference the index number of the form in the forms[] array, followed by the appropriate element index number from the elements[] array

JavaScript, Third Edition 14

The Form Object

JavaScript, Third Edition 15

The Form Object (Cont.)

JavaScript, Third Edition 16

The Form Object (Cont.)

JavaScript, Third Edition 17

The Input Object

JavaScript, Third Edition 18

The Input Object (Cont.)

JavaScript, Third Edition 19

The Input Object (Cont.)

JavaScript, Third Edition 20

Input Fields

• The empty <input> element:

– Used to create input fields that create different types of interface elements, such as

• Text boxes

• Radio buttons

• The input fields are used to gather information from the user

JavaScript, Third Edition 21

Input Fields (Cont.)

JavaScript, Third Edition 22

Text Boxes

• An <input> element with a type of “text” (<input type=”text” />):

– Creates simple text box that accepts a single line of text

• When used with a text box, the value attribute

– specifies text to be used as the default value at the moment a form first loads

JavaScript, Third Edition 23

Password Boxes

• An <input> element with a type of “password” (<input type=”password” />):

– Creates a password box that is used for entering passwords or other types of sensitive data

– Each character that a user types in a password box appears as an asterisk or bullet

JavaScript, Third Edition 24

Push Buttons

• An <input> element with a type of “button” (<input type=”button” />):

– Creates a push button similar to the OK and Cancel buttons you see in dialog boxes

JavaScript, Third Edition 25

Radio Buttons

• An <input> element with a type of “radio” (<input type=”radio” />):

– Creates a group of radio buttons, or option buttons, from which the user can select only one value

• To create a group of radio buttons:

– All radio buttons in the group must have the same name attribute

JavaScript, Third Edition 26

Radio Buttons (Cont.)

• Each radio button requires a value attribute:

– Identifies unique value associated with that button

• Only one selected radio button in a group creates a name=value pair when a form is submitted to a Web server

JavaScript, Third Edition 27

Check Boxes

• An <input> element with a type of “checkbox” (<input type=”checkbox” />):

– Creates a box that can be set to Yes (checked) or No (unchecked)

• Use check boxes:

– When you want users to select whether or not to include a certain item

– Or to allow users to select multiple values from a list of items

JavaScript, Third Edition 28

Check Boxes (Cont.)

• Include checked attribute in a check

box <input> element:

– To set the initial value of the check box to Yes

– If a check box is selected (checked) when a form is submitted

• Check box name=value pair is included in the form data

– If a check box is not selected,

• a name=value pair is not included in the data submitted from the form

JavaScript, Third Edition 29

Selection Lists

• The <select> element creates a selection list:

– Presents users with fixed lists of options from which to choose

– Options displayed in a selection list are created with <option> elements

JavaScript, Third Edition 30

Selection Lists (Cont.)

• The <select> element must appear within a block-level element such as the <p> element

• The selection list can appear as

– an actual list of choices

– a dropdown menu

• Depending on the number of options in the list, a selection list can also include a scroll bar

JavaScript, Third Edition 31

Selection Lists (Cont.)

JavaScript, Third Edition 32

Menu Options

• Use <option> elements to specify the options that appear in a selection list

• The content of an <option> element appears as a menu option in a selection list

• Specify a selection list’s menu options using <option> elements placed within a <select> element

• Each selection list must contain at least one <option> element

JavaScript, Third Edition 33

Menu Options (Cont.)

JavaScript, Third Edition 34

The Select and Option Objects

• The Select object:

– Represents a selection list in a form

– Includes an options[] array containing an Option object for each <option> element in the selection list

• The Option object represents an option in a selection list

• Use the Select and Option objects with JavaScript to manipulate the options displayed in a selection

JavaScript, Third Edition 35

The Select and Option Objects (Cont.)

JavaScript, Third Edition 36

The Select and Option Objects (Cont.)

JavaScript, Third Edition 37

Adding Options to a Selection List

• To add a new option to a selection list after a Web page renders it:

– Must create a new option with the Option() constructor

– Similar to creating an array with Array() constructor

• The syntax for the Option() constructor is:

– Var variable_name = new Option(text, value, defaultSelected, selected);

JavaScript, Third Edition 38

Removing Options from a Selection List

• To remove a single option from a selection list:

– Assign a value of null to the option’s associated element in the options[] array

• When you remove an element from the options[] array, the remaining elements are reordered

JavaScript, Third Edition 39

Submit Buttons

• An <input> element with a type of “submit” (<input type=”submit” />):

– Creates a submit button that transmits a form’s data to a Web server

• The action attribute of the <form> element that creates the form determines to what URL the form is submitted

JavaScript, Third Edition 40

Reset Buttons

• An <input> element with a type of “reset” (<input type=”reset” />):

– Creates a reset button that clears all form entries and resets each form element to the initial value specified by its value attribute

• Name attribute for a reset button is not required

• Text assigned to the reset button’s value

attribute appears as the button label

JavaScript, Third Edition 41

Validating Submitted Data

• Two event handlers, onsubmit and onreset, are available for use with the <form> element:

• Onsubmit event handler:

– Executes when a form is submitted to a server-side script

• Onreset event handler:

– Executes when a reset button is selected on a form

JavaScript, Third Edition 42

Validating Text and Password Boxes

• To verify that text and password boxes are not empty:

– Can use an if statement in the onsubmit event handler

• Checks whether the field’s value property contains a value

JavaScript, Third Edition 43

Validating Radio Buttons

• Use the checked property to determine which element in a group is selected

• Checked property returns a value of:

– True if a check box or radio button is selected

– False if it is not

JavaScript, Third Edition 44

Validating Check Boxes

• You can use checked property to determine whether an individual check box has been selected

• If check boxes are part of a group:

– Use the same functionality as the validation code for radio buttons

JavaScript, Third Edition 45

Validating Selection Lists

• Test whether the selection list’s selectedIndex property contains a value of –1

• If it does, then no option is selected

JavaScript, Third Edition 46

Chapter Summary

• Forms:

– Collect information from users and transmit that information to a server for processing

• The <form> element:

– Designates a form within a Web page

– Contains all the text and elements that make up a form

JavaScript, Third Edition 47

Chapter Summary (cont.)

• <input>, <button>, <select>, and <textarea>:

– Four primary elements are used within the <form> element to create form controls

• Form object:

– Represents a form on a Web page

• Input object:

– Represents a form control, such as a text box

JavaScript, Third Edition 48

Chapter Summary (cont.)

• The <option> elements :

– Used to specify the option that appears in a selection list

• The Select object:

– Represents a selection list in a form

• The Option object:

– Represents an option in a selection list

JavaScript, Third Edition 49

Chapter Summary (cont.)

• The onsubmit event handler:

– Executes when a form is submitted to a server-side script

• The onreset event handler:

– Executes when a reset button is selected on a form