0% found this document useful (0 votes)

114 views39 pages

Unit 3 Client Side Scripting Msbte

Uploaded by

ganesh dhotre

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

0% found this document useful (0 votes)

114 views39 pages

Unit 3 Client Side Scripting Msbte

Uploaded by

ganesh dhotre

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/ 39

lOMoARcPSD|47063927

Unit 3 - Client Side Scripting MSBTE

Computer Engineering (Sinhgad Technical Education Society)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by ganesh dhotre ([email protected])
lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

UNIT:3
Form and Event Handling
-------------------------------------------------------------
3.1 Building blocks of a form
HTML Form

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number etc.

Why use HTML Form

HTML form is used to development of dynamic web application where user enters the input
and based on the user input server sends response to the client.

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form
such as shipping address and credit/debit card details so that item can be sent to the given
address.

HTML Form Syntax

<form>
//input controls e.g. textfield, textarea, radiobutton, button
</form>

3.1.1 Properties and Methods of Form:

Attributes can be added to an HTML element to provide more information about how the
element should appear or behave.

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Form element attributes are:

Attribute Description

action Specifies where to send the form-data when a form is submitted

method Specifies the HTTP method to use when sending form-data.

1.GET:by default form method is GET. In this, the form data is appended to
the URL when submitted.

2.POST:The form data is not appended to the URL

name Specifies the name of the form

target Specifies where to display the response that is received after submitting the
form

Values can be set to:

1. _black : the target url will open in new blank window

2._self : the target url will open in same window. Default target is _self

3._parent :the target url will open in parent frameset

4._top: the target url will open in full body of window

Notes on GET:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:
 Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

The HTML form contains following four elements:

Tag Description

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<select> It defines a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

Form Object Methods:

1. reset() : The reset() method resets the values of all elements in a form
Event Name: onreset()
2. submit(): The submit() method submits the form
Event Name: onsubmit()

Program: Write a javascript code to implement onsrest event

<html>
<head>
<script language="javascript" type="text/javascript">
function clean()
{
alert("Reset......");
}
</script>
</head>
<body>
<form onreset="clean()">
User Name : <input type="text" name="name"><br>
<input type="reset" value="Reset">
</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

Program:Write a Javascript code to implement onsubmit event

<html>
<head>
<script language="javascript" type="text/javascript">
function submitdata()
{
alert("Submit......");
}
</script>
</head>
<body>
<form onsubmit="submitdata()">
User Name : <input type="text" name="name"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.1.2 Button Element:

In HTML following are three types of button that we can create using <input> element:

1.Submit: submit button send form data to whatever action has been mentioned in the action
attribute of the <form> element. Set the type attribute of the<input> tag to “submit” in order
to place a submit button on a web page

2.Reset: A reset button allows users to clear their web form data. It wipes values from all field
by “reseting” the form to its default appearance.

3.Button:Button will create simple push buttons, which can be programmed to control
custom functionality anywhere on a webpage as required when assigned an event handler
function

Attribute Values

Value Description

button The button is a clickable button

submit The button is a submit button (submits form-data)

reset The button is a reset button (resets the form-data to its initial
values)

Program : Write a HTML code to create types of button on from

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

3.1.3 Text:

The input element defines an input field. A textbox is created by specifying the
type attribute to “text”.

The <input type="text"> defines a single-line text field.

The default width of the text field is 20 characters.

Attributes Description

Type=” ” It creates a textbox on form

Name=” “ The field name is used to identify the form field

Size=” “ The input field width is specified by the number of

character
Maxlength=” “ Specifies the maximum number of characters allowed
in the input field.
Value=” “ Speciifes the initial text displayed in the field

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Program: Write a HTML code to demonstrate Text element with attributes

<html>
<body>
<form name="form1">
<p>Default<br>
<input type="text" name="text1"></p>
<p>Size : 12 and Maxlength : 3 <br>
<input type="text" name="text2" size="12" maxlength="3"></p>
<p>value Attribute : "text value"<br>
<input type="text" value="text value" name="text3"></p>
</form>
</body>
</html>

Output:

3.1.4 Textarea:

The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like comments or
reviews.

A text area can hold an unlimited number of characters, and the text renders in a fixed-
width font (usually Courier).

The size of a text area is specified by the cols and rows attributes.

The name attribute is needed to reference the form data after the form is submitted.

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Attribute Description

cols Specifies the visible width of a text area

name Specifies a name for a text area

rows Specifies the visible number of lines in a text area

wrap Specifies how the text in a text area is to be wrapped when

submitted in a form
Program:Write a HTML code to Textarea on from to accept address from user

<html>
<body>
<form name="form1">
Address<br>
<textarea name="address" cols="20" rows="5">
Enter your address here.....
</textarea>
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.1.5 Checkbox:
 The INPUT element defines an input field. When you specify “checkbox” for the type
attributes of this element, a checkbox is created.
 The <input type="checkbox"> defines a checkbox.
 The checkbox is shown as a square box that is ticked (checked) when activated.
 Checkboxes are used to let a user select one or more options of a limited number of
choices.
Attributes:
Property Description

checked Sets or returns the checked state of a checkbox

name Sets or returns the value of the name attribute of a checkbox

type Returns which type of form element the checkbox is

value Sets or returns the value of the value attribute of a checkbox

Program:Write a HTML code to create checkbox to accept subject choice from user
<html>
<head>
</head>
<body>
<form name="form1">
Select Subject:<br>
<input type="checkbox" name"subject" value="C" checked>C<br>
<input type="checkbox" name"subject" value="C++">C++<br>
<input type="checkbox" name"subject" value="Java">Java<br>
<input type="checkbox" name"subject" value="Python">Python<br>
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.1.6 Radio Button:

The HTML <input type=”radio”> is used to define a Radio Button. Radio Buttons are used
to let the user select exactly one option from a list of predefined options. Radio Button input
controls are created by using the “input” element with a type attribute having value as “radio”.
Syntax:
<input type="radio">
Attributes of Radio Button:
Name Description
Type Specifies the type of input, in this case set as ‘radio’.

Name Specifies the name of the control that is delivered to the server.
Value Specifies the value that will be sent to the server, if the radio button is checked.

Checked Defines a by default checked radio button.

Program:Write a HTML code to demonstrate Radio Button

<html>
<head>
</head>
<body>
<form name="form1">
Select Class:<br>
<input type="radio" name="class" value="TYCM-I" checked>TYCM-I<br>
<input type="radio" name="class" value="TYCM-II">TYCM-II<br>
<input type="radio" name="class" value="TYCM-III">TYCM-III<br>
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.1.7 Select Element:

Definition and Usage

The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you
omit the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options in the drop-down
list.

Attributes of <select> Tag:

Attribute Description

multiple Specifies that multiple options can be selected at once

name Defines a name for the drop-down list

size Defines the number of visible options in a drop-down list

The <option> tag defines an option in a select list.

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Attributes of <option> tag:

Attribute Description

value This value is submitted to the server when selected

selected That item is selected in the initial state

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Program: Write a HTML code to create various options to select on form

<html>
<head>
</head>
<body>
<form name="form1">
Select Color :<br>
<select name="color" size="2" multiple>
<option value="White" selected>White</option>
<option value="Red" >Red</option>
<option value="BlacK">Black</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
</select>
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.2 Form Event:

Attribute Description

onblur Fires the moment that the element loses focus

onchange Fires the moment when the value of the element is

changed
onfocus Fires the moment when the element gets focus

onselect Fires after some text has been selected in an element

Program: Write a javascript code to implement onblur method<html>

<html>
<head>
<script language="javascript" type="text/javascript">
function check()
{
alert("Please enter Roll Number");
}
</script>

</head>
<body>
<form name="form1">
Name <input type="text" name="text1" onblur="check()"><br><br>
Roll Number<input type="text" name="text2">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.2.2 onfocus Event

Program:Write a javascript to change the color of textbox by using onfoucs

event.

<script language="javascript" type="text/javascript">

function color()
{
document.forms.frm1.text1.style.background="green";
}
</script>

</head>
<body>

<form name="frm1">
Name <input type="text" name="text1" onfocus="color()"><br><br>
Roll Number<input type="text" name="text2">
</form>

</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.2.3 onchange Event:

Program: Write a javascript code to demonstrate onchange event

<script language="javascript" type="text/javascript">

function check()
{
alert("subject is selected");
}
</script>

</head>
<body>

<form name="form1">
Subject :
<input type="checkbox" name="subject" value="c" onchange="check()">C<br><br>
</form>

</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Onselect:
Program: Write a javascript code to demonstrate onselect event.
<html>

<head>
<script language="javascript" type="text/javascript">
function check()
{
alert("data is selected");

}
</script>
</head>
<body>
<form name="form1">

Enter Data : <input type="text" name="text2" onselect="check()">

</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.2.1 Mouse Event:

The object mouse has numerous events associated with it which depend up on the user’s
actions.
Following are 7 events which are generated by mouse when it comes in contact of any
HTML tag.

Event Description
onclick Javascript runs when a mouse click
ondblclick Javascript runs when a mouse double click
onmousedown Javascript runs when a mouse button is pressed
onmouseup Javascript runs when a mouse button is released
onmouseover Javascript runs when a mouse pointer moves over an element
onmouseout Javascript runs when a mouse pointer moves out of an element
onmousemove Javascript runs when a mouse pointer moves

1.onclick and ondblclick event:

The onclick event occurs when the user click on an element.

Program: Write a Javascript to implement onclick Mouse Event.

<html>
<head>
<script language="javascript" type="text/javascript">
function check()
{
alert("On Click Event...........");
}
</script>
</head>
<body>
<form name="form1">

<input type="button" name="button1" value="On click Event" onclick="check()">

</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

2.Ondblclick Event:

The ondblclick event occurs when the user double click on an element.

Program: Write a Javascript to implement ondblclick Mouse Event.

<html>
<head>
<script language="javascript" type="text/javascript">
function check()
{
alert("On Double Click Event...........");
}
</script>
</head>
<body>
<form name="form1">

<input type="button" name="button1" value="On click Event" ondblclick="check()">

</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3. Onmouseover and onmouseout event:

The onmouseover event triggers when you bring your mouse over any element. The
onmouseout event triggers when you move your mouse out from that element.
Program: Write a Javascript code to implement onmouseover and onmouseout Event.
<html>
<head>
<script language="javascript" type="text/javascript">
function out()
{
document.forms.form1.button1.value=" Mouse Out";
}
function over()
{
document.forms.form1.button1.value=" Mouse Over";
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="button1" value="Button" onmouseover="over()"
onmouseout="out()">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

4. Onmousedown and onmouseup event:

The onmousedown event triggers when you press a mouse button over any element.
Onmouseup event triggers when you release a mouse over an element.

Program:Write a javascript code to implement onmousedown and onmouseup Event.

<html>
<head>
<script language="javascript" type="text/javascript">
function down()
{
document.forms.form1.button1.value=" Mouse down";
}
function up()
{
document.forms.form1.button1.value=" Mouse up";
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="button1" value="Button" onmousedown="down()"
onmouseup="up()">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

5.onmousemove Event:
The onmousemove event triggers when the mouse pointer is moving within selected
element.
Program:Write a Javascript code to implement onmousemove Event.
<html>
<head>
<script language="javascript" type="text/javascript">
function move()
{
alert ("Mouse Moves....");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="button1" value="Button" onmousemove="move()">
</form>
</body>
</html>
Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.2.2 Key Event:

Following are the three events which are generated by keyboard.
Event Description
onkeydown Javascript runs this event when key is pressed
onkeypress Javascript runs this event when key is pressed and released
onkeyup Javascript runs this event when key is released

Onkeydown and onkeyup Event:

Program: Write javascript code to implement onkeyup and onkeydown event.
<html>
<head>
<script language="javascript" type="text/javascript">
function down()
{
document.forms.form1.button1.value="Key Down....";
}
function up()
{
document.forms.form1.button1.value="Key up....";
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="t1" onkeydown="down()" onkeyup="up()">
<input type="button" name="button1" value="Button">
</form>
</body>
</html>
Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Onkeypress event:

Program:Write a javasript code to implement onkeypress event

<html>
<head>
<script language="javascript" type="text/javascript">
function press()
{
document.forms.form1.button1.value="Key press....";
}

</script>
</head>
<body>
<form name="form1">
<input type="text" name="t1" onkeypress="press()">
<input type="button" name="button1" value="Button">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.2 Form Object and Elements:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Program: Write a javascript code to acess all elements of form using

elements array

<html>
<head>
<script language="javascript" type="text/javascript">
function display()
{
alert("Name: "+document.forms.form1.elements[0].value);
alert("Roll Number: "+document.forms.form1.elements[1].value);
alert("Class: "+document.forms.form1.elements[2].value);
}
</script>
</head>
<body>
<form name="form1">
Student Name: <input type="text" name="name"><br><br>
Roll Number: <input type="text" name="rollno"><br><br>
Class :<input type="text" name="class1"><br><br>
<input type="button" name="button1" value="Click" onclick="display()">
</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

getElementsById(“ID”):

This DOM(Document Object Model) method is used for accessing any element
on the page via its ID attribute.

Program: Write a Javascript code to demonstrate getElementById() method.

<html>
<head>
<script language="javascript" type="text/javascript">
function check()
{
var i=document.getElementById("name");
if(i.value!=0)
{
alert("You entered :"+i.value);
}
else
{
alert("Please enter name");
}
}
</script>
</head>
<body>
<form name="form1">
Student Name: <input type="text" id="name"><br><br>
<input type="button" name="button1" value="Click" onclick="check()">
</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

InnerHTML:
Each HTML element has an innerHTML property that defines both the HTML code and text
that occurs between that elements opening and closing tag. By changing an element’s
innerhtml after some user interaction, you can make such more interactive pages.
However using innerHTML requires some preparation if you want to be able to use it easily
and reliably. First you must give the element you wish to change an id. with that id in place
you will be able to use to the getElementById function, which works on all browsers. After
you have that set up you can now manipulate the text of an element. To start off,lets try
changing the text inside a bold tag.

Program: Write a Javascript code to implement innerHTML property.

<html>
<head>
<script language="javascript" type="text/javascript">
function display()
{
document.getElementById("h").innerHTML="Computer Department";
}
</script>
</head>
<body>
<h4 id="h">Sou.Venutai Chavan POlytechnic</h4>
<form name="form1">
<input type="button" name="button1" value="Click" onclick="display()">
</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

3.4 Changing Attribute value dynamically:

In javascript we can change the value of any form elements dynamically.We can change an
attribute of an element by assigning a new value to that attribute in a javascript function and
function can be called when an appropriate event occurs.

Program:Write a javascript to change attribute value dynamically.

<html>
<head>
<script language="javascript" type="text/javascript">
function change(Element)
{
Element.style.color='red';
Element.style.backgroundColor='green';
}

</script>
</head>
<body>
<form name="form1">
Subject :
<input type="text" name="t1" value="CSS" onchange="change(this)"><br>
<input type="button" name"b1" value="Click">
</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

3.5 Changing Option List Dynamically:

In javascript we can change the value at runtime according to the choice or input from user.
Option list is used to show list of items to user can the select one or more elements. However
you can change the values of option list according to choice or input from user using
javascript functions.

Program:Write a javascript code to change

<script language="javascript" type="text/javascript">

function Display(Elementvalue)
{
with(document.forms.form1)
{
if(Elementvalue==1)
{
option1[0].text="PIC"
option1[0].value=1
option1[1].text="MATHS"
option1[1].value=2
option1[2].text="WPD"
option1[2].value=2
}
if(Elementvalue==2)
{
option1[0].text="DCC"
option1[0].value=1
option1[1].text="SEN"
option1[1].value=2

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

option1[2].text="JPR"
option1[2].value=2
}
}
}

</script>
</head>
<body>
<form name="form1">
Subject :
<select name="option1">
<option value="1">DCC</option>
<option value="2">SEN</option>
<option value="3">JPR</option>
</select>
<input type="radio" name="SY" value="1" onclick="Display(this.value)">First Year
<input type="radio" name="SY" value="2" onclick="Display(this.value)">Second Year
<input type="submit" value="submit" name="submit">
</form>
</body>
</html>

Output:

3.6 Evaluating Checkbox Selection:

Checkbox is used to select one or more items from the set of choices. We can write a
javascript function to evaluate whether checkbox is selected or not and processes the result
as per need of application.

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Program: write a javascript code to evaluate checkbox selected by user

<html>
<head>
<script language="javascript" type="text/javascript">
function show()
{
with(document.forms.form1)
{
if(c1.checked==true)
{
alert("C");
}

if(p1.checked==true)
{
alert("PHP");
}

if(c2.checked==true)
{
alert("C++");
}
if(j1.checked==true)
{
alert("Java");
}
}
}

</script>
</head>
<body>
<form name="form1">
Subject :<br>
<input type="checkbox" name="c1" value="C">C<br>
<input type="checkbox" name="p1" value="php">PHP<br>
<input type="checkbox" name="c2" value="C++">C++<br>
<input type="checkbox" name="j1" value="java">Java <br>
<input type="button" value="click" name="button" onclick="show()">
</form>
</body>
</html>

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Output:

3.7 Changing a Label Dynamically

We can change the label of form element using a javascript function to achieve reusability of
an element. Relabeling an element when the purpose of that element is ready been served.

Program: Write a javascript code to change the label of form element

dynamically.

<html>
<head>
<script language="javascript" type="text/javascript">
function show(c)
{
with(document.forms.form1)
{
if(c=='TY')
{
b1.value='SY'
op1[0].text='CSS'
op1[0].value="1"
op1[1].text='STE'
op1[1].value="2"
op1[2].text='OSY'
op1[2].value="3"
}
if(c=='SY')
{
b1.value='TY'
op1[0].text='DCC'
op1[0].value="1"
op1[1].text='SEN'
op1[1].value="2"
op1[2].text='JPR'
op1[2].value="3"

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

}
}
}
</script>
</head>
<body>
<form name="form1">
Subject :<br>
<select name="op1" size="3">
<option value="1">DCC</option>
<option value="2">SEN</option>
<option value="3">JPR</option>
</select>
<br><br>
<input type="submit" value="submit" name="submit">
<input type="reset" value="SY" name="b1" onclick="show(this.value)">
</form>
</body>
</html>

Output:

3.8 Manipulating Form Elements:

we can manipulate the form elements before submitting it to the server.

For that purpose we can keep some of the fields hidden & at the time of submitting the form,
the desired value to the hidden field so that the assigned value for the hidden field can be
submitted.

Program: The user enter roll number and name. The registration id for the student can be
of formed by taking first two character of name followed by the roll number. Initially

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

registration id field kept hidden and at the time of submitting the form this value is
assigned to registration field

<html>
<head>
<script language="javascript" type="text/javascript">
function show()
{
with(document.forms.form1)
{
if((name.value.length>0)&&(rollno.value.length>0))
{
regid.value=name.value.charAt(0)+name.value.charAt(1)+rollno.value;
var a=regid.value;
alert(a);
}
}
}
</script>
</head>
<body>
<form name="form1">
Name:<input type="text" name="name"><br>
Roll Number: <input type="text" name="rollno"><br>
Registration Id:<input type="hidden" name="regid">
<br><br>
<input type="submit" value="submit" name="submit" onclick="show()">

</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.9 Intrinsic Javascript Functions:

Javascript provides some special set of built in function known as intrinsic functions. There
are some functions to achieve actions of submit and reset button. Intrinsic functions are defined
by javascript hence you can call these functions in your way. Intrinsic functions are used to
replace submit and reset button with some other images.

Program: Write a code to implement intrinsic Javascript function.

Output:

3.9.1 Disabling Elements:

Sometimes we need to enable and disable input element like text box, radio button or
checkbox, but everytime we make a change we need to reload the HTML page.An element
can be disabled in HTML by setting disable property to true and enabled again by setting
disabled=false.
In Javascript we can disable some elements to restrict data entry into some elements. Such
disabled elements will be displayed on form but user are notable to enter information in these
elements.Javascript allows writing functions to disable and enable elements on form.

Program:Write a Javascript code to disable form element

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
fucntion disable()
{
document. forms.form1.t1.disabled=true;
}
function enable()
{
Document .forms.form1.t1.disabled=false;
}
</script>
<form name="form1">
Student Name: <input type="text" name="t1"/><br>
<input type="button" name="b1" value="Disable" onclick="disable()">
<input type="button" name="b1" value="Enable" onclick="enable()">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

3.9.2 Read only Elements:

In Javascript we can restrict the user from changing the value of an element by setting its
readonly property to true. If we want user to enter value in that element then we can set its
readonly property to false. It is possible to change the value of the readonly attribute from
within your javascript function.

Program: Write a javascript code to implement readonly property of form

element.
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
function readonly()
{
document.forms.form1.t1.readOnly=true;
}
function write()
{
document.forms.form1.t1.readOnly=false;
}
</script>
<form name="form1">
Student Name: <input type="text" name="t1"/><br>
<input type="button" name="b1" value="Read Only" onclick="readonly()">
<input type="button" name="b1" value="Write" onclick="write()">
</form>
</body>
</html>

Output:

Downloaded by ganesh dhotre ([email protected])

lOMoARcPSD|47063927

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 3 MRS. S.S.KADAM

Downloaded by ganesh dhotre ([email protected])

HTML Form & Event Handling Guide
No ratings yet
HTML Form & Event Handling Guide
38 pages
Unit 3
No ratings yet
Unit 3
32 pages
Unit 3 - 41661511 - 2024 - 10 - 24 - 08 - 54
No ratings yet
Unit 3 - 41661511 - 2024 - 10 - 24 - 08 - 54
39 pages
Web Form Basics for Developers
No ratings yet
Web Form Basics for Developers
30 pages
Form Basics Key Concepts Terry Ann Morris, Ed.D
No ratings yet
Form Basics Key Concepts Terry Ann Morris, Ed.D
29 pages
Lecture HTML Forms
No ratings yet
Lecture HTML Forms
28 pages
Forms Event Handling
No ratings yet
Forms Event Handling
69 pages
HTML Form and Event Handling Guide
No ratings yet
HTML Form and Event Handling Guide
32 pages
JavaScript Form Handling Guide
No ratings yet
JavaScript Form Handling Guide
63 pages
Microsoft Office
No ratings yet
Microsoft Office
33 pages
Conquer Forms With HTML5 and CSS3
No ratings yet
Conquer Forms With HTML5 and CSS3
96 pages
Chapter 10 Final
No ratings yet
Chapter 10 Final
42 pages
HTML Forms
No ratings yet
HTML Forms
43 pages
Lecture 3.2 HTML - Forms
No ratings yet
Lecture 3.2 HTML - Forms
50 pages
Unit 3 Forms Event Handling
No ratings yet
Unit 3 Forms Event Handling
66 pages
CSC336-WT Lec6 Slides
No ratings yet
CSC336-WT Lec6 Slides
21 pages
HTML Forms
No ratings yet
HTML Forms
23 pages
Understanding XHTML Forms Basics
No ratings yet
Understanding XHTML Forms Basics
14 pages
FORMS
No ratings yet
FORMS
34 pages
HTML Form Tag and Examples
No ratings yet
HTML Form Tag and Examples
7 pages
Q4Lecture 7 Html-Forms
No ratings yet
Q4Lecture 7 Html-Forms
23 pages
FINALREVIEW
No ratings yet
FINALREVIEW
120 pages
HTML 3
No ratings yet
HTML 3
23 pages
Unit 1
No ratings yet
Unit 1
37 pages
Chapter 3 Form and Event Handling
No ratings yet
Chapter 3 Form and Event Handling
15 pages
Lecture05 WT HTML Forms
No ratings yet
Lecture05 WT HTML Forms
52 pages
HTML Forms
No ratings yet
HTML Forms
13 pages
HTML Forms: Elements and Usage
No ratings yet
HTML Forms: Elements and Usage
13 pages
HTML Forms
No ratings yet
HTML Forms
36 pages
HTML Forms
No ratings yet
HTML Forms
23 pages
20 HTML Forms
No ratings yet
20 HTML Forms
13 pages
HTML Forms
No ratings yet
HTML Forms
23 pages
HTML Forms and Elements Overview
No ratings yet
HTML Forms and Elements Overview
10 pages
HTML Form Elements Overview
No ratings yet
HTML Form Elements Overview
23 pages
YBS Unit III Form & Event Handling-1
No ratings yet
YBS Unit III Form & Event Handling-1
92 pages
HTML/XHTML Forms Guide
No ratings yet
HTML/XHTML Forms Guide
14 pages
HTML Form Handling Guide
No ratings yet
HTML Form Handling Guide
45 pages
Chapter 2-Lecture 3
No ratings yet
Chapter 2-Lecture 3
57 pages
Iii B.SC Widt Unit-Ii
No ratings yet
Iii B.SC Widt Unit-Ii
25 pages
Cs-344: Web Engineering: Dr. Mehdi Hussain
No ratings yet
Cs-344: Web Engineering: Dr. Mehdi Hussain
40 pages
Comprehensive Guide to HTML Forms and Input Types
100% (1)
Comprehensive Guide to HTML Forms and Input Types
47 pages
Computer Grade 8
No ratings yet
Computer Grade 8
102 pages
05 HTML Forms
No ratings yet
05 HTML Forms
15 pages
PDF and Assignemnt/6th Day Form
No ratings yet
PDF and Assignemnt/6th Day Form
22 pages
HTML Forms
No ratings yet
HTML Forms
22 pages
Understanding HTML Forms Basics
No ratings yet
Understanding HTML Forms Basics
12 pages
CSS Forms
No ratings yet
CSS Forms
22 pages
BDC WT SEM V Unit-2
No ratings yet
BDC WT SEM V Unit-2
33 pages
Forms HTML
No ratings yet
Forms HTML
18 pages
Css 10,11
No ratings yet
Css 10,11
18 pages
Chapter 4
No ratings yet
Chapter 4
34 pages
Lab Manual 03
No ratings yet
Lab Manual 03
19 pages
HTML Forms
No ratings yet
HTML Forms
7 pages
Understanding HTML Forms and CGI
No ratings yet
Understanding HTML Forms and CGI
23 pages
Web Tech-3rd - Cse - Unit - III - FORM
No ratings yet
Web Tech-3rd - Cse - Unit - III - FORM
16 pages
Scan 10 Oct 23 19 38 22
No ratings yet
Scan 10 Oct 23 19 38 22
47 pages
CH 3 Htmlpart II
No ratings yet
CH 3 Htmlpart II
50 pages
Unit 3 Form and Event Handling
No ratings yet
Unit 3 Form and Event Handling
49 pages
Forms: Single Line Text Input Box
No ratings yet
Forms: Single Line Text Input Box
7 pages
Guidebook To The Gunung Leuser National Park
No ratings yet
Guidebook To The Gunung Leuser National Park
96 pages
g7 Recognition Day Programme Final
No ratings yet
g7 Recognition Day Programme Final
5 pages
DPC II Drafts
No ratings yet
DPC II Drafts
105 pages
Cambridge IGCSE™: First Language English 0500/21 May/June 2020
No ratings yet
Cambridge IGCSE™: First Language English 0500/21 May/June 2020
11 pages
METROLOGY AND MEASUREMENT Final
No ratings yet
METROLOGY AND MEASUREMENT Final
42 pages
Anuja Dhyani
No ratings yet
Anuja Dhyani
2 pages
Temporal Mass and Curvature As Foundations For A Novel Theory of Time
No ratings yet
Temporal Mass and Curvature As Foundations For A Novel Theory of Time
17 pages
The Eternal Soul and Life's Impermanence
No ratings yet
The Eternal Soul and Life's Impermanence
6 pages
Introduction To Biomedical Instrumentation The Technology of Patient Care 2nd Edition Christe Instant Download
100% (1)
Introduction To Biomedical Instrumentation The Technology of Patient Care 2nd Edition Christe Instant Download
47 pages
Resistor Color Code Guide
100% (1)
Resistor Color Code Guide
10 pages
Jayesh Sutsonkar - Petroleum Engineer CV
No ratings yet
Jayesh Sutsonkar - Petroleum Engineer CV
2 pages
Pediatric Colorectal and Pelvic Reconstructive Surgery 1st Edition Alejandra Vilanova-Sanchez (Editor) Instant Download
No ratings yet
Pediatric Colorectal and Pelvic Reconstructive Surgery 1st Edition Alejandra Vilanova-Sanchez (Editor) Instant Download
96 pages
Reactjs Notes
No ratings yet
Reactjs Notes
6 pages
Standards:: Lesson Plan by Lynne Cherry Project Citizen and Literacy Integration
No ratings yet
Standards:: Lesson Plan by Lynne Cherry Project Citizen and Literacy Integration
2 pages
Giancoli Chapter 5
No ratings yet
Giancoli Chapter 5
38 pages
M10 Clita
No ratings yet
M10 Clita
11 pages
Urban Labour Markt
No ratings yet
Urban Labour Markt
13 pages
RetailX RXTUN23RP Global Elite Top1000 Full Report 7jw
No ratings yet
RetailX RXTUN23RP Global Elite Top1000 Full Report 7jw
48 pages
Ethics Mnemonic 1
No ratings yet
Ethics Mnemonic 1
5 pages
Capital Budgeting and Leasing
No ratings yet
Capital Budgeting and Leasing
22 pages
PRACTICE TEST 5 ĐỀ VÀ ĐÁP ÁN
100% (1)
PRACTICE TEST 5 ĐỀ VÀ ĐÁP ÁN
7 pages
Book Review
No ratings yet
Book Review
4 pages
TIG Welding Setup
No ratings yet
TIG Welding Setup
12 pages
ASS Class 1
No ratings yet
ASS Class 1
2 pages
Presentasi Dp2u
No ratings yet
Presentasi Dp2u
35 pages
Look Sharp: Next Level Sex Lessons
No ratings yet
Look Sharp: Next Level Sex Lessons
140 pages
Future Supply Chain Leaders
No ratings yet
Future Supply Chain Leaders
11 pages
A Great Vim Cheat Sheet
No ratings yet
A Great Vim Cheat Sheet
5 pages
Maclean's Guide To Bombay 1875
No ratings yet
Maclean's Guide To Bombay 1875
417 pages
English Art Integrated Project: by Class-Xii, Sec-C, Group-9
100% (1)
English Art Integrated Project: by Class-Xii, Sec-C, Group-9
25 pages