The Web Wizards Guide To JavaScript Chapter 3 Working with Forms.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 5 JavaScript and XHTML Documents Programming the World Wide Web Fourth.
23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
1 Topic 6 Processing Form Input. 2Outline Goals and Objectives Goals and Objectives Chapter Headlines Chapter Headlines Introduction Introduction Form.
CIS101 Introduction to Computing Week 08. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
CHAPTER 30 THE HTML 5 FORMS PROCESSING. LEARNING OBJECTIVES What the three form elements are How to use the HTML 5 tag to specify a list of words’ form.
Web Database Programming Input Validation. User Input on the Web Web browser built-in mechanisms –HTML Forms HTTP POST method –Hyperlinks HTTP GET method.
JavaScript Forms Form Validation Cookies CGI Programs.
Web-based Application Development Lecture 17 March 16, 2006 Anita Raja.
Computer Science 103 Chapter 4 Advanced JavaScript.
Tutorial 14 Working with Forms and Regular Expressions.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Lesson 8 Creating Forms with JavaScript
CST JavaScript Validating Form Data with JavaScript.
Chapter 3. Table have many uses in a HTML design but are mostly used for the organization of your web site. Tables also give vertical and horizontal structure.
JavaScript Form Validation
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1.
Department of Information Technology e-Michigan Web Development 0 HTML Form Creation in the Vignette Content Management Application.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 12.
The Web Wizard’s Guide To JavaScript Chapter 1 JavaScript Basics.
Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: Form Validation.
Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls.
Chapter 3 Using Validation Controls. What is a Validation Control? A control that validates the value in another control Renders as an HTML tag with an.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
The Web Wizard’s Guide To JavaScript Chapter 6 Working with Dates and Times.
Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
Using Client-Side Scripts to Enhance Web Applications 1.
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
HTML FORMS GET/POST METHODS. HTML FORMS HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes,
Microsoft FrontPage 2003 Illustrated Complete Creating a Form.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
The Web Wizard’s Guide To JavaScript Chapter 3 Working with Forms.
The Web Wizard’s Guide To JavaScript Chapter 3 Working with Forms.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
HTML FORMS The TEXT Object Presented By: Ankit Gupta.
Unit 2 — The Exciting World of JavaScript Lesson 7 — Creating Forms with JavaScript.
HTML Creating Forms on a Web Page. 2 Objectives  Discuss the process of creating a form  Distinguish between data input controls and text input controls.
Web Page-Chapter 6 Forms. Inserting a Form  Display the Insert bar  Click the arrow to the right of the display category on the Insert bar and then.
Lesson 16. Practical Application 1 We can take advantage of JavaScript and the DOM, to set up a form so that the first text box of a form automatically.
JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.
Learning Aim C.  In this section we will look at how text, tables, forms and frames can be used in web pages.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
HTML Structure II (Form) WEEK 2.2. Contents Table Form.
Chapter 5 JavaScript and HTML Documents. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 5-2 FIGURE 5.1 The DOM structure for a simple document.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
In this session, you will learn to:
Section 17.1 Section 17.2 Add an audio file using HTML
Web Programming– UFCFB Lecture 17
The Web Wizard’s Guide To JavaScript
The Web Wizard’s Guide To JavaScript
Murach's JavaScript and jQuery (3rd Ed.)
Murach's JavaScript and jQuery (3rd Ed.)
Presentation transcript:

The Web Wizards 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 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 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 visitors data as needed

Text Fields: Bad or Missing Data The tag - single line of text The 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 U.S. telephone numbers require specific format (555) 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 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 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 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 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 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.

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 Forms are often used for self-grading tests. Students receive feedback on their responses.