1. The Web Wizard’s Guide To JavaScript Chapter 3 Working with Forms

2. Chapter Objectives To learn how to use form validation to examine the text entered by your visitors To understand the principles of working with text fields To learn how to detect and change the format of information in a text field To learn how to work with radio buttons, check boxes, and selection menus To create simple self-grading tests

3. Form Validation HTML forms contain fields, select menus, radio buttons, and check boxes Form validation procedures: –Check the data the visitor enters on the form –Remind the visitor to enter missing data –Reformat the visitor’s data as needed

4. Text Fields: Bad or Missing Data The tag - single line of text The tag - multiple lines of text Always include a name attribute Use the value attribute to specify a default value The onSubmit event handler calls the validate() functiononSubmit Another useful even handler for validating forms is onChange. onChange The validate() function checks for bad or missing data. If the function returns false then the form is not submitted.

5. Text Fields: Reformatting Data U.S. telephone numbers require specific format (555) 333-4444 A visitor types a phone number into a text field then types the tab key. An onchange event handler calls the formatNumber() function. The formatNumber() function finds the first ten numbers in the text field and adds the necessary parentheses and spaces. The reformatted number is displayed in the field.

6. Validating Text FieldsText Fields To validate a text field, you first determine whether a value has been entered. For example, to determine whether the visitor neglected to enter information into a required field, you may test the expression (!document.getElementById(‘survey’).visitor.value). If that expression is true then the visitor failed to enter required information into the visitor field.You can also check to make sure the information is in the correct format in terms of numbers and punctuation. Example1 –Source1Source1

7. Validating Text Fields (Cont.) This example checks to make sure that the email address is in the proper format (i.e has an @ symbol followed by a dot and a domain that is at least two characters in length). It uses the indexOf() JavaScript string method and the string.length property. Also notice the use of the focus() method. indexOf() string.length focus() Example –SourceSource

8. Validating Text Fields (Cont.) This example takes a ten digit number and formats it as a phone number (i.e. (###) ###-####). This function uses the string.substring() method. Also notice the string.substr() method. string.substring() Example –SourceSource

9. Radio Buttons Radio buttons are used for questions like gender which have a limited number of possible responses. The getRadioValue() function finds the value of the checked radio button. The showRadioValue() function checks the desired radio button. Place these functions in your code library.

10. Validating Radio Buttons Browsers automatically store a set of radio buttons, all bearing the same name, in an array. For example, if you have two radio buttons called gender, the first one, gender[0], might have a value of male and the second one, gender[1], might have a value of female. You can use JavaScript expressions to see which button is checked and to find its value. Example –SourceSource

11. Check Boxes Check boxes for “check all that apply” questions. When form is submitted, names and values of checked boxes are sent Test for the checked property Often it is helpful to use sequential names for check boxes (q1, q2, q3). This example uses the array object.array object Example –SourceSource

12. Selection Selection Menus tag creates a popup selection menu with options set in the tag Select and go navigation The getSelectValue() function finds the value of the selected option. The showSelectValue() function changes to the display of a to a given value. Store these functions in your code library.

13. Validating Selection Menus A common technique for obtaining the value of a selected item in a SELECT menu is to store the SELECT object in a variable, find the number of the selected option (the selectedIndex property), and then find the value of the selected option. This code uses the href property of the location object.location object Example –SourceSource

14. Self-grading Tests Forms are often used for self-grading tests. Students receive feedback on their responses. Example –SourceSource –LibraryLibrary