Scribd
Upload
18 views

UNIT-III Form and Event Handling

Uploaded by

rutpatil0347
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

UNIT-III Form and Event Handling

Uploaded by

rutpatil0347
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

VJ TECH ACADEMY – JAVASCRIPT NOTES

Client Side Scripting (JavaScript)

Author:
Prof. Vishal Jadhav
[BE in Computer Engineering and Having 9 years of IT industry experience and 10 years of
teaching experience]

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 1
VJ TECH ACADEMY – JAVASCRIPT NOTES

UNIT 3 – Form and Event Handling

3.1 Building blocks of a Form, properties and methods of form, button, text,
textarea, checkbox, radio button, select element
3.2 Form events : mouse event, key events.
3.3 Form Object 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.

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 2
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Building blocks of Form :

- HTML Forms are used to collect information submitted by the user, such as a user's name,
email address, or any other essential information, and are sent to the server for processing the
data.
- Forms in HTML contain a checkbox, radio button, input text fields, password fields etc., which
can be seen on any website registration or Login/signup pages.
- Forms in HTML help the user to enter certain details asked and sent them further to the server
for processing.
- Let's say we want a person's name and age. To do so, we will make a small form as shown.

<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age"><br><br>
<input type="submit" value="Submit">
</form>
<p> After the "submit" button is clicked, the form-data will <br> be sent
to a page called "/action_page.php".</p>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 3
VJ TECH ACADEMY – JAVASCRIPT NOTES

- Output :

- HTML Form contains input text fields, checkboxes, password fields, submit and reset
button, etc.
- To create a form, we use the <form> tag.
- Let’s look at the simple syntax of form:
<form action="/action_page.php">
<input type = “text” name = “name” value = “name”>
</form>

 Form attributes :

 action :

- After the submission of the form, the action attribute specifies the action to be taken, it
specifies where the information should proceed.
- For example, it can be any URL that you prefer, like .php, .asp, etc. If it is left empty,
then by default, it will be processed on the same page.

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 4
VJ TECH ACADEMY – JAVASCRIPT NOTES

- Syntax :
<form action="/action_page.php">

 method :

- The method attribute in the form instructs the browser on how to send data from the
form to a web server. That is possible in two ways:
1. GET method
2. POST method

i. GET Method
- It is not secure as data is displayed in the URL. If the method is not specified, the
value is set to "get" as default.
- The form data is appended to the URL when submitted.
- Syntax :
<form action="file.html" method="get">

ii. POST Method


- POST Method is used to process sensitive data as the data is not displayed in the
URL.
- Form data is sent as per the HTTP post-transaction.
- Syntax :
<form action="file.html" method="post">

 name :

- The name attribute is used to reference form data after submission or to refer to items in
JavaScript.
- It is also used to specify the name of the form.

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 5
VJ TECH ACADEMY – JAVASCRIPT NOTES

- Syntax :
<form name = "text"

<input type = “name” name = “fname”>


</form>

 required :

- When we want the user to enter a required field, we use the required attribute.
- If that person does not enter it, the form will be unable to be submitted.
- It applies to input and select items.
- Example :
<input type = “password” name = “Password” value = “password” required>

 target :

- The target attribute specifies where the response should be opened after the form has been
submitted.
- It can be opened in two forms -
 _self - The current page will display the response.
 _blank - A new page will display the response.
 _parent - The parent frame will display the response.
 _top - The full page will display the response.
- If there is no parent in _parent and _top they behave the same as _self.

<form action = “file.php” target = “_self”>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 6
VJ TECH ACADEMY – JAVASCRIPT NOTES

 JavaScript Form method :

1) reset() - this method of form object and it is used to reset a form.

2) submit() - this method of form object and it is used to submit a form.

 Accessing HTML Form Element using JavaScript:

 Accessing HTML Form elements using JavaScript is a fundamental skill when it comes to
creating dynamic and interactive web pages.
 JavaScript provides several methods to access and manipulate HTML elements in the
Document Object Model (DOM).

1. Accessing Elements by ID:


- You can access an HTML/HTML Form element by its unique ‘id’ attribute using the
getElementById() method.
- Example :
<html>
<body>
<form>
<input type= "text" id="myName" value="Sham"/>
</form>
<script>
var myElement = document.getElementById("myName ");
document.write(myElement.value); //value display on screen
</script>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 7
VJ TECH ACADEMY – JAVASCRIPT NOTES

2. Accessing Elements by Tag Name:


- You can access elements by their tag name using the getElementsByTagName() method.
- This returns a collection of elements, so you need to use an index to access specific
elements.
- Example

var headingElements = document.getElementsByTagName("h1");


var firstHeading = headingElements[0]; // Access the first <h1> element

3. Accessing Elements by Class Name:


- To access elements by their class name, you can use the getElementsByClassName()
method.
- Like with tag names, this returns a collection/array that you can index into.
- Example

var infoElements = document.getElementsByClassName("info");


var firstInfoElement = infoElements[0]; // Access the first element with class
"info"

 JavaScript Form Elements :

 Button :

- In HTML, we can create Buttons by using three different ways.

1. Submit Button
- The <input> element with type="submit" is used to submit the form data to the server.

<input type="submit" value="Submit">

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 8
VJ TECH ACADEMY – JAVASCRIPT NOTES

2. Reset Button
- The <input> element with type="reset" resets the form elements to their default values.

<input type="reset" value="Reset">

3. Simple Button
- The <button> element can be used for custom actions, like triggering JavaScript functions.

<button type="button" onclick="myFunction()">Click Me</button>

 Input Element:

- It defines a data input field for the user. It plays important part in Html Forms.
- These are the following input types –
<input type = "text">
<input type = "radio">
<input type = "password">
<input type = "number">
<input type = "checkbox">
<input type = "submit">

 TextArea :

- If you want a user to enter a paragraph like tell me about yourself, then we use textarea; in
short, if you want multi-line input, we use textarea.
- Syntax
<textarea id= “value” rows = “2” cols = “10”> </textarea>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 9
VJ TECH ACADEMY – JAVASCRIPT NOTES
 Radio Button :

- Radio buttons allow users to select a single option from a set of choices.
- They are grouped using the name attribute.
- Example
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

 CheckBoxes:

- Checkboxes allow users to select one or more options from a set of choices.
- Example :
<input type="checkbox" name="interest" value="music"> Music
<input type="checkbox" name="interest" value="sports"> Sports
<input type="checkbox" name="interest" value="gaming"> Gaming

 DropDown (Select Box) :

- The ‘<select>’ element creates a dropdown list of options.


- Users can select one option from the list.
- Example :
<select name="country">
<option value="ind">India</option>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 10
VJ TECH ACADEMY – JAVASCRIPT NOTES

Survey Form Using All Elements :

<form action="">
<h2>VJTech Academy Survey Form</h2>
Your Name :<br>
<input type="text" name="name" placeholder="Enter your name" />
<br> <br>
Your Email :<br>
<input type="email" name="email" placeholder="Enter your email" />
<br> <br>
Your Mobile No :<br>
<input type="number" name="mono" placeholder="Enter mobile number">
<br> <br>
Select Gender :<br>
<input type="radio" name="Gender"> Male
<input type="radio" name="Gender"> Fe-Male
<br> <br>
Favorite Coding Language :<br>
<input type="checkbox" name="lang"> C
<input type="checkbox" name="lang"> C++
<input type="checkbox" name="lang"> Java
<input type="checkbox" name="lang"> Python
<input type="checkbox" name="lang"> PHP
<br> <br>
Select your college :<br>
<select name="college">
<option value="gpa">GPA</option>
<option value="gpp">GPP</option>
<option value="gpo">GPO</option>
<option value="gps">GPS</option>
<option value="gpn">GPN</option>
</select>
<br> <br>
Feedback : <br>
<textarea name="feedback" cols="30" rows="10"></textarea>
<br> <br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 11
VJ TECH ACADEMY – JAVASCRIPT NOTES

Survey Form Output :

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 12
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Form Event [ EventHandling ] :

- In JavaScript, functions are normally not called directly from the top level of JavaScript
program.
- Functions are called in response to various user action, such as clicking a button, move mouse
over the elements, etc.

 Events
- JavaScript code is executed on web page thorugh event.
- Events means action performed by the user.
- JavaScript enabled web pages are event driven. Events are actions that occur on the
webpage.
- Events are signals generated when specific action occurs.
- Events that might occur are due to following reasons:
1) A document loading
2) The user clicking mouse button.
3) The browser screen changing size. etc.

 Form Events

Event Description
Occurs when a form is submitted, either by clicking a submit button
submit
or pressing Enter.
reset Occurs when a form is reset using a reset button.
Occurs when the value of a form element (input, select, etc.)
change
changes and loses focus.
input Occurs when the value of an input element changes.
Occurs when an element gains focus, such as when a user clicks or
focus
tabs into an input field.
Occurs when an element loses focus, such as when a user clicks
blur
outside an input field.

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 13
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Mouse Events
Event Description
click Occurs when the element is clicked.

dblclick Occurs when the element is double-clicked.

mousedown Occurs when the mouse button is pressed over the element.
Occurs when the mouse button is released after being pressed over
mouseup
the element.

mousemove Occurs when the mouse pointer is moved while over the element.

mouseover Occurs when the mouse pointer enters the element.

mouseout Occurs when the mouse pointer leaves the element.

Similar to mouseover, but doesn't bubble and doesn't trigger again


mouseenter
when moving within the element.
Similar to mouseout, but doesn't bubble and doesn't trigger again
mouseleave
when moving within the element

mouseover Occurs when the mouse pointer enters the element.

 Key Events

Event Description
keydown Occurs when a key is pressed down.
keyup Occurs when a key is released after being pressed down.
keypress Occurs when a key that produces a character value is pressed down.

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 14
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Event Handler
- When function is assigned to event handler that function us run when that event occurs.
- We use below syntax for assigning function to event handler:
- Syntax:

element.event=function;

- Example:

document.onclick=CalcFact;

- In above example, CalcFact() function assigned to handler when onclick event occurs then
CalcFact() function is executed.
- When you assign function to event handler then no need to write parentheses after the function
name.
- We just link function name to event handler.
- CalcFact function is defined like this:
function CalcFact(event){
//code
}

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 15
VJ TECH ACADEMY – JAVASCRIPT NOTES

Event Handling Examples

1. Event : “onfocus”
<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function display() {
alert("Use Only Capital Letters !");
}
</script>
</head>
<body>
<form>
<input type="text" name="name" placeholder="Enter your name"
onfocus="display()" />
</form>
</body>
</html>

2. Event : “onselect”
<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function display() {
alert("You have selected some text in the textarea");
}
</script>
</head>
<body>
<form>
<p>Enter Feedback </p>
<textarea name="text" cols="30" rows="10"
onselect="display()"></textarea>
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 16
VJ TECH ACADEMY – JAVASCRIPT NOTES

3. Event : “onselect”
<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function display(value) {
alert("You have selected '" + value + "' college");
}
</script>
</head>
<body>
<form>
<p>Select College</p>
<select name="college" onchange="display(this.value)">
<option value="gpa">GPA</option>
<option value="gpp">GPP</option>
<option value="gpo">GPO</option>
<option value="gps">GPS</option>
<option value="gpn">GPN</option>
</select>
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 17
VJ TECH ACADEMY – JAVASCRIPT NOTES

4. Body Event : “onload” & “onunload”


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function body_onload() {
alert("Page is loading...");
}
function body_onunload() {
alert("Page is unloading...");
}
</script>
</head>
<body onunload="body_onunload()" onload="body_onload()" >
This Program Implements onload and onunload event attributes.
</body>
</html>

5. Button Event : “onclick” & “ondblclick”


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function onClickEvent() {
alert("onClickEvent Button Clicked");
}
function onDoubleClickEvent() {
alert("onDoubleClickEvent Button Clicked");
}
</script>
</head>
<body>
<button onclick="onClickEvent()">onClickEvent Button</button>
<button ondblclick="onDoubleClickEvent()">onDoubleClickEvent
Button</button>
</body>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 18
VJ TECH ACADEMY – JAVASCRIPT NOTES
</html>

6. Mouse Event : “onmouseover” & “onmouseout”


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function mouseOvered() {
alert("Mouse overed on textarea !");
}
function mouseOutes() {
alert("Mouse outed from textarea !");
}
</script>
</head>
<body >
<textarea id="textarea" onmouseover="mouseOvered()"
onmouseout="mouseOutes()" rows="10"></textarea>
</body>
</html>

7. Mouse Event : “onmouseover” & “onmouseout”


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function mouseDownEvent() {
console.log("Mouse Down Event");
}
function mouseUpEvent() {
console.log("Mouse Up Event");
}
</script>
</head>
<body>
<button onmousedown="mouseDownEvent()" onmouseup="mouseUpEvent()">Click
Me</button><br><br>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 19
VJ TECH ACADEMY – JAVASCRIPT NOTES
<i> "open console to see the output" </i>
</body>
</html>

8. Mouse Event : “onmousemove”


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function mouseMoveEvent() {
alert("Mouse is moving");
}
</script>
</head>
<body>
<form>
<textarea name="textarea" id="textarea" cols="30" rows="10"
onmousemove="mouseMoveEvent()"></textarea>
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 20
VJ TECH ACADEMY – JAVASCRIPT NOTES

9. Key Events : “onkeydown” & “onkeypress” & “onkeyup”


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">

function keyDownEvent(){
document.eventForm.btn.value = "Current Event : Key Down";
console.log("Key Down");
}
function keyPressEvent(){
document.eventForm.btn.value = "Current Event : Key Press";
}
function keyUpEvent(){
document.eventForm.btn.value = "Current Event : Key Up";
}
</script>
</head>
<body>
<form name="eventForm">
<input type="text" name="name" onkeydown="keyDownEvent()"
onkeypress="keyPressEvent()" onkeyup="keyUpEvent()">
<input type="button" name="btn" value="Current Event : None">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 21
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Form Object and Elements :

- HTML-Page->Window as First element.


- Window contain HTML document which is known as document object.
=>window object=>Document Objects=>Form Object=>Form Control Elements.
- One document can have multiple forms and they are arranged in array.
- We can access individual for using index or name.
- Example :
window.document.forms[2]; =>you are referring to 3rd form.
window.document.forms.vjtech=>you are referring to vjtech form.

- One form can have multiple elements and all are arranged in array.
- We can access individual form element by using array.
- Example :
window.document.forms.vjtech.elements[3];

- We can calculate length of form. Document.forms.length & document.forms.elements.length

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 22
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Example 1 : Display Name


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function display() {
var name = document.forms.VJTech.fname.value;
alert("Welcome " + name);
}
</script>
</head>
<body>
<form name="VJTech">
Enter Name : <input type="text" name="fname" placeholder="Enter your
name" /><br><br>
<input type="button" name="btn" value="Submit" onclick="display()">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 23
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Example 2 : Get Input From Student And Display Simple BioData


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function display() {
var name = document.forms.VJTech.fname.value;
var cname = document.forms.VJTech.cname.value;
var branch = document.forms.VJTech.branch.value;
alert("---------- Student Info ---------\n Name : " + name +
"\nCollege Name : " + cname + "\nBranch : " + branch);
}
</script>
</head>
<body>
<form name="VJTech">
Enter Your Name : <br>
<input type="text" name="fname" /><br><br>
Enter College Name : <br>
<input type="text" name="cname" /><br><br>
Enter Your Branch : <br>
<input type="text" name="branch" /><br><br>
<input type="button" name="btn" value="Submit" onclick="display()">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 24
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Example 3 : Retrive Data Using Method ‘getElementById()’


<html>
<head>
<title>Events</title>
<script language="javascript" type="text/javascript">
function display() {
var name = document.getElementById("fname").value;
alert("Hello " + name);
}
</script>
</head>
<body>
<form name="VJTech">
Enter Your Name : <br>
<input type="text" name="fname" id="fname" /><br><br>
<input type="button" name="btn" value="Submit" onclick="display()">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 25
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Example 4 : Changing Elements Content Using “innerHTML”


<html>
<head>
<title>innerHTML Demo</title>
<script language="javascript" type="text/javascript">
function display() {
var name = document.getElementById("fname").value;
document.getElementById("studentName").innerHTML = "Your Name Is :
" + name;
}
</script>
</head>
<body>
<form name="VJTech">
Enter Your Name : <br>
<input type="text" name="fname" id="fname" /><br><br>
<input type="button" name="btn" value="Submit" onclick="display()">
</form>
<label id="studentName">Your Name Is : NaN</label>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 26
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Changing Attributes Dynamically :


<html>
head>
<script language="javascript" type="text/javascript">
function display() {
document.forms.VJTech.myMassage.value = "WelCome - "+
document.forms.VJTech.fname.value;
}
</script></head>
<body>
<form name="VJTech">
First Name : <input type="text" name="fname" onkeyup="display()"
/><br><b<r>
Message : <input type="text" name="myMassage" />
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 27
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Changing Attributes Dynamically [ if email id is valid then set background yellow


otherwise set to red :
<html>
<head>
<script language="javascript" type="text/javascript">
function HighlightEmail(email) {
var email = document.VJTech.email.value;
if (email.indexOf("@") > 0 && email.indexOf(".") > 0) {
document.VJTech.email.style.backgroundColor = "yellow";
}
else {
document.VJTech.email.style.backgroundColor = "red";
}
}
</script>
</head>
<body>
<form name="VJTech">
First Name : <input type="text" name="fname" /><br><br>
Last Name : <input type="text" name="lname" /><br><br>
Email : <input type="email" name="email" onchange="HighlightEmail(this)"
/><br><br>
<input type="submit" name="btn" value="Submit" />
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 28
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Evaluating Checkbox Selection 1


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

function getSelectedCheckbox() {
var String = "Your Favorite Coding Language Is : ";
// using if statement to check if the checkbox is checked or not
if (document.forms.VJTech.c1.checked) {
String += document.VJTech.c1.value + ", ";
}
if (document.forms.VJTech.c2.checked) {
String += document.VJTech.c2.value + ", ";
}
if (document.forms.VJTech.c3.checked) {
String += document.VJTech.c3.value + ", ";
}
if (document.forms.VJTech.c4.checked) {
String += document.VJTech.c4.value + " ";
}
alert(String);
}
</script>
</head>
<body>
<form name="VJTech">
Favorite Coding Language : <br>
<input type="checkbox" name="c1" value="C" />C<br>
<input type="checkbox" name="c2" value="C++" />C++<br>
<input type="checkbox" name="c3" value="Java" />Java<br>
<input type="checkbox" name="c4" value="JavaScript" />JavaScript<br>
<input type="submit" name="btn" value="Submit"
onclick="getSelectedCheckbox()" />
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 29
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Evaluating Checkbox Selection 2


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

function getSelectedCheckbox() {
var String = "Your Favorite Coding Language Is : ";
// use for loop to check each checkbox on the form
for (var i = 0; i < document.forms.VJTech.c.length; i++) {
if (document.forms.VJTech.c[i].checked) {
String = String + document.VJTech.c[i].value + ", ";
}
}
alert(String);
}
</script>
</head>
<body>
<form name="VJTech">
Favorite Coding Language : <br>
<input type="checkbox" name="c" value="C" />C<br>
<input type="checkbox" name="c" value="C++" />C++<br>
<input type="checkbox" name="c" value="Java" />Java<br>
<input type="checkbox" name="c" value="JavaScript" />JavaScript<br>
<input type="checkbox" name="c" value="Python" />Python<br>
<input type="submit" name="btn" value="Submit"
onclick="getSelectedCheckbox()" />
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 30
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Hidden Form Element


<html>
<head>
<script language="javascript" type="text/javascript">
function display() {
var year = document.forms.VJTech.tf1.value;
var branch = document.forms.VJTech.tf2.value;
if (year.length > 0 && branch.length > 0) {
document.forms.VJTech.tf3.value = year + branch;
alert("Course Code is : " + document.forms.VJTech.tf3.value);
}
}
</script>
</head>
<body>
<form name="VJTech">
Enter Year:<input type="text" name="tf1"><br><br>
Enter Branch:<input type="text" name="tf2"><br><br>
Course Code:<input type="hidden" name="tf3"><br><br>
<input type="button" name="b1" value="Submit" onclick="display()">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 31
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Disabling Form Element


<html>
<head>
<script language="javascript" type="text/javascript">
function disableEditing() {
document.forms.VJTech.branchField.disabled = true;
}
function enableEditing() {
document.forms.VJTech.branchField.disabled = false;
}
</script>
</head>
<body>
<form name="VJTech">
Enter Branch : <input type="text" name="branchField"><br><br>
<input type="button" value="Disable" onclick="disableEditing()">
<br><br>
<input type="button" value="Enable" onclick="enableEditing()">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 32
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Read Only Method


<html>
<head>
<script language="javascript" type="text/javascript">
function disableEditing() {
document.forms.VJTech.branchField.disabled = true;
}
function enableEditing() {
document.forms.VJTech.branchField.disabled = false;
}
</script>
</head>
<body>
<form name="VJTech">
Enter Branch : <input type="text" name="branchField"><br><br>
<input type="button" value="Disable" onclick="disableEditing()">
<br><br>
<input type="button" value="Enable" onclick="enableEditing()">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 33
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Changing Option List Dynamically


<html>
<head>
<script language="javascript" type="text/javascript">
function display(value) {
with (document.forms.VJTech) {
if (interest.value == 1) {
optionList.length = 0; // clear option list
optionList[0] = new Option("PUBG", 1);
optionList[1] = new Option("Call Of Duty", 2);
optionList[2] = new Option("Free Fire", 3);
optionList[3] = new Option("Clash Of Clans", 4);
}else if (interest.value == 2) {
optionList.length = 0; // clear option list
optionList[0] = new Option("C", 1);
optionList[1] = new Option("C++", 2);
optionList[2] = new Option("Java", 3);
optionList[3] = new Option("JavaScript", 4);
optionList[4] = new Option("Python", 5);
}
}
}
</script>
</head>
<body>
<form name="VJTech">
<!-- change option list dynamic example -->
<select name="optionList">
<option value="1">Nan</option>
</select>
<br><br>
<input type="radio" name="interest" value="1"
onclick="display(this.value)"> Gaming <br>
<input type="radio" name="interest" value="2"
onclick="display(this.value)"> Programming <br> <br>
<input type="button" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 34
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Intrinsic JavaScript Functions

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

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 35
VJ TECH ACADEMY – JAVASCRIPT NOTES

- Program:

<html>
<head>
<title>Using Intrinsic JavaScript Functions</title>
</head>
<body>
<h2>HTML Forms</h2>
<form name="VJTech">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="email">Email</label><br>
<input type="email" id="email" name="email"><br><br>

<img src="./reset.jpg"
onclick="javascript:document.forms.VJTech.reset()">
<img src="./submit.jpg"
onclick="javascript:document.forms.VJTech.submit()">

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

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 36
VJ TECH ACADEMY – JAVASCRIPT NOTES

VJTECH ACADEMY
ClAss noTEs

JavaScript Notes by Vishal Jadhav Sir (VJTech Academy, contact us: +91-7743909870 ) Page 37

You might also like