LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT

EVENTS CLICK

WHAT IS AN EVENT? EACH TIME SOMETHING INTERESTING HAPPENS IN THE BROWSER (LIKE THE USER CLICKS A BUTTON OR THE BROWSER FINISHES LOADING THE PAGE), AN EVENT IS FIRED. WHEN A PAGE LOADED WHEN A USER CLICKS A BUTTON WHEN YOU MOVE YOUR MOUSE WHEN YOU CLICK A FORM FIELD EVERY KEY PRESS YOU DON’T WRITE THE EVENT ITSELF, YOU WRITE THE EVENT HANDLER OR EVENT LISTENER

EVENT NAMES ONLOAD ONCLICK ONMOUSEOVER ONFOCUS ONBLUR

HANDLING EVENTS : METHOD 1 RUN SOME JAVASCRIPT

HANDLING EVENTS : METHOD 2 ELEMENT.EVENT = WINDOW.ONLOAD NAMEFIELD.BLUR MYELEMENT.ONCLICK = FUNCTION(){ }

ENHANCING FORMS WITH JAVASCRIPT FIELD VALUES: FIELD EVENTS: FORM EVENTS

GETTING FORM AND FORM ELEMENTS ID NAMES

FORM ELEMENTS: TEXTFIELDS MAIN PROPERTY: MYTEXTFIELD.VALUE MAIN EVENTS ONFOCUS ONBLUR ONCHANGE ONKEYPRESS ONKEYDOWN ONKEYUP

FORM ELEMENTS: CHECKBOXES AND RADIO BUTTONS: MAIN PROPERTY: MYCHECKBOX.CHECKED MAIN EVENT: ONCLICK ONCHANGE

FORM ELEMENTS: SELECT MAIN PROPERTY: MYSELECT.TYPE SELECT-ONE MYSELECT.SELECTEDINDEX SELECT-MULTIPLE MYSELECT.OPTION[X].SELECTED MAIN EVENTS: ONCHANGE

FORM MAIN EVENT: ONSUBMIT

EVENTS MANY EVENTS ARE FIRED BY BROWSERS. HERE ARE THE MOST COMMON: ONCLICK : FIRED WHEN AN ELEMENT IS CLICKED ON (OR OTHERWISE ACTIVATED), INCLUDING LINKS, BUTTONS AND IMAGES. ONMOUSEOVER, ONMOUSEOUT : FIRED WHEN THE MOUSE ENTERS OR LEAVES THE BOUNDARIES OF AN ELEMENT. USEFUL FOR ROLLOVERS, ETC. ONMOUSEDOWN, ONMOUSEUP : FIRED WHEN THE MOUSE BUTTON IS PRESSED OR RELEASED ON AN ELEMENT. USEFUL IF YOU WANT TO DO SOMETHING WHILE THE MOUSE BUTTON IS DOWN. ONLOAD : AVAILABLE ONLY ON THE ELEMENT AND WINDOW OBJECT, FIRED WHEN THE DOCUMENT HAS FINISHED LOADING. USEFUL IN SCRIPTS THAT YOU LOAD FROM AN EXTERNAL FILE USING A ELEMENT IN THE DOCUMENT'S SECTION, BUT THAT REQUIRE THE DOCUMENT TO BE LOADED (AND THE DOM TO BE FULLY FORMED) BEFORE THEY CAN RUN.

FORM EVENTS TO REFERENCE A FORM IN CODE, FIRST MAKE SURE THE FORM HAS A NAME AND ID ATTRIBUTE SET. THEN USE ANY OF THE FOLLOWING NOTATIONS: DOCUMENT.FORMS["MYFORM"]; DOCUMENT.MYFORM; DOCUMENT.GETELEMENTBYID( "MYFORM" );

.FOCUS () IF YOU NEED TO PUT THE CURSOR ON SOME CONTROL IN A FORM WHEN THE FORM LOADS, FIRST MAKE SURE THE CONTROL HAS A NAME AND ID ATTRIBUTE SET, THEN USE THE FOCUS() METHOD OF THE CONTROL AS FOLLOWS:

.SELECT() TO SELECT THE TEXT INSIDE A FIELD, USE THE SELECT() METHOD OF THE CONTROL AFTER SETTING THE FOCUS TO IT:

.DISABLED=TRUE; TO DISABLE A CONTROL.

FORM VALIDATION VALIDATING ENTRIES IN AN HTML FORM WITH JAVASCRIPT CONSISTS IN THE FOLLOWING STEPS:  ASSIGN AND ID AND NAME TO EACH FIELD YOU WILL NEED TO VALIDATE.  ADD A SUBMIT BUTTON TO THE FORM.  DEFINE A FUNCTION THAT RETURNS TRUE OR FALSE DEPENDING ON WHETHER THE ENTRIES ARE VALID OR NOT.  ADD AN ONSUBMIT ATTRIBUTE TO THE FORM, ASSIGNING TO IT THE RETURN VALUE OF THE VALIDATING FUNCTION.

CREATE A USER REGISTRATION FORM SIMILAR TO THE ONE SHOWN BELOW. THE REQUIREMENTS ARE THE FOLLOWING: 1) THE USERNAME AND PASSWORD MUST NOT BE EMPTY, 2) THE PASSWORD AND CONFIRMATION FIELDS MUST BE THE SAME. MAKE SURE TO ADD A SUBMIT BUTTON ( NOT SHOWN ).