Scribd
Upload
452 views

Topic 3 CSS

This document discusses forms and event handling in client-side scripting languages. It describes the basic building blocks of forms, including text fields, text areas, checkboxes, radio buttons, and buttons. It explains how these form controls are used to collect user input on web pages. The document then provides details on properties and methods for forms, and examples of how to create different form controls like text fields, text areas, checkboxes, and radio buttons in HTML.

Uploaded by

Pratiksha Jadhav
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
452 views

Topic 3 CSS

This document discusses forms and event handling in client-side scripting languages. It describes the basic building blocks of forms, including text fields, text areas, checkboxes, radio buttons, and buttons. It explains how these form controls are used to collect user input on web pages. The document then provides details on properties and methods for forms, and examples of how to create different form controls like text fields, text areas, checkboxes, and radio buttons in HTML.

Uploaded by

Pratiksha Jadhav
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/ 30

Client Side Scripting Language 3-1 Form and Event Handling

3. Form and Event Handling (10 M)




3.1 Basics of a Form

3.1.1 Building Blocks of Form


 Form is a typical layout on the web page by which a user can interact with the web page.
 Typical component of forms are text, text area, checkboxes, radio buttons and push buttons. These
components of form are also called as form controls or controls.
 HTML allows us to place these form components on the web page and send the desired information
to the destination server.
 All these form contents appear in the <form> tag. The form has an attribute action which gets
executed when user clicks a button on the form.

Uses of Form
Forms are used in following manner
(1) Forms are used to collect the information from customer or students for online registrations
(2) Forms are used for online survey.
(3) Forms are used for conducting online examination, for getting feedbacks and so on.
(4) The information present in the form is submitted to the server for further processing

3.1.2 Properties and Methods of Form


 The commonly used properties and methods of the form are enlisted in the following table

Attribute Description

action It specifies the url where the form should be submitted.

method It specifies the HTTP methods such as GET, POST

get Default. Appends the form-data to the URL in name/value pairs:


URL?name=value&name=value

post Sends the form-data as an HTTP post transaction

name This attribute denotes the name of the form.

target It specifies the target of the address in the action attribute The target values can be as follows -

_blank Opens in a new window

_self Opens in the same frame as it was clicked (default)

TM
Client Side Scripting Language 3-2 Form and Event Handling

_parent Opens in the parent frameset

_top Opens in the full body of the window

framename Opens in a named frame

The form can be written inside as <body> tag as follows –

<body>
<form name=”myform” action=”/myServerPage.phtp” method=”GET” target=”_blank”>
//code for placing form controls here
…
…
…
</form>
</body>

3.1.3 Text
 Text is typically required to place one line text. For example if you want to enter some name then it is
always preferred to have Text field on the form.
 The text field can be set using
<input type="text" size=”30” name =”username” value=" ">
The input type is text and the value of this text field is “ ” That means the blank text field is displayed
initially and we can enter the text of our choice into it. There is size parameter which allows us to
enter some size of the text field.
 Some other parameters or attributes can be
o maxlength that allows us to enter the text of some maximum length.
o name indicates name of the text field.
o align denotes the alignment of the text in the text field. The alignment can be left, right, bottom
and top.

Example Code

HTML Document [TextDemo.html]


<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Input String:</b><br/><input type="text" size="25" value="">
</form>
</body>
</html>
Client Side Scripting Language 3-3 Form and Event Handling

Output

Script Explanation :
In above document
1) We have the label “Input String” just before the <input> tag. We can also specify the label by using
the <label> tag as follows -
<label>Input String: <br/><input type="text" size="25" value=""></label>
2) Thus the label gets bound to the text box. This aspect is always beneficial for a web programmer
because using label control we can focus on the corresponding text box contents.
3) Initially the text box field is blank. We can type some text inside this text box.
Ex. 3.1.1 : How will you create password field in a HTML form ?
Sol. : The password field is typically created on the form. Hence following code can be written to create it -
<form name=”form1”>
Password:<input type=”password”/>
</form>

3.1.4 Text Area


Text field is a form component which allows us to enter single line text, what if we want to have multiple
line text? Then you must use textarea component.
HTML Document [TextareaDemo.html]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
Enter the Desired text here
<textarea cols="40" rows="5" name="myname">
</textarea>
</form>
Client Side Scripting Language 3-4 Form and Event Handling

</body>
</html>
Output

Various parameters that can be set for the text area can be
 row denotes total number of rows in the text area.
 col specifies total number of columns in the text area.
 name denotes the name of the text area which can be utilised for handling that component for some
specific purpose.
 wrap can be virtual or physical. If the wrap is virtual then the line breaks get disappeared when the
text is actually submitted to the server. But if the wrap is assigned to the physical then the line breaks
(if any) appear as it is in the text.

3.1.5 Checkbox
 It is the simplest component which is used particularly when we want to make some selection from
several options.
 For having the checkbox we have to specify the input type as checkbox. For example
<input type="checkbox" name="option1" value="mango" checked="checked">Mango<br/>
 If we want to get the checkbox displayed as checked then set checked="checked"

Example Code

HTML Document[ChkBoxDemo.html]
<!DOCTYPE html>
<html>
<head>
<title>My Form with Check box</title>
</head>
<body>
<form name ="checkboxForm">
<div align="center"><br>
Select the fruit(s) of your choice<br/>
Client Side Scripting Language 3-5 Form and Event Handling

<input type="checkbox" name="option1" value="mango" checked="checked">Mango<br/>


<input type="checkbox" name="option2" value="apple">Apple<br/>
<input type="checkbox" name="option3" value="guava">Guava<br/>
</div>
</form>
</body>
</html>
Output

Script Explanation
1) In the above program to set some checkbox in checked state we can mention the attribute checked as
checked.
2) We can set the value attribute as “ “ but this then the checkbox will not get associated with any value.
The Mango, Apple and Guava are the labels of the checkboxes.

3.1.6 Radio Button


 This form component is also use to indicate the selection from several choices.
 Using input type=“radio” we can place radio button on the web page.
 This component allows us to make only one selection at a time.
 We can create a group of some radio button component.
 Following HTML document displays the radio buttons for two different groups.

HTML Document[RadioButDemo.html]
<!DOCTYPE html>
<html >
<head>
<title>My Form with radio buttons Page</title>
</head>
<body>
<form name="myform">
<div align="left"><br>
<b>Select Fruit which you like the most</b><br/>
Client Side Scripting Language 3-6 Form and Event Handling

<input type="radio" name="group1" value="Mango">Mango<br/>


<input type="radio" name="group1" value="Apple" checked> Apple<br/>
<input type="radio" name="group1" value="Grapes"> Grapes
<br/><br/><br/>
<b>Select Flower which you like the most</b><br/>
<input type="radio" name="group2" value="Rose"> Rose<br/>
<input type="radio" name="group2" value="Lotus">Lotus<br/>
<input type="radio" name="group2" value="Jasmine" checked>Jasmine<br/>
</div>
</form>
</body>
</html>
Output

Ex. 3.1.2 : What is the difference between group of checkbox buttons and group of radio buttons ?
Sol. : ● The checkbox and radio buttons are used for making the selection from a group of choices.
 When a user selects (checks) a checkbox, its value gets assigned as the current value of the checkbox
group's control name.
 A checkbox group's control name may get paired with several current values if the user selects more
than one checkbox.
 Radio buttons work just like checkboxes except they are typically set up to be mutually exclusive of
one another, i.e. when one is selected, all the others are automatically deselected.

3.1.7 Button
 We can create the button using <input type =”button”> tag.
 There are two types of buttons that can be created in HTML. One is called submit button and the
another one is reset button.
 Various parameters of submit button are
1) name denotes the name of the submit button.
2) value is for writing some text on the text on the button.
3) align specifies alignment of the button.
Client Side Scripting Language 3-7 Form and Event Handling

Example Code

HTML Document[Button.html]
<!DOCTYPE html>
<html >
<head>
<title> My Page </title>
</head>
<body>
<form name="myform" action="http://www.localhost.com/cgi-bin/hello.cgi" method="POST">
<div align="center">
<br/><br/>
<input type="text" size="35" value=" ">
<br><input type="submit" value="Send">
<input type="reset" value="Reset"><br>
</div>
</form>
</body>
</html>

Output

Script Explanation

1) In above HTML document, we have used the form whose name is “myform”.
2) There are two attributes associated with the form tag and those are action and method. The action
parameter indicates the address and the cgi script where the contents should go and method
parameter is for the methods for submitting the data. The method can be get or post. Thus by
specifying the action and method for a form we can send the desired data at desired location.
Client Side Scripting Language 3-8 Form and Event Handling

3.1.8 Select Element


 HTML allows us to have pop down menu on the web page so that the desired selection can be made.
 The parameter select is for the menu component and option parameter is for setting the values to the
options of drop down menu.
 We can make some specific option selected by selected value = .
 In the following HTML document we have created one drop down menu in which various fruits are
enlisted. By default “Banana” is set as selected.

HTML Document [Menu.html]


<!DOCTYPE html>
<html >
<head>
<title> My Page </title>
</head>
<body>
<form name="myform">
<div align="center">
<select name="My_Menu">
<option value="Mango">Mango</option>
<option value="Strawberry">Strawberry</option>
<option selected value="Banana">Banana </option>
<option value="Apple">Apple</option>
</select>
</div>
</form>
</body>
</html>
Output
Client Side Scripting Language 3-9 Form and Event Handling

3.1.9 Examples on Form Design

Ex. 3.1.3 : Create a HTML document that has the form with the following controls
a) A text box to collect the customer name.
b) Four checkboxes, one for the following items :
i. Four HTML textbooks for ` 1000 ii. Eight XML textbooks for ` 2000
iii. Four Javabeans books for ` 2500 iv. Eight UML textbooks for ` 1500
c) A collection of radio buttons that are labelled as follows –
i. Cash ii. Cheque/DD iii. Creadit card.
Sol. : <!DOCTYPE html>
<html >
<body>
<center><h2>REGISTRATION FORM</h2></center>
<hr/>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" size="25"value=""></td>
</tr>
<tr>
<td>Select the desired Items:</td>
<td>
<select name="f">
<option value="4 HTML Books(Rs. 1000)">4 HTML Books(Rs. 1000)</option>
<option value="8 XML Books(Rs. 2000)">8 XML Books(Rs. 2000)</option>
<option value="4 JavaBeans Books(Rs.2500)">4 JavaBeans Books(Rs.2500)</option>
<option value="8 UML Books(Rs.1500)">8 UML Books(Rs.1500)</option>
</select>
</td>
</tr>
<tr>
<td>
Mode of Payment:
</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Cash">Cash</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Cheque/DD">Cheque/DD</td>
</tr>
<tr>
Client Side Scripting Language 3 - 10 Form and Event Handling

<td><input type="radio" name="group1" value="Credit Card">Credit Card</td>


</tr>
<tr></tr><tr></tr><tr></tr>
<td><input type="submit" value="Submit"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
Ex. 3.1.4 : Write a form to collect details of a user such as name, address, radio button to choose subject of book
he wants to buy, dropdown to choose favorite author, comments for the last book he read.
Sol. : <!DOCTYPE html >
<html >
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Name:</b><input type="text" size="20" value=""><br/>
<b>Address:</b><input type="text" size="35" value=""><br/>
<b>Subjects:</b><br/>
<input type="radio" name="authors" value="Web Programming">Web Programming<br/>
<input type="radio" name="authors" value="Computer Network">Computer Network<br/>
<input type="radio" name="authors" value="Software Engineering">Software Engineering<br/>
<input type="radio" name="authors" value="Data Structures">Data Structures<br/>
<b>Select favorite Author:</b>
<select name="MyMenu">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="CCC">CCC</option>
<option value="DDD">DDD</option>
</select>
</br>
<b>Comments:</b></br>
<textarea cols="30" rows="10" name="comments">
</textarea>
<br/><br/>
<input type="submit" value="Submit"/>
<input type="reset" value="Clear"/>
</form>
</body>
</html>
Client Side Scripting Language 3 - 11 Form and Event Handling

Output

Ex. 3.1.5 : Design a simple HTML form for filling the information for registration of a student.
Sol. : HTML Form for Student Registration
<!DOCTYPE html>
<html >
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Student Name:</b><input type="text" size="20" value=""><br/><br/>
<b>Address:</b><input type="text" size="35" value=""><br/><br/>
<b>Email:</b><input type="text" size="20" value=""><br/><br/>
<b>Password:</b><input type="password" size="10" value=""><br/><br/>
<b>Select Course:</b><br/><br/>
<input type="radio" name="courses" value="Computer Engineering">Computer Engineering<br/><br/>
<input type="radio" name="courses" value="E&TC Engineering">E&TC Engineering<br/><br/>
<input type="radio" name="courses" value="Mechanical Engineering">Mechanical
Engineering<br/><br/>
<input type="radio" name="courses" value="Civil Engineering">Civil Engineering<br/><br/>
<b>Select Payment Mode:</b>
Client Side Scripting Language 3 - 12 Form and Event Handling

<select name="MyMenu">
<option value="Cheque">Cheque</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
</select>
<br/><br/><br/>
<input type="submit" value="Submit"/>
<input type="reset" value="Clear"/>
</form>
</body>
</html>
Output

Ex. 3.1.6 : Write a form to make login and password.


Sol. : <html>
<head>
<title>LOGIN FORM DEMO</title>
</head>
<body bgcolor="khaki">
<center>
<h2>Login Form</h2>
</center>
<form name="form1">
<table>
<tr>
<td><b>Name:</b></td>
Client Side Scripting Language 3 - 13 Form and Event Handling

<td><input type="text" name="userName">


</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password"name="pwd"></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Output

3.2 Form Events


 Event is an activity that represents a change in the environment. For example mouse clicks, pressing a
particular key of keyboard represent the events.
 A JavaScript event is an action that can be detected by JavaScript. Many of them are initiated by user
actions but some are generated by the browser itself. We say then that an event is triggered and then
it can be caught by JavaScript functions, which then do something in response.
 Event handler is a script that gets executed in response to these events. Thus event handler enables
the web document to respond the user activities through the browser window.
 Events are specified in lowercase letters and these are case-sensitive.
Client Side Scripting Language 3 - 14 Form and Event Handling

 Commonly used events and tag attributes are enlisted in the following table -

Events Intrinsic event Meaning Associated tags


attribute

blur Onblur Losing the focus. <button>


<input>
<a>
<textarea>
<select>

change onchange On occurrence of some change. <input>


<textarea>
<select>

click onclick When user clicks the mouse button. <a>


<input>

dblclick ondblclick When user double clicks the mouse <a>


button. <input>
<button>

focus onfocus When user acquires the input focus. <a>


<input>
<select>
<textarea>

keyup onkeyup When user releases the key from the Form elements such as
keyboard. input,button,text,textarea and so on.

keydown onkeydown When user presses the key down Form elements such as
input,button,text,textarea and so on.

keypress onkeypress When user presses the key. Form elements such as
input,button,text,textarea and so on.

mousedown onmousedown When user clicks the left mouse button. Form elements such as
input,button,text,textarea and so on.

mouseup onmouseup When user releases the left mouse Form elements such as
button. input,button,text,textarea and so on.

mousemove onmousemove When user moves the mouse. Form elements such as
input,button,text,textarea and so on.

mouseout onmouseout When the user moves the mouse away Form elements such as
from some element input,button,text,textarea and so on.

mouseover onmouseover When the user moves the mouse away Form elements such as
over some element input,button,text,textarea and so on.

load onload After getting the document loaded. <body>

reset onreset When the reset button is clicked. <form>


Client Side Scripting Language 3 - 15 Form and Event Handling

submit onsubmit When the submit button is clicked. <form>

select onselect On selection. <input>


<textarea>

unload onunload When user exits the document. <body>

Table 3.2.1

Example of Event Handling


 To understand how events works in JavaScript let us put some form components on the JavaScript.
 The onload event gets activated as soon as the web page gets loaded in the browser’s window.
Following script along with its output illustrate the onload tag attribute.

JavaScript[OnloadDemo.html]
<!DOCTYPE html>
<html >
<head>
<title>Demo of onload Tag Attibute</title>
<script type="text/javascript">
function my_fun()
{
//This message will be displayed on page loading

alert("Welcome"); When web document gets


} loaded on the browser window
</script> then my_fun() will be called
</head>

<body onload="my_fun()">
</body>
</html>
Output
Client Side Scripting Language 3 - 16 Form and Event Handling

3.2.1 Mouse Event


 Mouse Events are used to capture the interactions made by user using mouse. Various commonly
used mouse Events are described in the following table

Event Description

onclick The mouse was clicked on an element.

ondblclick The mouse was double clicked on an element.

onmousedown The mouse was pressed down over an element.

onmouseup The mouse was released over an element.

onmouseover The mouse was moved (not clicked) over an element.

onmouseout The mouse was moved off of an element.

onmousemove The mouse was moved while over an element.

For example -
 Following is a simple JavaScript in which on the button click we have called a function my_fun(). This
is a simple function in which we have displayed some message using alert popup box.

JavaScript[OnclickDemo.html]
<!DOCTYPE html >
<html >
<head>
<title>Demo of onlclick Tag Attibute</title>
<script type="text/javascript">
function my_fun()
{
alert("Hello I am in my function");
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Click" onclick="my_fun()">
</form>
</center>
</body>
</html>
Client Side Scripting Language 3 - 17 Form and Event Handling

Output

Ex. 3.2.1 : Insert an image into a web page. Write a script which displays the message when the mouse is over the
image. The co-ordinates of the mouse should be displayed if click attempted on the image.
Sol. : <html>
<head>
<script type="text/javascript">
function my_fun1()
{
points.innerText="Now the mouse is moving";
}
function my_fun2()
{
points.innerText="("+event.offsetX+" , "+event.offsetY+")";
}
</script>
</head>
<body onmousemove="my_fun1()" onmousedown="my_fun2()">
<center>
<span id="points">(0,0)</span>
<img src="d:\flower1.gif" style="position:absolute;top:50;left:90">
</center>
</body>
</html>
Client Side Scripting Language 3 - 18 Form and Event Handling

Output

3.2.2 Key Event


 The keyboard events are the events that occur when the user interacts using the keyboard. Various
types of keyboard events are enlisted in the following table -

Event Description

onkeydown When user presses the key on the keyboard.(this happens first)

onkeypress The user presses a key(this happens after onkeydown).

onkeyup The user releases a key that was down.(this happens last).

JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MyKeyfunction()
{
alert("You have pressed the key");
}
</script>
</head>
<body>
<form>
Enter Name: <input type="text" onkeypress="MyKeyfunction()"/>
</form>
</body>
</html>
Client Side Scripting Language 3 - 19 Form and Event Handling

Output

3.3 Form Objects and Elements


 Website contains various objects. The very first object which we see is window.
 The window object contains the HTML document which is called as document object. This document
object has several important functionalities. Out of which, the most commonly used functionality is
write() method. We can display any message on Web page using following statement
document.write(“Hello, How are you?”);
 Note that one can omit the use of window. That means instead of writing window.document.write if
we write document.write then it is perfectly allowed.
 A form is placed on document. The form objects are stored in the array called forms. They appear in
the order in which the forms appear in the document.
 Each form can be refereed by using the index of the forms array. For example- suppose we want to
refer second form then we write
document.forms[1]
 A form can be referred by its name. For instance – if a form has a name form1 then we can refer this
form as document.forms.form1
JavaScript Example : Following is a program in which we can refer the form element text and display
the value in text box
<!DOCTYPE html>
<html>
<head>
Client Side Scripting Language 3 - 20 Form and Event Handling

<script type="text/javascript">
function Myfunction()
{
alert("You have entered the name: "
+document.forms.myform.username.value);
}
</script>
</head>
<body>

<form name="myform">
Enter Name: <input type="text" name="username"/>
<input type="button" value="Click Me" onclick="Myfunction()"/>
</form>
</body>
</html>
Output

Script Explanation : In above JavaScript,


(1) We have created a form within <body> </body> section. On this form there are two elements - text
field and a button.
(2) The text field has a name ‘username’.
(3) On the button click, we triggered an event onclick and this event can be handled using the function
named Myfunction.
(4) The Myfunction is defined in the <head> </head> section.This function refers to the text field value
by the statement
Client Side Scripting Language 3 - 21 Form and Event Handling

(5) Using the alert popup box the text typed within the textbox will be displayed.
We can modify the above given Myfunction as follows for efficient use
function Myfunction()
{
with(document.forms.myform.username)
{
alert("You have entered the name: "+value);
}
}

3.4 Changing Attribute Value Dynamically


 It is possible to change the attributes of the form elements dynamically. That means – during form
feeling process itself, the color or font of the text field can be changed. This dynamic change helps the
user to notify the importance changes in the form fields.
 Following is an example of changing the attribute value dynamically. In this example we are changing
the background color of the text box as the user enters some data in it.

JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ChangeMe(Ele)
{
Ele.style.background='pink'
}
</script>
</head>
<body>
<form name="myform">
Enter RollNo: <input type="text" name="roll" onchange="ChangeMe(this)"/>
<br/><br/>
Enter Name : <input type="text" name="name" onchange="ChangeMe(this)"/>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Client Side Scripting Language 3 - 22 Form and Event Handling

Output

3.5 Changing Option List Dynamically


 Option list represents the list of one or more than one items which can be chosen by the user. In a web
application, it is a common practice to change the contents of the option list base on some category
chosen.
 That means JavaScript allows to change the items present in the list dynamically. Following example
illustrate this idea
Ex. 3.5.1 : Write a JavaScript to create three categories - Fruit, Flower and Colour. Based on the selection of category,
the items in the option list must get changed.
Sol. : DynamicOptionList.html
<html>
<head>
<script type="text/javascript">
function MySelection(val)
{
with(document.forms.myform)
{
if(val==1)
{
choices[0].text="Mango"
choices[0].value=1
choices[1].text="Orange"
choices[1].value=2
choices[2].text="Banana"
choices[2].value=3
}
if(val==2)
{
Client Side Scripting Language 3 - 23 Form and Event Handling

choices[0].text="Rose"
choices[0].value=1
choices[1].text="Jasmine"
choices[1].value=2
choices[2].text="Lotus"
choices[2].value=3
}
if(val==3)
{
choices[0].text="Red"
choices[0].value=1
choices[1].text="Green"
choices[1].value=2
choices[2].text="Blue"
choices[2].value=3
}

}
}
</script>
</head>
<body>
<h4>Select the Desired Category</h4>
<form name="myform">
<input type="radio" name="items" checked="true" value=1
onclick=MySelection(this.value)>Fruit
<input type="radio" name="items" value=2
onclick=MySelection(this.value)>Flower
<input type="radio" name="items" value=3
onclick=MySelection(this.value)>Colour
<br/><br/>
<select name="choices">
<option Value=1>Mango
<option Value=2>Orange
<option Value=3>Banana
</select>
</form>
</body>
</html>
Client Side Scripting Language 3 - 24 Form and Event Handling

Output

3.6 Evaluating Check Box Selection


 Evaluating checkbox selection is a simple technique using which we can display the names of check
boxes that are selected.
 Following JavaScript illustrates this concept.

JavaScript Document
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MyFunction()
{
var str="You have selected: ";
Client Side Scripting Language 3 - 25 Form and Event Handling

with(document.forms.myform)
{
if(red.checked==true)
str+=" Red";
if(blue.checked==true)
str+=", Blue";

if(green.checked==true)
str+=", Green";
if(yellow.checked==true)
str+=", Yellow";
}
alert(str);
}
</script>
</head>
<body>
<h3> Select color(s) of your choice: </h3>
<form name="myform">
<input type="checkbox" name="red" value="red"> Red<br/>
<input type="checkbox" name="blue" value="blue"> Blue<br/>
<input type="checkbox" name="green" value="green"> Green<br/>
<input type="checkbox" name="yellow" value="yellow"> Yellow<br/>
<input type="button" name="Color" value="Choose Color" onclick="MyFunction()">
</form>
</body>
Output
Client Side Scripting Language 3 - 26 Form and Event Handling

3.7 Changing a Label Dynamically


 We can change the label of any form element dynamically. The same element can be used for multiple
purpose by simply changing the label.
 For example - Following is a JavaScript in which we are just changing the label of the “reset” button.
Hence same button can be used for “Fruit” list display or “Flower” list display. The options of the List
box also get changed accordingly.

JavaScript Document
<html>
<head>
<script type="text/javascript">
function MySelection(val)
{
with(document.forms.myform)
{
if(val=="Fruit")
{
Button_Label.value="Flower"
choices[0].text="Rose"
choices[0].value=1
choices[1].text="Jasmine"
choices[1].value=2
choices[2].text="Lotus"
choices[2].value=3
}
if(val=="Flower")
{
Button_Label.value="Fruit"
choices[0].text="Mango"
choices[0].value=1
choices[1].text="Orange"
choices[1].value=2
choices[2].text="Banana"
choices[2].value=3
}
}
}
</script>
</head>
<body>
<h4>Select the Desired Category</h4>
<form name="myform">
<select name="choices">
<option Value=1>Mango
<option Value=2>Orange
<option Value=3>Banana
</select>
Client Side Scripting Language 3 - 27 Form and Event Handling

<input type="reset" name="Button_Label" value="Fruit"


onclick="MySelection(this.value)"/>
<br/><br/>
</form>
</body>
</html>
Output

3.8 Manipulating Form Elements


 We can manipulate the form elements before submitting it to web server. For that purpose we can
keep some of the fields hidden and at the time of submitting the form, the desired value can be set to
the hidden field so that the assigned value for hidden field can be submitted.
 Following example shows that - the user enters roll number and name. The registration id for the
student can be formed by taking first two characters of ‘name’ followed by the roll number. Initially
the registration id field is kept hidden and at the time of submitting the form this value is assigned to
the registration field.

JavaScript Document
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MyFunction()
{
with(document.forms.myform)
{
if(name.value.length>0 && roll.value.length>0)
regid.value=name.value.charAt(0)+
name.value.charAt(1)+
roll.value
Client Side Scripting Language 3 - 28 Form and Event Handling

}
}
</script>
</head>
<body>
<form name="myform">
Roll Number:<input type="text" name="roll"/>
<br/><br/>
Name :<input type="text" name="name"/>
<br/><br/>
Reg.ID :<input type="hidden" name="regid"/>
<br/><br/>
<input type="submit" name="Submit" value="Submit" onclick="MyFunction()"/>
</form>
</body>
</html>

3.9 Intrinsic Functions, Disabling Elements and Read-only Elements

3.9.1 Intrinsic Functions


 Intrinsic functions means the built in functions that are provided by JavaScript.
 The javaScript provides the intrinsic functions for Submit or Reset button. One can use these
functionalities while submitting the form or resetting the form fields.
 The submit() method of the form object can be used to send the form to the server in exactly same
way as if the user has pressed the Submit button.

JavaScript Example
<!DOCTYPE html>
<html>
<body>
<form name="myform">
Roll Number:<input type="text" name="roll"/>
<br/><br/>
Name :<input type="text" name="name"/>
<br/><br/>
<img src="submit.gif" onclick="javascript:document.forms.myform.submit()"/>
<br/><br/>
</form>
</body>
</html>

3.9.2 Disabling Elements


 We can restrict some fields on the form by using disabled.
 If disabled property of particular form element is set to true then user can not edit that element.
Similarly on setting disabled property to false we can edit the field.
Client Side Scripting Language 3 - 29 Form and Event Handling

For example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function EnableFunction()
{
document.forms.myform.name.disabled=false
}
function DisableFunction()
{
document.forms.myform.name.disabled=true
}
</script>
</head>
<body>
<form name="myform">
User Name:<input type="text" name="name"/>
<br/><br/>
<input type="button" value="Disable Name Field" onclick="DisableFunction()"/>
<br/><br/>
<input type="button" value="Enable Name Field" onclick="EnableFunction()"/>
</form>
</body>
</html>
Output

3.9.3 Read-only Elements


 Sometimes we need to set some value to a field which user should not change. To restrict user from
changing the value of particular field we make that element readonly by setting readonly=true.
 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.
 Following example illustrates the use of readonly element

JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ReadOnlyFunction()
{
document.forms.myform.name.readOnly=true
}
</script>
</head>
<body>
<form name="myform">
User Name:<input type="text" name="name"/>
<br/><br/>
<input type="button" value="ReadOnly Name Field" onclick="ReadOnlyFunction()"/>
</form>
</body>
</html>
Output

You might also like