Scribd
Upload
78 views

CSS Chapter 3 Notes

Uploaded by

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

CSS Chapter 3 Notes

Uploaded by

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

Client Side Scripting Language : JavaScript

Unit 3 : Forms and Event Handling


3. Introduction
3.1 Building Block of forms
3.1.1 Form Object and Elements
3.1.2 Properties and methods of form
3.1.3 <input> Element of Form : button, text, text area, checkbox, radio buttons, select
3.2 Form events
3.2.1 Mouse event
3.2.2 Key events
3.3 Changing attribute value dynamically
3.4 Changing option list dynamically
3.5 Evaluating checkbox selections
3.6 Changing a label dynamically
3.7 Manipulate form elements
3.8 Intrinsic Java script functions
3.8.1 Disabling elements,
3.8.2 Read only elements

Prof. Pathan F. S 1 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
3.3 Changing attribute value dynamically
JavaScript can change the value of any form element dynamically. To change the attribute value
of an element. We need to access that element in JS either using element id, class name, or any
other way. We can access the attribute using attrib_name and assign a new value to it.
Syntax : element.attribute = new_value;
The onchange event is associated with many element of the form object (<input>,<select>) which
makes call to function where the change attribute value code is written.
Example 3.3.1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.3.1</title>
<script>
function highlight(Element){
Element.style.color = "yellow";
Element.style.backgroundColor = "red";
}
</script>
</head>
<body>
<form action="" name="myform" method="post">
<p>
First Name : <input type="text" value="Firozkhan" name="fname" onchange="highlight(this)"><br>
Last Name : <input type="text" value="Pathan" name="lname" onchange="highlight(this)"><br>
<input type="submit" value="Submit" name="submit">
</p>
</form>
</body>
</html>
Output:

Example 3.3.2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.3.2</title>
<script>
function OnSelChange(element){
var selected = element.options[element.selectedIndex].value;
document.getElementById("demo").innerHTML="You have selected :"+selected;

Prof. Pathan F. S 2 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
}
</script>
</head>
<body>
<h2>Select an item from the following list : </h2><br>
<select name="fruit" onchange="OnSelChange(this)">
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Pineapple">Pineapple</option>
</select>
<p id="demo"></p>
</body>
</html>
Output:

Change the Style Attribute Value:


Changing the background color of the div element, simply access the style attribute of the
element. The style attribute also contains various properties such as font size, color, background
color, height, width, etc.,
Syntax : let element = document.getElementById( "element_id" );
element.style.backgroundColor = „color‟;
Example 3.3.3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.3.3</title>
</head>
<body>
<h2>Change the attribute value using JavaScript.</h2>
<h4>Click the button to change the <i> background-color <i> of the below text.</h4>
<div id = "fonts">change color of this.</div>
<button onclick = "changeBackground()">change background</button>
<script>
function changeBackground() {
let fontsDiv = document.getElementById("fonts");
fontsDiv.style.backgroundColor = 'yellow'; // change background color of div element using style attribute
}
</script> </body> </html>

Prof. Pathan F. S 3 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
Output :

Toggle the Image by Changing the src Attribute Value:


Change the value of the src attribute of the <img> element of HTML. Access the image element
using the id and replace the src attribute value for a particular element.
Syntax : let imgDiv = document.getElementById( "image_id" ); // access the image using id
imgDiv.src = 'new_image_URL'
Example 3.3.4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.3.4</title>
</head>
<body>
<h2>Change the attribute value using JavaScript.</h2>
<h4>Changing the <i> src attribute value </i> of below image on button click.</h4>
<img id = "img" src="birdimg.jpg" alt = "demo"><br>
<button onclick = "changeImage()">change Image</button>
<script>
function changeImage() {
let imgDiv = document.getElementById("img");
imgDiv.src = "birdimg1.jpg" // replace the image on button click.
}
</script> </body> </html>
Output:

Prof. Pathan F. S 4 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
Set New Attribute to the Element:
The setAttribute() method of JavaScript to add a new attribute with its value to the element.
Syntax : let element = document.getElementById( "element_id" );
element.setAttribute( "attribute", "value" );
Example 3.3.5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.3.5</title>
</head>
<body>
<h3>set new Attribute to the HTML element using JavaScript.</h3>
<h4>Adding the <i> height attribute </i> to the below image and set it to 200px.</h4>
<img id = "img" src="nature1.jpg" alt="demo"><br>
<button onclick = "changeImage()">change Image height</button>
<script>
function changeImage() {
let imgDiv = document.getElementById( "img" );
imgDiv.setAttribute( "height", "250px" ); // set height attribute to image div
}
</script>
</body>
</html>

Output:

For more examples :


https://www.geeksforgeeks.org/how-to-change-style-attribute-of-an-element-dynamically-using-
javascript/
https://www.tutorialspoint.com/How-to-change-the-value-of-an-attribute-in-
javascript#:~:text=To%20change%20the%20attribute%20value,a%20new%20value%20to%20it.

Prof. Pathan F. S 5 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
3.4 Changing option list dynamically
In JavaScript we can change the value of option list at runtime according to choice or input given
by the user.
Example 3.4.1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.4.1</title>
<script>
function updatelist(elevalue)
{
with(document.forms.myform)
{
if(elevalue==1)
{
oplist[0].text="Mango";
oplist[0].value=1;
oplist[1].text="Apple";
oplist[1].value=2;
oplist[2].text="Banana";
oplist[2].value=3;
}
if(elevalue==2)
{
oplist[0].text="Tamato";
oplist[0].value=1;
oplist[1].text="Potato";
oplist[1].value=2;
oplist[2].text="Cabbage";
oplist[2].value=3;
} } }
</script>
</head>
<body>
<form action="" name="myform" method="post">
<p>
<select name="oplist" id="" size="2">
<option value=1>Mango</option>
<option value=2>Apple</option>
<option value=3>Banana</option>
</select>
<br>
<input type="radio" name="group1" value=1 checked="true" onclick="updatelist(this.value)">Fruits
<input type="radio" name="group1" value=2 onclick="updatelist(this.value)">Vegetables
<br>
<input type="reset" name="reset" value="reset" onclick="updatelist(1)">
</p>
</form>
Prof. Pathan F. S 6 Jamia Polytechnic (0366)
Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
</body>
</html>
Output :

3.5 Evaluating checkbox selections


A checkbox is a selection box that allows the users to make the binary choice (true or false) by
checking and unchecking it. If a checkbox is marked or checked, it indicates to true else false
Example 3.5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.5</title>
<script>
function selection()
{
var ans = "You have selected : "
with(document.forms.myform)
{
if(a.checked==true){ ans = ans + a.value+" ";}
if(b.checked==true){ ans = ans +b.value+" ";}
if(c.checked==true){ ans = ans +c.value+" ";}
if(d.checked==true){ ans = ans +d.value+" ";}
if(e.checked==true){ ans = ans +e.value+" ";}
}
document.getElementById("demo").innerHTML=ans;
}
function blank()
{
document.getElementById("demo").innerHTML="";
}
</script>
</head>
<body>
<form action="" name="myform" method="post">
Select your favourate fruit :
<input type="checkbox" name="a" value="Apple"> Apple
<input type="checkbox" name="b" value="Mango"> Mango
<input type="checkbox" name="c" value="Graphes"> Graphes
Prof. Pathan F. S 7 Jamia Polytechnic (0366)
Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
<input type="checkbox" name="d" value="Banana"> Banana
<input type="checkbox" name="e" value="Pineapple"> Pineapple
<input type="button" value="Show" onclick="selection()">
<input type="reset" name="reset" value="Reset" onclick="blank()">
<p id="demo"></p>
</form>
</body>
</html>
Output:

https://www.javatpoint.com/how-to-get-all-checked-checkbox-value-in-javascript
https://www.tutorialspoint.com/How-to-check-whether-a-checkbox-is-checked-in-
JavaScript#:~:text=In%20JavaScript%2C%20we%20can%20access,on%20the%20checkbox%20i
s%20checked.
https://www.javascripttutorial.net/javascript-dom/javascript-checkbox/
3.6 Changing a label dynamically
We can change the label of the form element dynamically i.e relabeling of form element.
Example 3.6.1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.6.1</title>
<script>
function updatelist(elevalue)
{
with(document.forms.myform)
{
if(elevalue=="Fruits")
{ togglebtn.value="Vegetables";
oplist[0].text="Mango";
oplist[0].value=1;
oplist[1].text="Apple";
oplist[1].value=2;
oplist[2].text="Banana";
oplist[2].value=3;
document.getElementById("demo").innerHTML="Now you are looking Fruits";
}
if(elevalue=="Vegetables")
{ togglebtn.value="Fruits";
oplist[0].text="Tamato";

Prof. Pathan F. S 8 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
oplist[0].value=1;
oplist[1].text="Potato";
oplist[1].value=2;
oplist[2].text="Cabbage";
oplist[2].value=3;
document.getElementById("demo").innerHTML="Now you arelooking Vegitables";
}
}
}
</script>
</head>
<body>
<form action="" name="myform" method="post">
<p id="demo"></p>
<p>
<select name="oplist" id="" size="2">
<option value=1>Mango</option>
<option value=2>Apple</option>
<option value=3>Banana</option>
</select>
<br>
<input type="reset" name="togglebtn" value="Fruits" onclick="updatelist(this.value)">
</p>
</form>
</body>
</html>
Output:

https://www.geeksforgeeks.org/how-to-change-the-text-of-a-label-using-javascript/
3.7 Manipulate form elements
JavaScript provide a facility to manipulate form elements after the user clicks the Submit button
and before the form is actually submitted to the application.
Example 3.7.1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
Prof. Pathan F. S 9 Jamia Polytechnic (0366)
Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
function addmail()
{
with (document.forms.myform)
{
if(fname.value.length>0 && lname.value.length>0)
{
email.value=fname.value.charAt(0)+lname.value+"@gmail.com";
}
}
}
</script>
</head>
<body>
<form action="" name="myform">
First Name = <input type="text" name="fname"><br>
Last Name = <input type="text" name="lname"><br>
Email = <input type="hidden" name="email"><br>
<input type="button" name="submit" value="Submit" onclick="addmail()">
</form>
</body>
</html>
Output :

3.8 Intrinsic Java script functions


An intrinsic function is built-in function in JavaScript, whose implementation is handled
specially by the compiler. JavaScript provides intrinsic (or “built-in”) objects. They are the Array,
Boolean, Date, Error, Function, Global, JSON, Math, Number, Object, RegExp, and String objects.
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.
Example 3.8
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3.8</title>
</head>
<body>
<h3>Intrinsic (Built In ) Java script functions</h3>
<FORM name="contact" action="#" method="get">
<P>
Prof. Pathan F. S 10 Jamia Polytechnic (0366)
Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
First Name: <INPUT type="text" name="Fname"/> <BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
<img src="submit1.jpg" width="100" height="100" onclick="javascript:document.forms.contact.submit()"/>
<img src="reset1.jpg" width="100" height="100" onclick="javascript:document.forms.contact.reset()"/>
</P>
</FORM>
</body>
</html>

https://rahultamkhane.medium.com/develop-a-webpage-using-intrinsic-java-functions-
36cb3b84826c
3.8.1 Disabling elements
Some time we need to enable or disable input elements like text box, radio button or checkbox etc.
The element can be disabled by setting disable property to true.
A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray
by default in browsers.
buttonObject.disabled
buttonObject.disabled = true|false
Example 3.8.1a:
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">My Button</button>
<br><br>
<button onclick="disableBtn()">Disable "My Button"</button>
<button onclick="enableBtn()">Enable "My Button"</button>
<script>
function disableBtn() {
document.getElementById("myBtn").disabled = true;
}
function enableBtn() {
document.getElementById("myBtn").disabled = false;
}
</script>
</body>
</html>

Prof. Pathan F. S 11 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
Output :

Example 3.8.1b:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function toggle()
{
var txt = document.getElementById("mytxt");
if('disabled' in txt)
{
txt.disabled=!txt.disabled;
txt.value = "Text box is enabled"
}
}
</script>
<title>Example 3.8.2</title>
</head>
<body>
<input type="text" id="mytxt" disabled="disabled" value="Text box is disabled"><br>
<button onclick="toggle();">Change State</button>
</body>
</html>

3.8.2 Read only elements


JS can restrict the user from changing the value of an element by setting readOnly property to
true. User can set its readonly property to false.
Example 3.8.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Prof. Pathan F. S 12 Jamia Polytechnic (0366)
Computer Dept. Akkalkuwa
Client Side Scripting Language : JavaScript
<script>
function readonly()
{
document.forms.myform.txt1.readOnly=true;
}
function enter()
{
document.forms.myform.txt1.readOnly=false;
}
</script>
<title>Example 3.8.2</title>
</head>
<body>
<form action="" name="myform" method="post">
Enter your name : <input type="text" name="txt1" id="">
<input type="button" name="b1" value="Read Only" onclick="readonly()">
<input type="button" name="b2" value="Write" onclick="enter()">
</form>
</body>
</html>
Output :

https://www.geeksforgeeks.org/how-to-add-readonly-attribute-to-an-input-tag-in-javascript/

Prof. Pathan F. S 13 Jamia Polytechnic (0366)


Computer Dept. Akkalkuwa

You might also like