Scribd
Upload
25 views

Chapter 3 CSS

Uploaded by

tendulkarnishchal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Chapter 3 CSS

Uploaded by

tendulkarnishchal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Chapter 3

Form and event Handling


3.1 Building blocks of a Form, properties and methods of form, button, text, text area, checkbox, radio button,
select element.
3.2 Form events- mouse event, key events.
3.3 Form objects and elements
3.4 Changing attribute value dynamically.
3.5 Changing option list dynamically
3.6 Evaluating checkbox selection
3.7 Changing a label dynamically
3.8 Manipulating form elements
3.9 Intrinsic JavaScript functions, disabling elements, read only elements.

Building blocks of a Form


A form is a section of an HTML document that contains elements such as radio buttons, text boxes, check
boxes, and option lists. HTML form elements are also known as controls. Elements are used as an efficient
way for a user to enter information into a form

Form events
Event Description
onload Executes when the browser finishes loading a window or all frames within a
frameset
onunload Executes when the browser removes a document from a window or frame
onclick Executes when the mouse button is clicked over an element
ondblclick Executes when the mouse button is double-clicked over an element
onmousedown Executes when the mouse button is clicked while the mouse cursor is over an
element
onmouseup Executes when the mouse button is released while the mouse cursor is over an
element
onmouseover Executes when the mouse cursor moves onto an element
onmousemove Executes when the mouse cursor is moved while over an element
onmouseout Executes when the mouse cursor is moved away from an element
onfocus Executes when an element receives focus
onblur Executes when an element loses focus
onkeypress Executes when a key is pressed and released
onkeydown Executes when a key is held down.
onkeyup Executes when a key is released
onsubmit Executes when a form is submitted
onreset Executes when a form is reset
onselect Executes when text is selected in a textfield
onchange Executes when an element loses input focus and the value of the element has
changed since gaining focus

Client Side Scripting Chapter 3 CO5G 1


Form Objects and Elements
The following example shows how to access an attribute of a form. We defined the display() function in the
JavaScript within the <head> tag. This function receives the value of the form’s Reset element and displays it
in an alert dialog box . The function is called in response to an onclick event that occurs when the user clicks
the Reset button.

<html>
<head>
<title>Accessing form attributes</title>
<script language="Javascript" type="text/javascript">
function display()
{
alert('Value: ' + document.forms.order.Reset.value);
}
</script>
</head>
<body>
<FORM action="http://www.jimkeogh.com" method="post" name="order">
<P>
First Name: <INPUT type="text" name="Fname"/><BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email"/><BR>
<INPUT name="Submit" value="Submit" type="submit"/>
<INPUT name="Reset" value="Reset" type="reset" onclick="display()"/>
</P>
</FORM>
</body>
</html>

Validate email address : program


<html>
<head>
<title>onblur event</title>
<script language="Javascript" type="text/javascript">
function ValidateEmail(EmailAddress)
{
var Location = EmailAddress.indexOf('@');
if ( Location == -1)
{
alert('You entered an inaccurate email address.');
}
else
{
alert("correct email id ");
}
}
Client Side Scripting Chapter 3 CO5G 2
</script>
</head>
<body>
<FORM action="http://www.jimkeogh.com" method="post">
<P>
First Name: <INPUT type="text" name="Fname"/><BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email" onblur="ValidateEmail (this.value)"/><BR>
<INPUT name="Submit" value="Submit" type="submit"/>
<INPUT name="Reset" value="Reset" type="reset"/>
</P>
</FORM>
</body>
</html>

Mouse events:
Javascripts intraction with HTML is handled through events that occur when the user or browser manipulates a
page
Mouse events :
1. mouseDown: Triggered by an element when a mouse button is pressed down over it.
2. MouseUP
3. MouseOver
4. MouseOut
5. Mouemove

Complex events:
1. Click
2. Contextmenu
3. Doubleclick
Example
<html
>
<head><title>Events</title>
<script>
function react()
{
alert("please enter any value");
}
</script></head>
<body>
<form name="myform" action="post"onmousedown="react()">
<input value="click mouse here">
</form>
</body>
</html>

Client Side Scripting Chapter 3 CO5G 3


Key Events:
<html>
<head>
<title>Key Event</title>
</head>
<body>
<div id="panel"></div>
<script>
var panel;
panel = document.getElementById("panel");
panel.innerHTML ="Press a Key...";
document.addEventListener("keydown",keydown,false);
document.addEventListener("keyup",keyup,false);
document.addEventListener("keypress",keypress,false);
function keydown()
{
panel.innerHTML +="<br/>Key Pressed:";
}
function keyup()
{
panel.innerHTML +="<br/> Key Released";
}
function keypress(e)
{
var keynum = (window.event) ? event.keyCode : e.which;
panel.innerHTML+=String.fromCharCode(keynum);
}
</script>
</body>
</html>

Button events :
<html>
<head>
<title>EventHello.html</title>
<script type="text/javascript" src="EventHello.js">
</script>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script>
function sayHello(event)
{
window.alert("Hello World!\n\n"+"Event type:"+event.type+"\n"+"Event target
type:"+event.target.nodName);
return;
}

Client Side Scripting Chapter 3 CO5G 4


</script>
</head>
<body>
<p>
<button id="myBtn" type="button">Click for the message!</button>
<script type="text/javascript">
var button=window.document.getElementById("myBtn");
button.addEventListener("click",sayHello,false);
</script>
</p>
</body>
</html>

Changing Attribute Values Dynamically:


We can change an attribute of an element by assigning a new value to the attribute from within a JavaScript
function. The function is then called when an appropriate event occurs. The change in attribute value can be
reflected to the user by highlighting the value or text by same color. Here updated value is shown in blue and
change the background color to pink.
Onchange event is associated with many elements (<input>,<select>) of a form object and used to call a
function where change of attribute value code is written.

Example :
<html>
<head>
<title>Dynamically Changing Element Attributes</title>
<script language="Javascript" type="text/javascript">

function Highlight(Element)
{
Element.style.color = 'blue'
Element.style.backgroundColor = 'pink'
}
</script>
</head>
<body>
<FORM name="Contact" action="http://www.jimkeogh.com" method="post">
<P>
First Name: <INPUT value="Bob" type="text"
name="Fname" onchange="Highlight(this)"/><BR>
Last Name: <INPUT value="Smith" type="text"
Client Side Scripting Chapter 3 CO5G 5
name="Lname" onchange="Highlight(this)"/><BR>
Email: <INPUT value="bsmith@mcgrawhill.com" type="text"
name="Email" onchange="Highlight(this)"/><BR>
<INPUT name="Submit" value="submit" type="submit"/>
<INPUT name="Reset" value="Method" type="reset"/>
</P>
</FORM>
</body>
</html>

Example 2:
<html>
<head>
<title>HTML Form</title>
<script type="text/javascript">
function OnSelectionChange(element)
{
var selected=element.options[element.selectedIndex].value;
alert("You have selected:"+selected);
}
</script>
</head>
<body>
Select an item fromthe following list:</br>
<select onchange="OnSelectionChange(this)">
<option value="Apple">Apple
<option value="Banana">Banana
<option value="Orange">Orange
</selected>
</body>
</html>

Changing an Option List Dynamically


1. An option list presents a user with two or more items from which to choose. Items that appear on the
option list are typically set when the option list is created. However, we can change the content of an
option list on the fly by using a JavaScript function.
2. The purpose of option list is to present a user two or more items for choice. Elements in option list are
usually set when the option list is created. However you can change the content of an option list at
runtime by using a Javascript function.
3. updateList() function will be called with the value of the checked radiobutton sothat it will check
which radiobutton is source.

<!DOCTYPE html>
<html>
<head>
<title> HTML Form </title>
<script language="Javascript" type="text/javascript">
Client Side Scripting Chapter 3 CO5G 6
function updatelist(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == 1)
{
OptionList[0].text = "Mango";
OptionList[0].value= 1;
OptionList[1].text = "Banana";
OptionList[1].value= 2;
}
if(ElementValue==2)
{
OptionList[0].text = "Potato";
OptionList[0].value= 1;
OptionList[1].text = "Cabbage";
OptionList[1].value= 2;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="OptionList" size="2">
<option value=1>Mango
<option value=2>Banana
</select>
<br>
<input type="radio" name="group1" value=1 checked="true" onclick="updatelist(this.value)">Fruits
<input type="radio" name="group1" value=2 onclick="updatelist(this.value)">Vegetables <br>
<input name="Reset" value="Reset" type="reset"> </p>
</form>
</body>
</html>

Client Side Scripting Chapter 3 CO5G 7


Evaluating Check Box Selections
1. A check box is a common element found on many forms and is used to enable a user to select one or
more items from a set of known items. You can write a Java Script function that evaluates whether or
not a check box was selected and then processes the result according to the needs of your application.
2. A checkbox is created by using the input element with the type=checkbox attribute value pair.
3. A checkbox in a form has two states (checked or unchecked) and is independent of the state of other
checkboxes in the form.

<html>
<head>
<title>HTML Form</title>
<script language="Javascript" type="text/javascript">
function selection()
{
var x="You selected: ";
with (document.forms.myform)
{
if(a.checked == true)
x+= a.value+" ";
if(b.checked == true)
x+=b.value+" ";
if(o.checked == true)
x+=o.value+" ";
if(p.checked == true)
x+=p.value+" ";
if(g.checked == true)
x+=g.value+" ";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select your favourite Friuts:<br>
<input type="checkbox" name="a" value="apple">Apple<br>
<input type="checkbox" name="b" value="banna">Banana<br>
<input type="checkbox" name="o" value="orange">Orange<br>
<input type="checkbox" name="p" value="pear">Pear<br>
<input type="checkbox" name="g" value="grapes">Grapes<br>
<input type=reset value="Show" onclick="selection()">
</form>
</body>
</html>

Client Side Scripting Chapter 3 CO5G 8


Changing Labels Dynamically
Just like we have changed an option list dynamically same way we can change a label of a button.
Following example make use of option list(consist of fruits name) and a button. Initially when form
will be loaded then option list shows the list of fruits and label of button is fruits. Once user click on
the button its label will get changed to the vegetables and list will display all fruits.

<!doctype html>
<html lang="en">
<head>
<title>HTML Form</title>
<script language="Javascript" type="text/javascript">
function updateList(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == "fruits")
{
toggleButton.value = "vegetables";
OptionList[0].text = "Mango";
OptionList[0].value = 1;
OptionList[1].text = "Banana";
OptionList[1].value = 2;
}
if(ElementValue=="vegetables")
{
toggleButton.value = "fruits";
OptionList[0].text = "Potato";
OptionList[0].value = 1;
OptionList[1].text = "Cabbage";
OptionList[1].value = 2;
}
}
}
Client Side Scripting Chapter 3 CO5G 9
</script>
</head>
<body>
<form action="" name="myform" method="post">
<p>
<select name="OptionList" size="2">
<option value=1>Mango
<option value=2>Banana
</select>
<br>
<input type="reset" value="fruits" name="toggleButton"
onClick="updateList(this.value)">
</p>
</form>
</body>
</html>

Manipulating Elements Before the Form Is Submitted:


1. Javascript provide us facility to manipulate elements on a form after the user clicks the submit
button and before the form is actually submitted to the CGI application.
2. Javascript make it possible with the help of hidden element which is similar to any html
element except it does not appear on screen.
3. A hideen element has a name and value that is sent to the CGI program along with other
elements of the form for processing.

<html>
<head>
<title> HTML Form </title>
<script language="Javascript" type="text/javascript">
function addEmail()
{
with(document.forms.myform)
{
if(Fname.value.length>0 && Lname.value.length>0)
{
//alert(Fname.value.charAt(0)+Lname.value+'@xyz.com');
Email.value=Fname.value.charAt(0)+Lname.value+'@xyz.com';

}
}
Client Side Scripting Chapter 3 CO5G 10
}
</script>
</head>
<body>
<form name="myform" action="post">
<p>
First Name:<input type="text" name="Fname"><br>
Last Name:<input type="text" name="Lname" ><br>
Email:<input type="email" name="Email" ><br>
<input name="Submit" value="submit" type="button" onclick="addEmail()">
</p>
</form>
</body>
</html>

Intrinsic JavaScript Functions


1. JavaScript has a special set of functions called intrinsic functions that mimic actions of the Submit
button and Reset button of a form. We can call an intrinsic function in the same way you would if you
had defined the function.
2. An intrinsic function is often used to replace the Submit button and the Reset button with your own
graphical images, which are displayed on a form in place of these buttons. This is illustrated in the next
example. Two <img> (image) tags are used: one to display submit.gif and the other to display reset.gif
each of these traps the onclick event and calls the appropriate intrinsic function.
3. This has the same effect as inserting the Submit and Reset buttons on the form and then clicking them.

<html>
<head>
<title>HTML Form </title>
</head>
<body>
<form name="myform" action="post">
<p>
First Name:<input type="text" name="Fname"><br>
Last Name:<input type="text" name="Lname"><br>
<img src="submit.jpg " onclick="javascript:document.forms.myform.submit()" width=100>
<img src="reset.jpg" onclick="javascript:document.forms.myform.reset()" width=100>
</p>
</form>
</body>
</html>

Client Side Scripting Chapter 3 CO5G 11


Disabling Elements
It is common to display a form with some elements disabled, which prevents the user from entering information into the
element.
Following are the characteristic of disabled elements:
1. Cannot have focus.
2. Do not receive or fire mouse events.
3. Cannot receive user input
4. Disabled elements are rendered in grey by default in browsers.

Example : The Email element is disabled until the first and last names are entered into
the form.
<html>
<head>
<title>Disabled</title>
<script language="Javascript" type="text/javascript">
function EnableEmail()
{
with (document.forms.Contact)
{
if (Fname.value.length >0 && Lname.value.length >0)
{
Email.disabled = false;
}
}
}
</script>
</head>
<body>
<FORM name="Contact" action="http://www.jimkeogh.com" method="post">
<P>
First Name: <INPUT type="text" name="Fname" onchange=" EnableEmail()"/> <BR>
Last Name: <INPUT type="text" name="Lname" onchange=" EnableEmail()"/><BR>
Email: <INPUT type="text" name="Email" disabled=true/><BR>
<INPUT name="Submit" value="Submit" type="submit"/>
<INPUT name="Reset" value="Reset" type="reset">
</P>
</FORM>

Client Side Scripting Chapter 3 CO5G 12


Readonly Elements
You can use a JavaScript function to change the value of an element that the user cannot
change (a read-only element). This is possible by setting an element’s readonly attribute. If the readonly
attribute is set to true, then no one, including your JavaScript function, can change the value of the
element. If the readonly attribute is set to false, then anyone, including the user entering information
into the form, can change the value of the element.

Example 1:
You can change the value of the readonly attribute from within your JavaScript function.

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
function changeState()
{
var textarea = document.getElementById("myText");
textarea.readOnly = !textarea.readOnly;
}
</script>
</head>
<body>
<textarea id="myText" rows="3" readOnly="readOnly">Change this text!</textarea>
<button onclick="changeState();">Change me</button>
</body>
</html>

Example 2:
The Email element is set to readonly. This means that the user cannot enter an e-mail address. Each
time the value of the Fname and Lname elements change, the SetEmail() function is called.
<html>
<head>
<title>Read Only</title>
<script language="Javascript" type="text/javascript">
function SetEmail()
{
with (document.forms.Contact)
{
if (Fname.value.length >0 && Lname.value.length >0)
{
Email.readonly = false;
Client Side Scripting Chapter 3 CO5G 13
Email.value = Fname.value.charAt(0) + Lname.value + '@mcgrawhill.com';
Email.readonly = true;
}
}
}
</script>
</head>
<body>
<FORM name="Contact"
action="http://www.jimkeogh.com" method="post">
<P>
First Name: <INPUT type="text" name="Fname" onchange="SetEmail()"/><BR>
Last Name: <INPUT type="text" name="Lname" onchange="SetEmail()"/><BR>
Email: <INPUT type="text" name="Email" readonly=true/><BR>
<INPUT name="Submit" value="Submit" type="submit"/>
<INPUT name="Reset" value="Reset" type="reset">
</P>
</FORM>
</body>

For More Programs:-

Client Side Scripting Chapter 3 CO5G 14

You might also like