0% found this document useful (0 votes)

43 views

Unit 3 Client Side Scripting Msbte

Uploaded by

ganesh dhotre

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

43 views

Unit 3 Client Side Scripting Msbte

Uploaded by

ganesh dhotre

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])

CSS UNIT3 Notes
No ratings yet
CSS UNIT3 Notes
38 pages
Lab Manual 03
No ratings yet
Lab Manual 03
19 pages
Chapter 3
No ratings yet
Chapter 3
90 pages
Lab Sheet 03
No ratings yet
Lab Sheet 03
11 pages
Java_script Unit 3
No ratings yet
Java_script Unit 3
41 pages
WT-Program Manual
No ratings yet
WT-Program Manual
61 pages
SHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES
No ratings yet
SHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES
3 pages
FSD Practical Notes1
No ratings yet
FSD Practical Notes1
39 pages
WebDevLab[5]
No ratings yet
WebDevLab[5]
11 pages
Internet and Web Programing Cse3002 E1
No ratings yet
Internet and Web Programing Cse3002 E1
7 pages
UNIT - II(WIDT)
No ratings yet
UNIT - II(WIDT)
32 pages
Insem Solution 2023
No ratings yet
Insem Solution 2023
16 pages
VP Unit 5
No ratings yet
VP Unit 5
80 pages
Advanced IP-Chapter-2 - Lect-4, 5
No ratings yet
Advanced IP-Chapter-2 - Lect-4, 5
50 pages
Unit - II(Widt) Pre
No ratings yet
Unit - II(Widt) Pre
40 pages
mmad
No ratings yet
mmad
17 pages
ST Lab Manual1
No ratings yet
ST Lab Manual1
75 pages
Web Technology Lab Manual
No ratings yet
Web Technology Lab Manual
30 pages
Lesson 6 Forms in HTML
No ratings yet
Lesson 6 Forms in HTML
48 pages
Zong
No ratings yet
Zong
56 pages
Lesson 6 Forms in HTML
No ratings yet
Lesson 6 Forms in HTML
48 pages
WP CBSGS Paper-3-May-2017 Solution
No ratings yet
WP CBSGS Paper-3-May-2017 Solution
14 pages
css-10,11
No ratings yet
css-10,11
18 pages
Languagetraslator REPORT 1
No ratings yet
Languagetraslator REPORT 1
9 pages
Unit - 2
No ratings yet
Unit - 2
14 pages
Langauge To Create Web Pages)
No ratings yet
Langauge To Create Web Pages)
17 pages
PR 10
No ratings yet
PR 10
10 pages
Wt Experiment 2
No ratings yet
Wt Experiment 2
5 pages
Practical 5 Examples Adv - Web Progr.
No ratings yet
Practical 5 Examples Adv - Web Progr.
12 pages
Web Tech lab_new (1)
No ratings yet
Web Tech lab_new (1)
64 pages
What Is CGI?: Gateway Interface Is A Standard For Interfacing
100% (1)
What Is CGI?: Gateway Interface Is A Standard For Interfacing
33 pages
Exp 6-13
No ratings yet
Exp 6-13
28 pages
ASP Sheet
No ratings yet
ASP Sheet
59 pages
Topic 3 CSS
No ratings yet
Topic 3 CSS
30 pages
HTML Forms and Css
No ratings yet
HTML Forms and Css
7 pages
16 XHTML Forms PR TM
No ratings yet
16 XHTML Forms PR TM
30 pages
64262
No ratings yet
64262
129 pages
HTML Form and PHP HTML Form: ITS332 - LAB
No ratings yet
HTML Form and PHP HTML Form: ITS332 - LAB
6 pages
Ip Slide Notes
No ratings yet
Ip Slide Notes
7 pages
Unit Previous 3 Years Solution Web Tech
No ratings yet
Unit Previous 3 Years Solution Web Tech
20 pages
Final ITR Report 2022-23
No ratings yet
Final ITR Report 2022-23
19 pages
Web Application Development: What Is Web Forms?
No ratings yet
Web Application Development: What Is Web Forms?
80 pages
Web Based Programming: BCA Semester: II L-15-17
No ratings yet
Web Based Programming: BCA Semester: II L-15-17
39 pages
WEB - Record - 6th Sem
No ratings yet
WEB - Record - 6th Sem
39 pages
UNIT-II PHP 2022 New
No ratings yet
UNIT-II PHP 2022 New
22 pages
3297_DotNET_Practical 4_5
No ratings yet
3297_DotNET_Practical 4_5
12 pages
Final Lab Mannual Web Technolgies Notes
No ratings yet
Final Lab Mannual Web Technolgies Notes
33 pages
WebTech Final Lab Mannual
No ratings yet
WebTech Final Lab Mannual
30 pages
Assignment2
No ratings yet
Assignment2
7 pages
ASP unit no2 sem2
No ratings yet
ASP unit no2 sem2
31 pages
Basics: Request Yields Input From The Browser GET or POST
No ratings yet
Basics: Request Yields Input From The Browser GET or POST
22 pages
it practical file(21570006)
No ratings yet
it practical file(21570006)
35 pages
DHTML Events
No ratings yet
DHTML Events
14 pages
Lecturenote - 1275839844chapter 3 Part 3
No ratings yet
Lecturenote - 1275839844chapter 3 Part 3
13 pages
HTML Forms: East West University
No ratings yet
HTML Forms: East West University
50 pages
Unit - 3
No ratings yet
Unit - 3
31 pages
S221 - S1 - 2023 - FinalExam - Sample Solution PDF
No ratings yet
S221 - S1 - 2023 - FinalExam - Sample Solution PDF
10 pages
HTML Forms and Css - Chapter 7 Topic - 1 Forms Objective Type Questions
No ratings yet
HTML Forms and Css - Chapter 7 Topic - 1 Forms Objective Type Questions
22 pages
6 - Forms
No ratings yet
6 - Forms
26 pages
IBM Cognos 8 Planning
From Everand
IBM Cognos 8 Planning
Jason Edwards
No ratings yet
Sr. Cloud DevOps and Linux Engineer_Resume (1)
No ratings yet
Sr. Cloud DevOps and Linux Engineer_Resume (1)
7 pages
C# Coding Guidelines Cheat Sheet
No ratings yet
C# Coding Guidelines Cheat Sheet
2 pages
Santosh Patil: Career Objective
No ratings yet
Santosh Patil: Career Objective
3 pages
Abap News For 740 Sp08 Open SQL
No ratings yet
Abap News For 740 Sp08 Open SQL
12 pages
Unit - 2 - Part-2
100% (1)
Unit - 2 - Part-2
43 pages
Van Arsdel
No ratings yet
Van Arsdel
3 pages
Dev Resume
No ratings yet
Dev Resume
9 pages
C++ - INHERITANCE
No ratings yet
C++ - INHERITANCE
23 pages
SOLIDWORKS Corrupted Files
No ratings yet
SOLIDWORKS Corrupted Files
7 pages
Memo Basics .NET and Office 2003
No ratings yet
Memo Basics .NET and Office 2003
14 pages
Arch Resume
No ratings yet
Arch Resume
2 pages
Tip Izvještaja: Instalirani Softver Na Računaru DIYOMI1-PC: Strana 1 Od 14
No ratings yet
Tip Izvještaja: Instalirani Softver Na Računaru DIYOMI1-PC: Strana 1 Od 14
14 pages
CS504 Mcqs MidTerm by Vu Topper RM
No ratings yet
CS504 Mcqs MidTerm by Vu Topper RM
63 pages
Lexical Analyzer: Using Flex by Dr. S. M. Farhad
No ratings yet
Lexical Analyzer: Using Flex by Dr. S. M. Farhad
22 pages
Software Project 1
100% (1)
Software Project 1
2 pages
Samsung 2014 - 1
No ratings yet
Samsung 2014 - 1
10 pages
(Ebook) Visual Studio Code Succinctly by Alessandro Del Sole ISBN 9781642001051, 1642001058 All Chapters Instant Download
100% (3)
(Ebook) Visual Studio Code Succinctly by Alessandro Del Sole ISBN 9781642001051, 1642001058 All Chapters Instant Download
71 pages
Object Oriented: UML Class Diagram
No ratings yet
Object Oriented: UML Class Diagram
47 pages
Astro Recipes
No ratings yet
Astro Recipes
2 pages
Jack Smith Curriculum Vitae PDF
No ratings yet
Jack Smith Curriculum Vitae PDF
1 page
Chapter 2 types of software
No ratings yet
Chapter 2 types of software
11 pages
Selenium Interview Questions
No ratings yet
Selenium Interview Questions
27 pages
Introduction To Mobile Apps
No ratings yet
Introduction To Mobile Apps
9 pages
111 Javascript Syntax
No ratings yet
111 Javascript Syntax
13 pages
Linux Command Assignment
No ratings yet
Linux Command Assignment
3 pages
Tips
No ratings yet
Tips
5 pages
Quo Vadis Pengembangan Rekayasa Perangkat Lunak: Abstrak
No ratings yet
Quo Vadis Pengembangan Rekayasa Perangkat Lunak: Abstrak
8 pages
10-Minute Guide To Julia For Die-Hard Python Lovers - Towards Data Science
No ratings yet
10-Minute Guide To Julia For Die-Hard Python Lovers - Towards Data Science
54 pages
Nikto
100% (1)
Nikto
5 pages
Mid-II Important Questions
No ratings yet
Mid-II Important Questions
2 pages