Scribd
Upload
16 views49 pages

3.1

Uploaded by

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

3.1

Uploaded by

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

Client-Side Scripting Language (22519)

Unit 3
Form and Event Handling

Presented By:
Sushama Pawar
Department of Information Technology
Email: [email protected]
Vidyalankar Polytechnic, Wadala – East,
Mumbai – 400 037
Unit Contents
3.1: Building blocks of a Form, properties and methods of
form, button, text, text area, checkbox, radio button, select
element.
3.2: Form events - Mouse Events, Key Events
3.3: Form objects and elements
3.4: Changing attribute value dynamically
3.5: Changing option list dynamically
3.6: Evaluating checkbox selection
3.7: Changing a label dynamically
3.8: Manipulating form elements
3.9: Intrinsic JavaScript functions, disabling elements, read only
elements
The confirm() function in JavaScript is used to display a dialog box with
a specified message, along with "OK" and "Cancel" buttons. It returns
true if the user clicks "OK" and false if the user clicks "Cancel". This
function is often used to ask users for confirmation before performing
an action, such as submitting a form or deleting data.
Unit Outcomes
 Write JavaScript to design a form to accept
input values for the given problem.
 Use JavaScript to implement form events to
solve the given problems.
 Develop JavaScript to dynamically assign
specified attribute value to the given form
control.
 Use the given intrinsic functions with
specified parameters.
Introduction to Form
Forms are one of the most common web page
elements used with JavaScript.

JavaScript is commonly used with following two


reasons:
To add functionality that makes forms easier for
users to fill out
To validate or process the data that a user enters
before that data is submitted to a server side script.
Building Blocks of a
Form
• A form is a section of an HTML document that contains
elements such as radio buttons, text boxes and option lists.
HTML form elements are also known as controls.
• Elements are used as an efficient way for a user to enter
information into a form. Typical form control objects also
called “widgets” includes the following:
1. Text box for entering a line of text.
2. Push button for selecting an action.
3. Radio buttons for making one selection among a
group of options.
4. Check boxes for selecting or deselecting a single,
independent option.
Example
<html>
<head>
<title> Demonstrating HTML Forms </title>
</head>
<body>
<form name = “DemoForm” action = “ ” method = “GET”>
Enter your name:
<input type = “text” name = “text1”> <br>
<input type = “button” name = “button1” value = “Click”
onclick = "show()" >
</form>
</body>
</html>
Output
Form Object and Elements
e form object is represented by HTML <form> element
Synt
ax
<form name = “id=” action = “onSubmit=”>
….
….
….
….
….
</form>
Form Object and Elements
Examp
le
<form name = “myform” id = “myform” action = “page.html”
onSubmit = “test()”>
….
….
….
….
….
</form>
HTML Form Elements
Sr. HTML Element Type Event Description and
No Propert Handle Events
. y r
1 <input type = “button” onclick A push button
“button”> or
<button type =
“button”>
2 <input type = “checkbo onchan A toggle button without
“checkbox”> x” ge radio button behaviour
3 <input type = “file” onchan An input held for
“file”> ge entering the name of a
file to upload to the web
server, value property is
read only
4 <input type = “hidden” none Data submitted with the
“hidden” form but not visible to
the user.
5 <option> none none A single item within a
select object, event
handlers are an the
HTML Form Elements
Sr. HTML Element Type Event Description and
No Property Handle Events
. r
6 <input type = “password onchan An input field for
“password”> ” ge password entry where
typed characters are
not visible.
7 <input type = “radio” onchan A toggle button with
“radio”> ge radio button behaviour
where only one item is
selected at a time
8 <input type = “reset” onclick A push button that
“reset”> resets a form.
or
<button type =
“reset”>
9 <select> “select- onchan A list or drop down
one” ge menu from which one
item may be selected.
HTML Form Elements
Sr. HTML Element Type Event Description and
No. Property Handle Events
r
11 <input type = “submit” onclick A push button that
“submit”> submits a form.
or
<button type =
“submit”>
12 <input type = “text” onchang A single line text entry
“text”> e field.
13 <textarea> “textarea” onchang A multi line text entry
e field.
<input> tag with its parameters
1. name: Can be used so that the value of the element can be processed.
2. type: Can be used to specify the type of input.
3. id: Identification name of element.
4. value: Can be used to specify the initial value. It is required when type
is set to checkbox or radio. It should not be used when type is set to file.
5. checked: Can be used when type is set to checkbox or radio to set the
initial state of a checkbox or radio button to be selected.
6. maxlength: Can be used to specify the maximum number of
characters allowed in a textbox.
7. src: Can be used when type is set to image to specify the location of an
image file.
8. alt: Can be used when type is set to image to specify the alternative
text of the image, which should be a short description.
Examp
le
<html>
<body>
<head>
<form id="fullname">
<title> Assigning Values </title> <input id="name"> <br> <br>
<script type="text/javascript"> <input id="surname"> <br> <br>
function assign() <input type="button" id="btn"
{ value="Assign Values"

document.forms.fullname.name.value="Si onclick="assign()">
ddhesh";
</form>
document.forms.fullname.surname.value </body></html>
="Vaidya";
}
</script> </head>
Output
Properties and Methods
of Form
•The Form object represents a <form> element in an
HTML document. The elements property is an HTML
collection that provides convenient access to all elements
of the form. The submit() and reset() methods allow a
form to be submitted or reset under program control.

•Each form in a document is represented as an element of


the documents.forms[] array. The elements of a form are
collected in the array like object Form.elements.
Properties of Form
Sr. Properti Description
No. es
1 action Read/Write string that reflects the action
attribute of the form.
2 elements An array containing all of the elements of the
[] form. Use it to loop through form easily.
3 encoding Read/Write string that specifies how the form
data is encoded.
4 length The number of elements in the form.
5 method Read/Write string that specifies how the
method the form is submitted.
6 name The name of the form.
7 target The name of the target frame or window form
is to be submitted to.
Methods of Form

Sr. No. Methods Description

1 reset() Resets the form


2 submit() Submits a form

Methods of Events

Sr. No. Methods Description


1 onReset Code is executed when the form is reset.
2 onSubmit Code is executed when form is submitted.
Forms and the elements can be selected
from a document using standard
methods like:
1.getElementById()
2.getElementByName()
3.getElementByTagName()
4.innerHTML Property
getElementById()
•It returns a reference to the elements by its ID.

Syntax:

element = document.getElementById(id);
where,
•element is a reference to an element object, or null if an
element with the specified ID is not in the document.
•id is a case sensitive string representing the unique ID of
the element being sought.
Examp
le
<html>
<body>
<p id="demo">Click the button to change the color of this
paragraph.</p>
<p id="demo1">Click the button to change the color of this
paragraph.</p>
<button onclick="myFunction()">Change Color</button>
<script>
function myFunction()
{ Output
var x = document.getElementById("demo");
var y = document.getElementById("demo1");
x.style.color = "green";
y.style.color = "red";
}
</script>
</body>
</html>
getElementsByName(
)
• It returns a collection of all elements in the document
with the specified name (the value of the name
attribute).
Syntax:

•element = document.getElementsByName(name);
where,
•element is a reference to an element object.
•name is a case sensitive string representing the name of
the element being sought.
Examp
le
<html>
<body>
<input name="program" type="checkbox" value="IF"> Information
Technology <br>
<input name="program" type="checkbox" value="CO"> Computer
Engineering <br>
<p>Click the button to check all checkboxes that have a name
attribute with the value "program".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{ Output
var x = document.getElementsByName("program");
for (var i = 0; i < x.length; i++)
{
if (x[i].type == "checkbox")
{
x[i].checked = true;
}
}
}
</script>
</body>
getElementsByTagName
()
• It returns an HTMLCollection of elements with the given tag name.
The complete document is searched, including the root.
• The returned HTMLCollection is live, meaning that it updates itself
automatically to stay in sync with the DOM tree without having to all
document.getElementsByTagName() again.
Synta
x:
elements =
document.getElementsByTagName(tagname);
where,
elements is a live HTMLCollection of found elements in the order
they appear in the tree.
name is a string representing the name of the elements.
The special string “*” represents all elements.
Exampl
e1
<html>
<body>
<strong><p>An unordered list:</p></strong>
<ul>
<li>Information Technology</li>
<li>Computer Engineering</li>
<li>Chemical Engineering</li>
<li>Civil Engineering</li>
</ul>
<p>Click the button to find out how many li elements there
are in this document.</p>
<button onclick="myFunction()">Click</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = x.length;
}
</script>
</body>
</html>
Output
Exampl
e<html>
2
<body>
<p>Computer Engineering</p>
<p>Information Technology</p>
<p>Electronics and
Telecommunication</p>
<button onclick="myFunction()">Try Output
it</button>
<script>
function myFunction()
{
var x =
document.getElementsByTagName("p");
for (var i = 0; i < x.length; i++)
{
x[i].style.backgroundColor =
"lightgreen";
x[i].style.color = "red";
}
}
</script>
</body>
</html>
innerHTML Property
•The easiest way to modify the content of an HTML
element is by using the innerHTML property.
Syntax:
document.getElementById(id).innerHTML = new HTML;
Example 1: To change the text by using
innerHTML property
<html>
<body>
<script type="text/javascript">
function changeText()
{
document.getElementById('js').innerHTML = "Fifth Semester
Javascript!!!!";
}
</script>
<p>Welcome to <b id="js">JAVASCRIPT</b> </p>
<input type="button" onclick="changeText()" value="Change Text"/>
</body>
</html>
Output
Example 2: Script to count the number of <p>
<html>
tag and <h2> tag
<style>
div
{ <script>
border: 1px solid black; function myFunction()
margin: 5px; {
} var x =
</style> document.getElementById("myDIV").
<body> getElementsByTagName(“p");
<div id="myDIV"> document.getElementById("demo").in
<p>Information Technology</p> nerHTML = x.length;
<p>Computer Engg.</p> var y =
<p>Electronics and document.getElementById("myh").get
Telecommunication</p> ElementsByTagName("h2");
<p>Chemical Engg.</p> document.getElementById("demo1").i
</div> nnerHTML = y.length;
<div id="myh"> }
<h2>Vidyalankar Polytechnic</h2> </script>
<h2>Vidyalankar Institute of </body>
Technology </h2> </html>
</div>
<button onclick="myFunction()">Try
it</button>
<p id="demo"></p>
Output
Example 3: Change content by providing user input
<html>
<body>
<p>Welcome <b id="vp">JavaScript</b> </p>
<input type="text" id="userInput" value="Enter Text
Here"> <br> <br>
<input type="button" onclick="changeText()"
value="Change Text">
<script>
function changeText()
{
var userInput =
document.getElementById("userInput").value;
document.getElementById("vp").innerHTML = userInput;
}
</script> Output
</body>
</html>
Example 4: Displaying user input by clicking on
button
<html>
<body>
Name: <input type="text" id="userInputName" value=""> <br>
<br>
Password: <input type="password" id="userInputPwd" value="">
<br> <br>
<input type="button" onclick="changeText()" value="Change
Text">
<p>Name is <b id="vp">JavaScript</b> </p>
<p>Password is <b id="vp1">JavaScript</b> </p>
<script>
function changeText()
{
var userInputName =
document.getElementById("userInputName").value;
document.getElementById("vp").innerHTML = userInputName;
var userInputPwd =
document.getElementById("userInputPwd").value;
document.getElementById("vp1").innerHTML = userInputPwd;
}
</script>
Output
Example 5: Generate alert after clicking on submit button

<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="" onsubmit="myFunction()">
Enter name: <input type="text" name="fname" value="">
<input type="submit" value="Submit">
</form> Output
<script>
function myFunction()
{
alert("The form was submitted");
}
</script>
</body>
</html>
Button
• Button is created by using following code:
<form method = “GET” action = “”>
<input type = “button” name = “MyButton” value = “Click” onclick = “msg()”>
<form>

A Button object also represents an HTML <button> element


which is specified as follows:
<button name = “btn” value = “MyButton” onclick =
“msg()”>
•Inside a <button> element you can put content, like text
or images. But, this is not the case with the buttons
created with <input> tag.
Examp
le
<html>
<script>
<body>
function add()
Enter value of A: <input type =
"text" id = "txt1"> <br> <br> {
var a =
Enter value of B: <input type =
"text" id = "txt2"> <br> <br> document.getElementById("txt1").val
Sum of A and B is: <input type = ue
"text" id = "txt3"> <br> <br>
var b =
<input type = "button" onclick =
"add()" value = "Addition"> document.getElementById("txt2").val

Output ue
var c = parseInt(a) + parseInt(b);
document.getElementById("txt3").val
ue = c
}
</script>
</body>
Text
Input “text” is an object to enter a single line of text
whose element will be part of form data. In HTML text is
created by using following code:
<input type = “text” name = “textname” id =
“textid” value = “”>
Example:
<body>
Enter value of A: <input type = "text" id = "txt1"> <br>
<br>
Enter value of B: <input type = "text" id = "txt2"> <br>
<br> Output
Sum of A and B is: <input type = "text" id = "txt3">
</body>
Textarea
• A TextArea object represents an HTML <textarea> elements that
creates a multiline text input field, often with an HTML form.
• The initial content of the text area is specified as plain text between
<textarea> and </textarea> tags.
• You can query and set the displayed text with the value property.
• The <textarea> tag indicates a form field where the user can enter a
large amount of text.
• Attributes of <textarea> tag are:
• name: It sets the name of the form field
• cols and rows: Cols indicates how many characters wide the
TextArea should be.
Rows indicates how many rows should be present in
text area.
• wrap: It describes how the text area wraps at the end of lines.
• Soft: It wraps long lines in the TextArea for easy editing. It does
not return carriage to the server.
• Hard: It looks similar to soft, but it sends the carriage return to the
Textarea
Use:
1. name:
<textarea name = “comments”></textarea>
2. cols and rows:
<textarea name = “comments” cols = 30 rows = 7></textarea>
Output
3. wrap:
<textarea name = “comments” wrap = soft></textarea>
Example
<body>
Address <br>
<textarea name = "message" cols = "30" rows = “7"> Enter Message
</textarea>
</body>
Checkbox
•Radio and checkboxes are an integral part of forms that
allows user to make a selection with a simple click of the
mouse.
•You can prompt users for specific input by using list of
checkboxes. More than one checkboxes can be checked
by the user according to the information.
•Syntax for creating checkbox is:
<input type="checkbox" id="myCheck"
onclick="myFunction()">
•A checkbox can have only two states:
1. Checked
2. Unchecked
Example

<html> <body>
<div>
Program: <script>
<input type="checkbox" function validate()
name="program" id="it" {
value="IT"> var elements =
<label for="it">Information document.getElementsByName("prog
Tech</label> ram");
<input type="checkbox" var statusText = " ";
name="program" id="co" for (var index=0;index <
value="CO" checked> elements.length;index++)
<label for="co">Computer {
Engg</label> statusText = statusText +
<input type="checkbox" elements[index].value+"-"+elements[
name="program" id="ej" index].checked+"<br>";
value="EJ"> }
<label
for="ej">Electronics</label> document.getElementById("status").i
<button nnerHTML = statusText;
onclick="javascript:validate(); }
">Validate</button> </script> </body> </html>
</div>
Output
Radiobutton
The radiobutton allows the user to choose one of a
predefined set of options. You can define groups with
the name property of the radio buttons.
Radio buttons with the same name belong to the
same group. Radio buttons with different names
belongs to the different groups. At most one radio
button can be checked in a group.
Syntax
<input type="radio" id="male" name="gender" v
alue="male">
Examp
le
<form method="post" action=" " onsubmit="return ValidateForm();">
<fieldset>
<legend>Select Course:</legend>
<input type="radio" name="br" value="IT" checked>IT<br>
<input type="radio" name="br" value="CO">CO<br>
<input type="radio" name="br" value="EJ">EJ<br><br>
<input type="submit" value="Submit now"> Output
</fieldset>
</form>
<script type="text/javascript">
function ValidateForm()
{
var obj = document.getElementsByName("br");
for(var i = 0; i < obj.length; i++)
{
if(obj[i].checked == true)
{
if(confirm("You have selected " + obj[i].value))
return true;
else
return false;
} } } </script>
Select
Form SELECT elements (<select>) within your form can be
accessed and manipulated in JavaScript via the
corresponding Select object.

To access a SELECT element in JavaScript, use the syntax:

document.myform.selectname //where myform and


selectname are names of your form/element.

document.myform.elements[i] //where i is the position of


the select element within form

document.getElementById("selectid") //where
"selectid" is the ID of the SELECT element on the page
Examp
le
<html>
<script>
<body>
function myFunction()
<h3>A demo of how to access a
SELECT element</h3> {
var x =
<select id="mySelect" size="4">
document.getElementById("mySelect").length;
<option>CO</option>
document.getElementById("demo").innerHTML = x;
<option>IF</option>
}
<option>EJ</option>
</script> </body> </html>
<option>CV</option>
Output
</select> <br>
<button
onclick="myFunction()">Try
it</button>
<p id="demo"></p>
Examp
le
<html>
<script>
<body>
function myFunction()
Select a fruit and click the button:
{
<select id="mySelect">s
var x =
<option>Information document.getElementById("mySelect").sel
Technology</option>
ectedIndex;
<option>Computer Engg</option>
var y =
<option>Civil Engg</option>
document.getElementById("mySelect").op
<option>Electronics and
Telecommunication</option> tions;
</select> alert("Index: " + y[x].index + " is " +
<button type="button" y[x].text);
onclick="myFunction()">
}
Display index</button>
</script>
Output </body>
</html>

You might also like