slide môn học HDJ bài 10 handling form and form element events
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (370.39 KB, 18 trang )
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/ 2 of 18
Form Object
Form object consist of three attributes:
Accept
Action
Method
For Example:
onChange happens when user changes what's in the
text field and then moves outside the text field
For Example:
name="first_text"
onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
Web Page Programming
onChange="writeIt('change');">
with
HTML,DHTML &
JavaScript/Session 10/ 4 of 18
Textfield object(2)
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 5 of 18
Command Button object(1)
Command button understands onClick
event
The onClick event occurs when user
clicks on a command button
value="Copy"
onClick="writeIt(myfm.first_text.value);">
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 6 of 18
Command Button object(2)
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 7 of 18
Checkbox Object (1)
A Checkbox is an HTML form object that
behaves as a toggle switch
Checkbox can have either checked or
unchecked
Like button checkbox also understands
onClick event
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 8 of 18
Checkbox Object(2)
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 9 of 18
Option Button/Radio Button
object(1)
Radio buttons are almost exactly like
checkboxes with respect to JavaScript
Radio buttons are different. Once a
radio button is on, it stays on until
another one is selected. Then the first
one goes off.
Option or radio button also understands
onClick event.
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 10 of 18
Option Button/Radio Button
object(1)
Web Page Programming 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)
Web Page Programming with
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:
<HTML>
<HEAD>
<TITLE> Form Events </TITLE>
<SCRIPT LANGUAGE="JavaScript">
Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 14 of 18
Form Validation(2)
function validateFirstName()
{
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;
if(str.length==0)
{
alert(" The Email field cannot be empty");
return false;
}
}
function processForm()
{
disp=open("", "result")
disp.document.write("<TITLE> Result Page </TITLE>"+"<PRE>")
disp.document.write("<H2 ALIGN='CENTER'>"+
"Thanks for signing in"+"</H2>"+"<HR>"+"<BR><BR>")
disp.document.write("First name \t\t: "+form1.fname.value+"<BR>")
disp.document.write("Last name \t\t: "+form1.lname.value+"<BR>")
disp.document.write("Email \t\t\t: "+form1.email.value+"<BR>")
disp.document.write("Your Comments \t\t: "+form1.comment.value+"<BR>")
disp.document.write("<PRE>")
Web Page Programming with
HTML,DHTML &
JavaScript/Session 10/ 16 of 18
Form Validation(4)
if(disp.confirm("Is this information correct"))
disp.close()
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2 ALIGN="CENTER"> Handling Form Events</H2><HR>
<FORM name="form1"><P> First Name : NAME="fname" size=10 onBlur="validateFirstName()">
Last Name : onBlur="validateLastName()">
<P> Email : <INPUT TYPE="text" NAME="email" size=10 onBlur="validateEmail()">
Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter your comments
</TEXTAREA>
<P ALIGN="CENTER">onClick="processForm()">
<INPUT TYPE="reset"></P>
</FORM>
</BODY>
</HTML>
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
