the web wizard s guide to javascript l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
The Web Wizard’s Guide To JavaScript PowerPoint Presentation
Download Presentation
The Web Wizard’s Guide To JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 12

The Web Wizard’s Guide To JavaScript - PowerPoint PPT Presentation


  • 145 Views
  • Uploaded on

The Web Wizard’s Guide To JavaScript. Chapter 3 Working with Forms. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'The Web Wizard’s Guide To JavaScript' - napua


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
the web wizard s guide to javascript

The Web Wizard’s Guide To JavaScript

Chapter 3

Working with Forms

chapter objectives
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
form validation
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
    • Reminds the visitor to enter missing data
    • Reformats the visitor’s data as needed
text fields bad or missing data
Text Fields: Bad or Missing Data
  • The <input> tag - single line of text
  • The <textarea> tag - multiple lines of text
  • Always include name and value attributes
  • The onsubmit event handler calls the validate() function
  • The validate() function checks for bad or missing data.
  • If the function returns false then the form is not submitted.
text fields reformatting data
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.
validating text fields
Validating Text 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.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.
radio buttons
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.
validating radio buttons
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.
check boxes
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).
selection menus
Selection Menus
  • <select> tag creates a popup selection menu with options set in the <option> tag
  • Select and go navigation
  • The getSelectValue() function finds the value of the selected option.
  • The showSelectValue() function changes to the display of a <select> to a given value.
  • Store these functions in your code library.
validating selection menus
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.
self grading tests
Self-grading Tests
  • Forms are often used for self-grading tests.
  • Students receive feedback on their responses.