slide môn học HDJ bài 10 handling form and form element events

Handling Form and Form Element Events Session 10 Objectives  Work on form object and form elements  Handle form object events  Form validation Web Page Programming with HTML,DHTML & JavaScript/Session 10/ of 18 Form Object  Form object consist of three attributes:     Accept Action Method For Example: Result Page "+"") disp.document.write(""+ "Thanks for signing in"+""+""+"") disp.document.write("First name \t\t: "+form1.fname.value+"") disp.document.write("Last name \t\t: "+form1.lname.value+"") disp.document.write("Email \t\t\t: "+form1.email.value+"") disp.document.write("Your Comments \t\t: "+form1.comment.value+"") disp.document.write("") Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 16 of 18 Form Validation(4) if(disp.confirm("Is this information correct")) disp.close() } // > Handling Form Events First Name : Last Name : Email : Comments : Enter your comments Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 17 of 18 Form Validation(5) Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 18 of 18 [...]... Comments \t\t: " +form1 .comment.value+"") disp.document.write("") Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 16 of 18 Form Validation(4) if(disp.confirm("Is this information correct")) disp.close() } // > Handling Form Events First Name : ... HTML,DHTML & JavaScript/Session 10/ 13 of 18 Form Validation(1)    Validate each and every important field by ensuring that none of the fields are empty Also the fields should not contain any invalid information Consider an example: Form Events 10/ 14 of 18 Form Validation(2) function... with HTML,DHTML & JavaScript/Session 10/ 11 of 18 ComboBox/Select object(1)    A ComboBox object on an HTML form appears as drop-down list or a scrollable list of selectable items To conserve form space, the scrollable list of selectable items is used ComboBox supports onBlur, onFocus, and onChange events Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 12 of 18 ComboBox/Select object(2)... Comments : Enter your comments < /FORM> Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 17 of 18 Form Validation(5) Web Page Programming... var str= form1 .fname.value; if(str.length==0) { alert(" The first name cannot be empty"); return false; } return true } function validateLastName() { var str= form1 .lname.value; if(str.length==0) { alert(" The last name cannot be empty"); return false; } return true; } Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 15 of 18 Form Validation(3) function validateEmail() { var str= form1 .email.value;... false; } } function processForm() { disp=open("", "result") disp.document.write(" Result Page "+"") disp.document.write(""+ "Thanks for signing in"+""+""+"") disp.document.write("First name \t\t: " +form1 .fname.value+"") disp.document.write("Last name \t\t: " +form1 .lname.value+"") disp.document.write("Email \t\t\t: " +form1 .email.value+"")... onClick="processForm()"> < /FORM> Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 17 of 18 Form Validation(5) Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 18 of 18