Chapter 5 Java Script And Forms 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 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 Element (Cont.)

JavaScript, Third Edition 7 Form Controls Four primary elements used within the element to create form controls: – The and elements: –Create input fields with which users interact

JavaScript, Third Edition 8 Form Controls (Cont.) The element: –Displays choices in a drop-down menu or scrolling list known as a selection list The 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,, and 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 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 element with a type of “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 element with a type of “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 element with a type of “button” ( ): –Creates a push button similar to the OK and Cancel buttons you see in dialog boxes

JavaScript, Third Edition 25 Radio Buttons An element with a type of “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 element with a type of “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 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 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 elements

JavaScript, Third Edition 30 Selection Lists (Cont.) The element must appear within a block- level element such as the 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 elements to specify the options that appear in a selection list The content of an element appears as a menu option in a selection list Specify a selection list’s menu options using elements placed within a element Each selection list must contain at least one 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 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 element with a type of “submit” ( ): –Creates a submit button that transmits a form’s data to a Web server The action attribute of the element that creates the form determines to what URL the form is submitted

JavaScript, Third Edition 40 Reset Buttons An element with a type of “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 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 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.),,, and : –Four primary elements are used within the 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 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