1. 1 Topic 6 Processing Form Input

2. 2Outline Goals and Objectives Goals and Objectives Chapter Headlines Chapter Headlines Introduction Introduction Form Object Form Object Form Objects Form Objects Form Input Validation Form Input Validation Footer Scripts Footer Scripts Form Data Processing Form Data Processing Summary Summary

3. 3 Goals and Objectives Goals Goals Understand JavaScript form object, the objects that correspond to form elements, client side validation of form input, server side storage of form data in a spreadsheet or a database, and the difference between header and footer scripts Objectives Objectives Form backend Form backend Form object Form object Objects of form elements Objects of form elements Form input validation Form input validation Accessing form elements in JavaScript: footer scripts Accessing form elements in JavaScript: footer scripts Processing form data Processing form data Processing needs: languages (Perl, PHP, Java) and databases (Excel, mySQL) Processing needs: languages (Perl, PHP, Java) and databases (Excel, mySQL) Practice form validation and processing techniques Practice form validation and processing techniques

4. 4 Chapter Headlines 24.1 Introduction 24.1 Introduction Learn how to stop forms on the client side Learn how to stop forms on the client side 24.2 Form Object 24.2 Form Object Find out what forms can do Find out what forms can do 24.3 Form Objects 24.3 Form Objects What is the difference between form object and objects What is the difference between form object and objects 24.4 Form Input Validation 24.4 Form Input Validation This is where to check and stop users of forms This is where to check and stop users of forms 24.5 Footer Scripts 24.5 Footer Scripts Why should we use footers? Are there headers? Why should we use footers? Are there headers? 24.6 Form Data Processing 24.6 Form Data Processing Find out what you can do with form data Find out what you can do with form data

5. 5Introduction Learn how to create all possible form elements Learn how to create all possible form elements Form have a front end and a back end Form have a front end and a back end The two most important aspects of a form are The two most important aspects of a form are Validating form input Validating form input Storing form input in a spreadsheet or a database Storing form input in a spreadsheet or a database Validation of input ensures that the input is correct and useful Validation of input ensures that the input is correct and useful Storing of input data makes it available for future reference and use Storing of input data makes it available for future reference and use

6. 6 Form Object Each form in a document creates a Form object Each form in a document creates a Form object JavaScript provides an array called forms to store Form objects JavaScript provides an array called forms to store Form objects Properties of Form object: action, elements, encoding, length, method, name, target Properties of Form object: action, elements, encoding, length, method, name, target Methods of Form object: handleEvent(), reset(), submit() Methods of Form object: handleEvent(), reset(), submit()

7. 7 Form Objects Each element in a form creates a form element object Each element in a form creates a form element object Properties and Methods of form objects: Properties and Methods of form objects: Text field  defautValue, form, name, type, value  blur(), focus(), handleEvent(), select()  blur(), focus(), handleEvent(), select() Checkbox  checked, form, name, type, value  blur(), click(), focus(), handleEvent() Buttons  form, name, type, value  blur(), click(), focus(), handleEvent() Hidden  form, name, type, value File  form, name, type, value  blur(), focus(), handleEvent(), select() Select list  form, length, name, options, type, selectedIndex  blur(), focus(), handleEvent() Option  defaultSelected, selected, text, value

8. 8 Form Input Validation JavaScript enables us to validate form input JavaScript enables us to validate form input The validate() function returns true if form input is correct The validate() function returns true if form input is correct A false return disables the action attribute of the tag without erasing any correct input A false return disables the action attribute of the tag without erasing any correct input The validation process begins by including a validation event handler with the tags The validation process begins by including a validation event handler with the tags Input can be validated at: Input can be validated at: Form level: after the entire form is completed Form level: after the entire form is completed Element level: after input in each element Element level: after input in each element Validation at form level is better than element level Validation at form level is better than element level

9. 9 Form Input Validation Example 1 Example 1

10. 10 Form Input Validation Example 2 Example 2

11. 11 Form Input Validation Example 3 Example 3

12. 12 Form Input Validation Example 4 Example 4

13. 13 Footer Scripts Footer scripts come after the tag Footer scripts come after the tag Footer scripts can access all the XHTML objects created inside the tag Footer scripts can access all the XHTML objects created inside the tag Footer scripts may not need event handlers Footer scripts may not need event handlers Some useful applications of footer scripts are Some useful applications of footer scripts are Placing a cursor in a given form element Placing a cursor in a given form element Guide users in filling up a form Guide users in filling up a form Focus users’ attention in filling the form Focus users’ attention in filling the form

14. 14 Form Input Validation Example 5 Example 5

15. 15 Form Input Validation Example 6 Example 6

16. 16 Form Input Validation Example 7 Example 7

17. 17 Form Data Processing Form processing can be summarized in four steps: Form processing can be summarized in four steps: User fills up a form User fills up a form JavaScript verifies the input on client side before sending to the server JavaScript verifies the input on client side before sending to the server A CGI script processes the correct data on the server by extracting the values from name/value pairs A CGI script processes the correct data on the server by extracting the values from name/value pairs Store values into a spreadsheet or a database Store values into a spreadsheet or a database We must have the knowledge of: We must have the knowledge of: Databases, SQL  oracle, mySQL, MSAccess, and Excel Databases, SQL  oracle, mySQL, MSAccess, and Excel Programming languages  Perl, PHP, Servlets, JSPs, and ASPs Programming languages  Perl, PHP, Servlets, JSPs, and ASPs We can process data in combinations such as - Servlets and spreadsheets - PHP and MySQL database - Perl and E-mail processing We can process data in combinations such as - Servlets and spreadsheets - PHP and MySQL database - Perl and E-mail processing

18. 18Summary Form have a front end and a back end and data entered has to be validated and stored Form have a front end and a back end and data entered has to be validated and stored Each form creates a Form object Each form creates a Form object Each element of a form creates a form element object Each element of a form creates a form element object Form validation is important to collect the correct inputs Form validation is important to collect the correct inputs Footer scripts have useful applications Footer scripts have useful applications Form data must be processed following the 4 step process Form data must be processed following the 4 step process