1. CST 200 - JavaScript Validating Form Data with JavaScript

2. 2 Objectives In this chapter, you will: Learn about JavaScript and forms Use JavaScript to manipulate and validate form elements Learn how to manipulate selection lists with JavaScript Learn how to validate submitted data

3. 3 Understanding Forms Many Web sites use forms –Collect information from users Transmit to a server for processing Web page forms –Frequently gather search criteria from a user –Transmit data to a server-side scripting language program Popular server-side scripting languages –PHP, Common Gateway Interface (CGI), Active Server Pages (ASP), and Java Server Pages (JSP)

4. 4 Figure 5-1 Twitter sign-up form Understanding Forms (cont’d.)

5. 5 Figure 5-2 Google advanced search page Understanding Forms (cont’d.)

6. 6 Understanding the Element element –Designates a form within a Web page –Contains all text and elements making up a form

7. 7 Table 5-1 Attributes of the element Understanding the Element (cont’d)

8. 8 Working with Form Controls Primary elements used within the element –,,, and elements –Create user interaction input fields element –Displays choices in drop-down menu or scrolling list element –Creates text field where users enter multiple lines of information

9. 9 Working with Form Controls (cont’d.) Field –Form element where: User can enter data User can select or change,, elements: –Can include name and value attributes name attribute defines a name for an element value attribute defines a default value Example: <input type = "text" name = "company_info" value = "Skyward Flyers" />

10. 10 Using JavaScript with Forms Form object –Represents a form on a Web page –Used to access form controls, verify form information –Part of the browser object model Referencing forms and form elements –Document object includes a forms[] array Contains all forms on a Web page – element’s name attribute Deprecated in XHTML –Form object has an elements[] array

11. 11 Using JavaScript with Forms (cont’d.) Referencing forms and form elements (cont’d.) –elements[] array Contains objects representing each control in a form –Reference form index number in the forms[] array Followed by the appropriate element index number from the elements[] array Form object –DOM Object that represents HTML form –Contains properties, events and methods

12. 12 Table 5-2 Form object properties Using JavaScript with Forms (cont’d.)

13. 13 Table 5-3 Form object events Table 5-4 Form object methods Using JavaScript with Forms (cont’d.)

14. 14 Working with Input Fields Empty element –Generates input fields that create interface elements Text boxes, radio buttons, and so on checked attribute –Boolean attribute specifying one of two values True or false HTML programmer specifies a check box control selected or checked by default –Includes the Boolean checked attribute within the element –Example:

15. 15 Table 5-5 Attributes of the element Working with Input Fields (cont’d.)

16. 16 Working with Input Fields (cont’d.) Minimized form –Boolean attribute not assigned a value –Illegal in XHTML Full form of a Boolean attribute –Assign attribute name as the attribute’s value Most important element attribute: type attribute –Determines type of element rendered: required –Valid type attribute values text, password, radio, check box, reset, button, submit, image, file, hidden

17. 17 Input Field Objects For controls created with an element –Each control represented by an object similar to the control name Input Radio Checkbox

18. 18 Table 5-7 Input field object methods and their associated form controls Input Field Objects (cont’d.)

19. 19 Text Boxes Text box – element with a type of “text” –Accepts a single line of text value attribute –Specifies text used as the default value at the moment a form first loads Example –Form with text boxes that include name, value, and size attributes

20. 20 Figure 5-5: Form with several text elements Text Boxes (cont’d.)

21. 21 Text Boxes (cont’d.) Form validation with JavaScript –Takes place when form submitted Example: –Add text elements to the subscription form JavaScript’s built-in isNaN() function –Determines if user entered a numeric value Example: –Add function to the subscription.html document to verify numeric Zip code or telephone data entered

22. 22 Check Boxes Check boxes – element with a type of “checkbox” –Can be set to Yes (checked) or No (unchecked) –When users should select whether or not to include a certain item Or to allow users to select multiple values from a list checked attribute –Sets initial value of the check box to Yes Group check boxes by giving each check box the same name value

23. 23 Check Boxes (cont’d.) Each check box can have a different value Users can select as many check boxes in a group as they like Figure 5-12 Form with check boxes

24. 24 Password Boxes Password box – element with a type of “password” –Entering passwords or other types of sensitive data –Character typed appears as an asterisk or bullet Figure 5-7 Password box in a Web browser

25. 25 Push Buttons Push button – element with a type of “button” –Similar to OK and Cancel buttons in dialog boxes –Executes JavaScript code performing a function Use name and value attributes with a push button –value attribute text appears on the button’s face –Button width: element Dependent on number of characters in its value attribute –name and value attributes not required

26. 26 Figure 5-9 A push button in a Web browser <input type = "button" name = "push_button" value = "Click Here" onclick = "window.alert('You clicked a push button.');" /> Push Buttons (cont’d.)

27. 27 Radio Buttons Group of radio buttons or option buttons – element with a type of “radio” –User can select one value All radio buttons in the group –Must have the same name attribute Each radio button –Requires a value attribute identifying its unique value Radio element has a checked attribute –Sets an initial value for the group

28. 28 Figure 5-10 Form with radio buttons Radio Buttons (cont’d.)

29. 29 Radio Buttons (cont’d.) Multiple form elements sharing the same name –JavaScript creates an array out of the elements using the shared name Radio buttons share the same name –A single name = value pair can be submitted to a server-side script checked property returns a value of true –If a check box or radio button selected

30. 30 Creating Selection Lists element creates a selection list –Presents users with fixed lists of options Options displayed in a selection list –Created with elements element must appear within a block-level element: such as the element Selection list can include a scroll bar

31. 31 Table 5-8 Attributes of the element Creating Selection Lists (cont’d.)

32. 32 Menu Options element –Specifies options appearing in a selection list –Content of element Appears as a menu option in a selection list Can specify a selection list’s menu options –Use elements placed within a element Each selection list must contain at least one element

33. 33 Table 5-9 Attributes of the element Menu Options (cont’d.)

34. 34 The Select and Option Objects Select object –Represents a selection list in a form –Includes an options[] array containing an Option object for each element in the selection list Option object –Represents an option in a selection list Programmer appends properties in Table 5-10 to the name representing the element Programmer appends properties in Table 5-12 to the options[] array

35. 35 Table 5-10 Properties of the Select object The Select and Option Objects (cont’d.)

36. 36 Table 5-11 Methods of the Select object The Select and Option Objects (cont’d.)

37. 37 Table 5-12 Properties of the Option object The Select and Option Objects (cont’d.)

38. 38 Adding Options to a Selection List ECMAScript recommends adding new options to a selection list –Using the add() method of the Select object Method not consistently implemented Create a new option with Option() constructor –Then assign the object to an empty element in an options[] array Syntax var variable_name = new Option(text, value, defaultSelected, selected);

39. 39 Removing Options from a Selection List Pass option’s index number in options[] array to the remove() method of the Select object –Remaining elements are reordered Remove all the options from an options array –Set length of options[] array to zero

40. 40 Changing Options in a Selection List Assign new values to the option’s value and text properties Figure 5-15 Shopping list form

41. 41 Validating Submitted Data onsubmit event handler –Executes when a form submitted to a server-side script –Often used to verify or validate a form’s data before it is sent to a server onreset event handler –Executes when reset button selected on a form –Confirm that a user really wants to reset the contents of a form Must return a value of true or false –Depends if form should be submitted or reset

42. 42 Summary Forms –Collect information from users –Transmit information to a server for processing element designates a form in a Web page Elements to create form controls:,,, and Field –Any form element into which a user can enter data Form object represents a form on a Web page

43. 43 Summary (cont’d.) Document object includes a forms[] array –Contains all of the forms on a Web page Empty element used to generate input fields element creates a selection list Use elements to specify the options that appear in a selection list Select object represents a selection list in a form

44. 44 Summary (cont’d.) Option object represents an option in a selection list Submit button transmits a form’s data to a Web server Reset button clears all form entries and resets each form element to the initial value specified by its value attribute onsubmit event handler executes when a form submitted to a server-side script onreset event handler executes when a reset button selected on a form