1. CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript

2. Events Common events are: Click Change MouseOver MouseOut Load UnLoad Reset Submit Select Error Abort Focus

3. onClick The Click event is automatically generated whenever a user clicks something on a page. Click events are generated for buttons, radio buttons, check boxes, submit buttons, reset buttons and links.

4. onClick More importantly, Click events are also generated for and tags. This means you can generate results from the user clicking on a word, a line or a paragraph of text even if they are not hyperlinks

5. onChange This occurs when the value of an element is altered in some way. It applies to text boxes, text areas, and select (option) lists.

6. onMouseOut This occurs when a mouse moves out of the area of an element. if you have a mouseOut event for an image, it means that your mouse is no longer hovering over the image. Is used primarily for roll-over images. You can also use it for text elements. For accessibility, be aware of onBlur, which has the same concept but is used for non-mouse events (eg, a keypress takes the focus elsewhere)

7. onMouseOver Occurs when a mouse moves into the area of an element. a MouseOver event for an image means that your mouse is hovering over the image. You can also use this for text elements, and it is not just used for images. MouseOver is used primarily for roll-over images. You can also use it for text elements. For accessibility, be aware of onFocus, which has the same concept but is used for non-mouse events (eg, a keypress brings the focus onto the object)

8. Validating data: what do we want to happen? A HTML file containing a form is downloaded and rendered to the screen.. The user comes along and enters some data. The user clicks the ‘submit’ button. The JavaScript takes over the web browser, validating the data. If the data does not validate correctly, the user is not allowed to progress Error messages may be output requesting that the user correct the problems then re-submit If the data validates correctly then it may be sent

9. Validating Data: necessary precautions The form validation code is written inside the same HTML file as the HTML form. The JavaScript must be executed when the user clicks the submit button The code should not be executed as soon as the page loads. We have to write a JavaScript function that contains all of the validation code.

10. Validating Data: planning Where should we put The functions we want loaded as the page loads? The activating script that calls the functions to validate the data? The functions should be written into the (or possibly in a.js file elsewhere) The scripts should be attached to control(s) in the form

11. Validating Data: using the DOM We can get access to the data that is held in form values. Accessing any value within a form will normally need the following Document Object Model statement: window.document.formname.controlname.value where formname and controlname will change depending on what you have called the form and controls.

12. How to access user-entered data Example, To access the value the user has typed in to the text box, your script will contain this: window.document.myform01.text01.value We can use this in an assignment or a validating line of code

13. Handling the user’s data Once we have the value of the form element We can validate this data against rules. For example, we may want to ensure that all form fields have been filled in. The example in the Scripting notes (page 15) at this point ensures all fields are filled.

14. onSubmit Of equal importance to form validation, is the ‘onSubmit’ event. Normally the user expects the Submit (or Send) button to make the form data go to the webmaster The onSubmit event is a special event, in that it CAN cause the submit to cancel itself!

15. onSubmit If you wrote: then the form would NEVER proceed to “dosummat.asp” because the onSubmit has a return value of FALSE.

16. onSubmit For this reason, our jsValidateFields function is more flexible. It returns a value of TRUE or FALSE depending on whether or not the fields validate. If the fields don’t validate, the user receives an error message, and is prevented from continuing until the validation errors are corrected.

17. Over to you! Open one of your HTML files – not something you are planning to use for the assignment Add a form from the script suggested in the notes (available on Web CT) Test, and amend to taste!