Scribd
Upload
6 views

Client Side Scripting Unit-3

Notes For Client Side Scripting (22519) Diploma 3rd Year 5th Sem (I Scheme) Chapter 3

Uploaded by

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

Client Side Scripting Unit-3

Notes For Client Side Scripting (22519) Diploma 3rd Year 5th Sem (I Scheme) Chapter 3

Uploaded by

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

Unit-3 Form and Event Handling Vikas Patil

Form and Event Handling (10M)

W-19 (20M)
Q.1. (f) Write a Java script to design a form to accept values for user ID & password. (2M)
<html>
<head>
<title>Form 1 W-19</title>
<script>
function display(){
document.write("User ID : "+f1.t1.value+"<br>"+"Password: "+f1.p1.value);
}
</script>
</head>
<body>
<form name="f1">
Enter User ID : <input type="text" name="t1"><br>
Enter Password : <input type="password" name="p1" ><br>
<input type="button" value="Display" onclick="display()">
</form>
</body>
</html>

Q.5. (a) Write a HTML script which displays 2 radio buttons to the users for fruits and vegetable and 1 option list.

When user select fruits radio button option list should present only fruits names to the user & when user

Select vegetable radio button option list should present only vegetable names to the user. (6M)
<html>
<body>
<form name="myform">
<select name="optionList" size="2">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Chiku</option>
</select>
<br>
<input type="radio" value="1" name="grp" checked="true"
onclick="updateList(this.value)" >Fruits
<br>
<input type="radio" name="grp" value="2"
onclick="updateList(this.value)">Vegetables
</form>
<script>
function updateList(elementValue) {
with(document.forms.myform){
if(elementValue==1){
optionList[0].text="Apple";
optionList[0].value=1;
optionList[1].text="Banana";
optionList[1].value=2;
optionList[2].text="Chiku";
optionList[2].value=3;
}
if (elementValue==2) {
optionList[0].text="Potato";

1
Unit-3 Form and Event Handling Vikas Patil

optionList[0].value=1;
optionList[1].text="Brocoli";
optionList[1].value=2;
optionList[2].text="Tomato";
optionList[2].value=3;
}
}
}
</script>
</body>
</html>

Q.5. (c) Write a Java script that displays textboxes for accepting name & email ID & a submit button. Write Java script

code such that when the user clicks on submit button

(1) Name Validation

(2) Email ID validation (6M)

Q.6. (a) Describe how to evaluate checkbox selection. Explain with suitable example. (6M)

W-22 (18M)

Q.1. (f) Enlist & explain the use of any two Intrinsic JavaScript Functions. (2M)

Q.5. (a) Write HTML script that will display following structure. (6M)

Name:

Email:

Pin code:

Submit

Write the JavaScript code for below operations:

(1) Name, Email & Pin Code should not be blank.

(2) Pin Code must contain 6 digits & it should not be accept any characters.

Q.6. (a) Write HTML script that will display dropdown list containing options such as Red, Green, Blue and Yellow.

Write a JavaScript program such that when the user selects any options. It will change the background colour

of webpage. (6M)

2
Unit-3 Form and Event Handling Vikas Patil

S-22 (10M)
Q.1. (d) Explain following form events : (i) onmouseup (ii) onblur (2M)

Q.2. (c) Write a javascript program to demonstrate java intrinsic function. (4M)

Q.3. (c) Write a javascript program to calculate add, sub, multiplication and division of two number (input from

user). Form should contain two text boxes to input numbers of four buttons for addition, subtraction,

multiplication and division. (4M)


<html>
<head>
<title>Add,sub,mul and div </title>
<script>
function add(){
var a=parseInt(document.myform.num1.value);
var b=parseInt(document.myform.num2.value);
alert(a+b);
}
function sub(){
var a=parseInt(document.myform.num1.value);
var b=parseInt(document.myform.num2.value);
alert(a-b);
}
function mul(){
var a=parseInt(document.myform.num1.value);
var b=parseInt(document.myform.num2.value);
alert(a*b);
}
function div(){
var a=parseInt(document.myform.num1.value);
var b=parseInt(document.myform.num2.value);
alert(a/b);
}
</script>
</head>
<body>
<form name="myform">
Enter Number 1 : <input type="text" name="num1" id="num1"><br>
Enter Number 2 : <input type="text" name="num2" id="num2"><br>
<input type="button" onclick="add()" value="ADD">
<input type="button" onclick="sub()" value="SUB">
<input type="button" onclick="mul()" value="MUL">
<input type="button" onclick="div()" value="DIV">
</form>
</body>
</html>

3
Unit-3 Form and Event Handling Vikas Patil

S-23 (26M)
Q.1. (f) Enlist any four mouse events with their use. (2M)

Q.5. (a) Write HTML code to design a form that displays two textboxes for accepting two numbers, one textbox for

accepting result and two buttons as ADDITION and SUBTRACTION. Write proper JavaScript such that when

the user clicks on any one of the button, respective operation will be performed on two numbers and result

will be displayed in result textbox. (6M)


<html>
<head>
<title>Simple Calculator- ADD and SUB</title>
<script>
function add(){
var a = parseInt(document.myform.num1.value);
var b = parseInt(document.myform.num2.value);
var add = a+b;
document.myform.result.value=add;
}
function sub(){
var a = parseInt(document.myform.num1.value);
var b = parseInt(document.myform.num2.value);
var sub = a-b;
document.myform.result.value=sub;
}
</script>
</head>
<body>
<form name="myform">
<br>
Enter Number 1 : <input type="text" name="num1" id="num1"><br>
Enter Number 2 : <input type="text" name="num2" id="num2"><br><br>
Result : <input type="text" name="result" readonly><br><br>
<input type="button" onclick="add()" value="ADD">
<input type="button" onclick="sub()" value="SUB">
</form>
</body>
</html>

Q.5. (b) Write HTML code to design a form that displays two buttons START and STOP. Write a JavaScript code such

that when user clicks on START button, real time digital clock will be displayed on screen. When user clicks

on STOP button, clock will stop displaying time. (Use Timer methods) (6M)
<html>
<body>
<form name="myform">
<p>Star the Clock</p><br>
<input type="button" id="b1" value="Start" onclick="start()">
<input type="button" id="b2" value="Stop" onclick="stop()">
<p id="demo"></p>
</form>
<script>
var interval;

4
Unit-3 Form and Event Handling Vikas Patil

function start(){
interval = setInterval(myTimer,1000);
myTimer();
}
function stop(){
clearInterval(interval);
document.getElementById("demo").innerHTML="";
}

function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

</script>
</body>
</html>

Q.6. (a) Explain how to evaluate Radiobutton in JavaScript with suitable example. (6M)

W-23 (18M)
Q.1. (f) Give syntax of and explain the use of small “with” clause. (2M)

Q.3. (a) Write an HTML Script that displays the following webpage output : (4M)

The user enters two numbers in respective text boxes. Write a JavaScript such that when user clicks “add”, a

message box displays sum of two entered numbers, if the user clicks on “sub”, message box displays

subtraction of two numbers and on clicking “mul” the message box displays multiplication of two numbers.

Q.3. (b) Write a JavaScript that accepts user’s first name and domain name of organization from user. The JavaScript

then forms email address as and displays the results in the browser window. (4M)
<html>
<head>
<title>Create Email address</title>
</head>
<body>
<form name="myform">
Username : <input type="text" name="user" id="user"><br>
Domain : <input type="text" name="domain" id="domain"><br>
<br>
<input type="button" value="Create" onclick="Create()">

5
Unit-3 Form and Event Handling Vikas Patil

</form>
<script>
function Create(){
var username=document.myform.user.value;
var domain=document.myform.domain.value;
var mail=username+"@"+domain;
document.write("<br>"+"Email Address : "+mail)
}
</script>
</body>
</html>

Q.5. (c) (i) Write HTML and respective JavaScript such that (i) Webpage displays three checkboxes as : (6M)

(ii) When a beverage is selected a dropdown list with options as below appears on page :

(a) If “TEA” option is checked dropdown list contains

Green Tea
Milk Tea
Black Tea
(b) If “COFFEE” option is selected dropdown list contains.

Capaccino
Latte
Expression
(c) If “SOFT DRINK” option is selected dropdown list contains

MAAZA
SPRITE
COCA-COLA

<html>
<body>
<script>
function updatelist(elementValue){
with(document.forms.myForm){
if(elementValue==1){
optionList[0].text="Green Tea";
optionList[0].value=1;
optionList[1].text="Milk Tea";
optionList[1].value=2;
optionList[2].text="Black Tea";
optionList[2].value=3;
}

6
Unit-3 Form and Event Handling Vikas Patil

if(elementValue==2){
optionList[0].text="Capaccino";
optionList[0].value=1;
optionList[1].text="Latte";
optionList[1].value=2;
optionList[2].text="Expression";
optionList[2].value=3;
}
if (elementValue==3) {
optionList[0].text="MAAZA";
optionList[0].value=1;
optionList[1].text="SPRITE";
optionList[1].value=2;
optionList[2].text="COCA-COLA";
optionList[2].value=3;
}
}
}
</script>
<form name="myForm">
Select Beverage : <input type="checkbox" name="grp" value="1"
onclick="updatelist(this.value)" checked="true">TEA<br>
<input type="checkbox" name="grp" value="2"
onclick="updatelist(this.value)">COFFEE<br>
<input type="checkbox" name="grp" value="3"
onclick="updatelist(this.value)">Cold Drink<br><br>

<select name="optionList" size="3">


<option value="1">Green Tea</option>
<option value="2">Milk Tea</option>
<option value="3"> Black Tea</option>
</select>

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

Q.6. (a) List and explain any six form events. (6M)

S-24 (14M)
Q.1. (f) Enlist and explain any two mouse events. (2M)

Q.5. (a) Write HTML script that displays textboxes for accepting username and password. Write proper JavaScript

such that when the user clicks on submit button (6M)

i) All textboxes must get disabled and change the color to ‘RED; and with respective labels
ii) ii) Prompt the error message if the password is less than six characters

Q.6. (a) Explain following form control / elements with example Button, Text, TextArea, Select, Checkbox, Form. (6M)
<html>
<head>
<title>All Form Elements</title>
<script>

7
Unit-3 Form and Event Handling Vikas Patil

function Submit(){
alert("Form Submitted Successfully");
}
</script>
</head>
<body>
<form>
Enter First Name :
<input type="text">
<br>
Enter Middle Name :
<input type="text">
<br>
Enter Last Name :
<input type="text">
<br>
Enter Phone Number :
<input type="number" name="mobileno">
<br><br>
Gender :
<br>
Male<input type="radio" name="gender"><br>
Female<input type="radio" name="gender"><br>
Others<input type="radio" name="gender"><br>
<br>
Select Year : <select name="dropdown">
<option value="FY">FY</option>
<option value="SY">SY</option>
<option value="TY">TY</option>
</select>
<br><br>
Select subjects of this semester : <br>
OSY <input type="checkbox" name="c1"><br>
AJP <input type="checkbox" name="c2"><br>
CSS <input type="checkbox" name="c3"><br>
STE <input type="checkbox" name="c4"><br>
EST <input type="checkbox" name="c5"><br>
<br>
Enter Mail ID : <input type="email" name="mailid"><br>
<br>
Enter Password : <input type="password" name="pass" id="">
<input type="submit" value="Submit" onclick="Submit()">
<input type="reset" value="Reset">
</form>
</body>
</html>

You might also like