1. Working with Forms

2. how are forms manipulated? the document object contains an array of forms objects, one for each form, in document order –forms[] any form is referenced through this array –e.g. the first form in a web page would be refeerenced as document.forms[0] forms can also be referenced by NAME attribute –this makes programming easier

3. how are forms manipulated? form elements (the widgets) are accessed through the forms elements array –e.g. document.forms[0].elements[1] –refers to the second element in the first form in a document other properties of a form relate to HTML attributes –action, encoding, method, target

4. structure of a forms application web page document head document body functions form elements one or more forms defined by HTML tags in the document body. Each form contains elements such as text fields and buttons. form processing functions

5. functions and forms functions read values from form elements function parameters can be –element values –elements –forms re-useable validation functions can be imported from an external script file

6. external script files contain arbitrary JavaScript code usually used to define re-useable functions –form validation –boilerplate HMTL code is maintained in one place, used in many pages imported using the SCRIPT tag

7. Example <SCRIPT LANGUAGE = "JavaScript" SRC = myScript.js"> myScript.js any web page embedded

8. what are forms used for? providing a client-side user interface –input through prompt boxes, text fields and text areas –output through text fields and text areas, pop- up windows, HTML text elements –control through buttons and hyperlinks collecting data to send to a server process –the data from a single form is submitted

9. Simple Interface Example

10. Example

11. The Multiplier //form processing functionality function multiply(){ //read the numbers from the form fields x = document.multiplier.num1.value; y = document.multiplier.num2.value; // compute and output the product product = x * y; alert(x); }

12. Example... The Multiplier Please input a number in each box... *

13. Extended Example client-side forms interface

14. Requirements a simple web interface to try out text and background colour combinations for web page design user defines colours, web page displays a sample table layout using those colours

15. Design frameset with two frames –colour picker frame –display frame function in an externally defined script –re-useable for colouring other framesets button in colour picker frame to trigger the display function form with text fields used for input

16. top-level frameset Colour Picker

17. colour-picker frame <SCRIPT LANGUAGE = "JavaScript SRC = "picker.js"> Colour Picker

18. colour-picker frame Enter colour values in the boxes

19. colour-picker frame Background Colour Text Colour Table Headings Table Data

20. colour-picker frame <INPUT TYPE = "BUTTON VALUE = "Show It!! ONCLICK = "showIt (); >

21. picker.js function showIt () { //get the array of text fields var topBox = document.forms [0].elements; //get hold of the document to write to //and give it a managable name var bottomBox = parent.frames['botOne'].document;

22. picker.js // now extract the values from the form elements var bg = topBox.bgcol.value; var fg = topBox.fgcol.value; var thc = topBox.thcol.value; var tdc = topBox.tdcol.value;

23. picker.js // now build the new page, using these colour variables bottomBox.open (); bottomBox.write (" \n"); bottomBox.write (" The Result Is: ");

24. picker.js bottomBox.write (" \n "); bottomBox.write (" Plain Heading "); bottomBox.write (" Coloured Heading "); bottomBox.write (" "); bottomBox.write (" Plain Data "); bottomBox.write (" Coloured Data "); bottomBox.write (" \n "); bottomBox.close (); }

25. Form Validation

26. form validation client-side validation checks form data before submission to server processes reduces input errors saves communication time easier to correct errors on input reduces error-processing overhead on the web server

27. typical form validation checks check all required fields have been completed check all numerical values are in range check coded data are in an appropriate format –post codes –telephone numbers –credit card numbers Luhns algorithm

28. form validation techniques validation checks are encoded as JavaScript functions –run onSubmit or in response to other events –standard functions imported from external scripts functions read form elements and perform tests assign new properties to form elements to assist validation –e.g. numerical ranges, boolean properties

29. limits of client-side validation web pages can be spoofed validation code is visible in the page source and can be altered reduces errors but does not prevent malicious input of false (or dangerous) data data should always be re-validated on the server

30. Extended Example: Form Validation

31. Requirements personal information form –name, address, zip code, phone number first name and phone number optional, all other fields must be completed zip code must be within min and max value error message should indicate –which non-optional fields are blank –which numerical fields are out of range validation function should be re-useable

32. Design function isBlank returns a boolean indicating whether a field is blank –should work on a text field or a textarea function verify runs when a form is submitted –checks all fields in the form –submits data if all fields valid –blocks invalid data and produces a list of errors

33. Design import verify and isBlank as external scripts –they can be re-used on other pages and maintained in the one script file attach verify to the onSubmit event-handler on the form add validation properties to particular form elements

34. <FORM onSubmit = "this.firstName.optional = true; this.phoneNumber.optional = true; this.zip.min = 0; this.zip.max = 99999; return verify (this);"> First Name: Last Name: Address:<TEXTAREA NAME = "address" ROWS = "4" COLS = "40"> Zip Code: Phone Number:

35. function isBlank (s) { // accepts a string as input // the string will come from a form // element for (var i = 0; i < s.length; i++) { //check each character var c = s.charAt (i); if ((c != ' ') && (c != '\n') && (c != '\t')) //the element is not blank return false; } // all chars are whitespace return true; }

36. function verify (f) { var msg; var emptyFields = ""; var errors = ""; // loop through form elements for (var i = 0; i < f.length; i++) { var e = f.elements [i]; // look for text fields and text areas if (((e.type == "text") || (e.type == "textarea")) && !e.optional) { // look for empty fields if ((e.value == null) || (e.value == "") || isBlank(e.value)) { emptyFields += "\n " + e.name; continue; }

37. // check max and min values for numeric fields if (e.numeric || (e.min != null) || (e.max != null)) { var v = parseFloat (e.value); if (isNaN (v) || ((e.min != null) && (v < e.min)) || ((e.max != null) && (v > e.max))) { errors += "- The field " + e.name + " must be a number"; if (e.min != null) errors += " that is greater than " + e.min; if (e.max != null && e.min != null) errors += " and is less than " + e.max; else if (e.max != null) errors += " that is less than " + e.max; errors += ".\n"; }

38. if ((errors) || (emptyFields)){ // display error messages msg = "___________________________________\n\n"; msg += "The form was not submitted.\n"; msg += "Please correct errors and resubmit.\n"; msg +="__________________________________\n\n";

39. if (emptyFields) { msg += "-The following fields are empty:" + emptyFields + "\n"; if (errors) msg += "\n"; } msg += errors; alert (msg); return false; } return true; }