WEB PROGRAMMING
LAB PROGRAMS
PART-B
B-1) Program to demonstrate list tag
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Lists</title>
</head>
<body>
<h1>To show lists</h1>
</hr>
<h4>Nested</h4>
<ol>
<li>Karnataka</li>
<li>TN</li>
<ol type="a">
<li>Mysore</li>
<li>Chennai</li>
<ol type="i">
<li>Gunjur</li>
<li>Belladur</li>
<ul type="Square">
<li>Electronic city P1</li>
<li>Electronic city P2/li>
</ul>
<li>HSR</li>
</ol>
</ol>
<li>Delhi</li>
</ol>
<h3>Definition</h3>
<dl>
<dt>Bangalore</dt>
<dd>Capital city of karnataka</dd>
<dt>Mumbai</dt>
<dd>Capital city of Maharashtra</dd>
</dl>
</body>
</html>
OUTPUT
B-2) Program to demonstrate table tag
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"[Link]
<html xmlns="[Link]
<head>
<title>Table Tags</title>
</head>
<body>
<table cellpadding="15" cellspacing="1" border="5" width="600" align="center">
<caption><h1>BCA 6th SEM TIME TABLE</h1></caption>
<tr>
<th>Day</th>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr>
<td>MON</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H</td>
<td>CNS</td>
<td>WEB</td>
<td>TOC</td>
</tr>
<tr>
<td>TUE</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td colspan="3">...WEB LAB...</td>
</tr>
<tr>
<td>WED</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>TOC</td>
<td>CNS</td>
<td>WEB</td>
</tr>
<tr>
<td>THUR</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td colspan="2">...PROJECT...</td>
<td>TOC</td>
</tr>
<tr>
<td>FRI</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>CNS</td>
<td colspan="2">...PROJECT...</td>
</tr>
<tr>
<td>SAT</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>CNS</td>
</tr>
</table>
</body>
</html>
OUTPUT
B-3) Program to demonstrate image tag
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns-"[Link]
<head><title>Image tag</title></head>
<body>
<h3 align="center">To illustrateimage tags</h3><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\[Link]" align="right" height="100"
width="100"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\[Link]" height="100" width="100"
style="boeder:10px solid yellow;"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\[Link]" height="100" hspace="10"
vspace="10" align="middle"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
</body>
</html>
OUTPUT
B-4) Program to demonstrate anchor tag.
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"[Link]
<html xmlns="[Link]
<head>
<title>ANCHOR TAG</title>
</head>
<body>
<h3 align="center">TO ILLUSTRATE TAG</h3><hr/>
<h2><a name="top"><b><u>Top of the page</u></b></a></h2><hr/><hr/>
Test as a link to another page:
<a href="C:\HTMLPROGRAMS\[Link]">
click me!!!</a>
<hr/>
Image as a link to another page:
<a href="C:\HTMLPROGRAMS\2-Table [Link]">
<img src="C:\HTMLPROGRAMS\pics\[Link]" width="100" height="100"/></a>
<hr/>
Link to mail:<a href="mail to kdc@[Link]">EMAIL ME!!!</a>
<hr/>
Link to download a file:<a href="C:\HTMLPROGRAMS\[Link]">
Click here to download a file!!!</a>
<hr/>
<p><a hred="#chapter 8">See also chapter 8 (link within the page)</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
<h2>Chapter 3</h2>
<p>This chapter explains operators</p>
<h2>Chapter 4</h2>
<p>This chapter explains structures</p>
<h2>Chapter 5</h2>
<p>This chapter explains array</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expression</p>
<h2><a name="Chapter 8"><u>Chapter 8</u></a></h2>
<p>This chapter explains binary tree</p>
<h2>Chapter 9</h2>
<p>This chapter explains unordered list</p>
<h2>Chapter 10</h2>
<p>This chapter explains statements</p>
<h2>Chapter 11</h2>
<p>This chapter explains searching</p>
<a href="#top">Click here to go to top of the page(link with a page)</a>
</body>
</html>
OUTPUT
B-5) Program to demonstrate anchor tag.
[Link]
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>FORM</title>
</head>
<body>
<h1 align="center"><u>Student Registration Form</u></h1>
<form action="file:C:\HTMLPROGRAMS\5-Form\[Link]" name="Student"
method="get">
<label>Name:</label><input type="text" name="textnames" size="30"/>
<br/><br/>
<label>Father Name:</label><input type="text" name="fathername" size="30"/>
<label>Mother Name:</label><input type="text" name="mothername" size="30"/>
<br/><br/>
<label>Personal Address:</label><textarea rows="10" cols="50">Enter adress
here</textarea>
<br/><br/>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="Gender"/>Male
<input type="radio" name="Gender"/>Female
</fieldset>
<br/><br/>
<fieldset>
<legend>Languages</legend>
<input type="checkbox" name="lang"/>Kannada
<input type="checkbox" name="lang"/>English
<input type="checkbox" name="lang"/>Hindi
<input type="checkbox" name="lang"/>Tamil
<input type="checkbox" name="lang"/>Telugu
</fieldset>
<label>Couse:</label>
<select name="Course">
<option selected="selected">Select....</option>
<optgroup label="DEGREE">
<option>BCOM</option>
<option>BCA</option>
<option>BSC</option>
</optgroup>
<optgroup label="PUC">
<option>I PUC</option>
<option>II PUC</option>
</optgroup>
</select>
<br/><br/>
<label>city:</label><select name="city">
<option selected="selected">Select.....</option>
<option>Bangalore</option>
<option>Mysore</option>
<option>Chennai</option>
<option>Mandya</option>
</select>
<br/><br/>
<label>Pincode:</label><input type="text" name="pincode" size="30"/>
<br/><br/>
<input type="reset"/>
<input type="submit" value="click here to proceed"/>
</form>
</body>
</html>
[Link]
<html>
<head>
<title>SUCESS</title>
</head>
<body>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h1 align="center">SUBMITTED</h1>
</body>
</html>
OUTPUT 1
OUTPUT 2
B-6) Program to demonstrate frame tag.
[Link]
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"[Link]
<html xmlns="[Link]
<head>
<title>FRAME TAG</title>
</head>
<frameset cols="20,60">
<frame src="C:\HTMLPROGRAMS\6-Frame\[Link]">
<frame src="C:\HTMLPROGRAMS\6-Frame\[Link]" name="rightpane"/>
</frameset>
</html>
[Link]
<html>
<head><title>BANGALORE</title>
</head>
<body><bg color="blue">
<h1>WELCOME TO BANGALORE</h1>
</body>
</html>
[Link]
<html>
<head><title>LEFTPANE</title></head>
<body>
<h3>Districts of Karnataka</h3>
<a href="C:\HTMLPROGRAMS\6-Frame\[Link]"
target="rightpane">BANGALORE<br/></a>
<a href="C:\HTMLPROGRAMS\6-Frame\[Link]" target="rightpane">Mysore<br/></a>
<marquee>I AM LEFT PANE</marquee>
</body>
</html>
[Link]
<html>
<head><title>MYSORE</title>
</head>
<body><bg color="yellow">
<h1>WELCOME TO MYSORE</h1>
</body>
</html>
[Link]
<html>
<head><title>Rightpane</title></head>
<body>
<h1>Click on any state to get a welcome message</h1>
<marquee>I Am RIGHTPANE</marquee>
</body>
</html>
OUTPUT 1:
OUTPUT 2:
OUTPUT 3:
B-7) Program to validate age.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>VALIDATE AGE</title>
<script type="text/javascript">
function Check()
{
var entervalue=[Link]("age").value;
if(entervalue>18 && entervalue<=100)
{
[Link]("You are eligible to vote.");
}
else
{
[Link]("Age cannot be less than 18 or greater than 100.");
}
}
</script>
</head>
<body>
<h1>Program to evaluate age for voting</h1>
<form>
<label>Enter Age:<input type="text" id="age"/>
<input type="button" value="Click Here" onclick="Check()"/>
</form>
</body>
</html>
OUTPUT
B-8) Program to calculate factorial.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>FACTORIAL</title>
<script type="text/javascript">
var n=parseInt([Link]("Enter number"));
var fact=factorial(n);
[Link]("<h1>Factorial of "+n+" is "+fact+" </h1>");
function factorial(n)
{
if(n<=1)
return 1;
else
return n*factorial(n-1);
}
</script>
</head>
</html>
OUTPUT
B-9) Program to demonstrate string
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>String Functions</title>
</head>
<body>
<script type="text/javascript">
var str = "WEB PROGRAMMING BOOK BY SEBESTA";
[Link]("The string is: " + str);
[Link]("<br/><hr/>The length of the string is: " + [Link]);
[Link]("<br/><hr/>The character at the 4th position is: " + [Link](4));
[Link]("<br/><hr/>The index of 'B' is: " + [Link]('B'));
[Link]("<br/><hr/>The last index of 'B' is: " + [Link]('B'));
[Link]("<br/><hr/>The uppercase of the string is: " + [Link]());
[Link]("<br/><hr/>The lowercase of the string is: " + [Link]());
[Link]("<br/><hr/>The substring found between two indexes is: " +
[Link](4, 12));
[Link]("<br/><hr/>The substring in a string beginning at the specified location to
the number of characters: " + [Link](8, 12));
</script>
</body>
</html>
OUTPUT
B-10) Program to demonstrate array operations.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Array Functions</title>
</head>
<body>
<script type="text/javascript">
var myarr=new Array(5);
myarr[0]="Mango";
myarr[1]="Banana";
myarr[2]="Apple";
myarr[3]="Grapes";
myarr[4]="Chicko";
[Link]("The array elements are");
for(var i=0;i<[Link];i++)
{
[Link]("<br/>" + myarr[i]);
}
myarr=[Link]("Melon","Plum");
[Link]("<br/><hr/>After concatenation the array is:" + myarr);
[Link]("<br/><hr/>Poped element is:" + [Link]());
[Link]("<br/><hr/>After push operation array elements are:" + myarr);
[Link]("<br/><hr/>Shifter element is:" + [Link]());
[Link]("Guava");
[Link]("<br/><hr/>After unshift operation array elements are:" + myarr);
[Link]("<br/><hr/>After slice operation array elements are:" + [Link](2,5));
[Link]("<br/><hr/>After join operation array elements are:" + [Link](">>"));
[Link]("<br/><hr/>After reverse operation array elements are:" +
[Link]());
[Link]("<br/><hr/>After sort operation array elements are:" + [Link]());
</script>
</body>
</html>
OUTPUT
PART A PROGRAMS
A-1) Program to find sum of n natural numbers.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Sum of Natural Number</title>
<script type="text/javascript">
function natural()
{
var n=parseInt([Link]("Enter n value"));
var sum=(n*(n+1))/2;
[Link]("Sum of first "+n+" natural number is:"+sum);
}
</script>
</head>
<body>
<h1>Sum of N natural numbers</h1>
<form>
<input type="button" value="FIND SUM" onClick="natural()"/>
</form>
</body>
</html>
OUTPUT
A-2) Javascript to count number of elements.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Number of Elements</title>
<script type="text/javascript">
function count()
{
[Link]("The number of elements are:"+[Link]);
}
</script>
</head>
<body>
<form name="myform">
Name:<input type="text"/><br/><br/>
Password:<input type="password"/><br/><br/>
Address:<textarea cols="J" rows="10"></textarea><br/><br/>
Gender:<input type="radio"/>Male
<input type="radio"/>Female<br/><br/>
Newsletters:<input type="checkbox"/><br/><br/>
<input type="button" value="Send Data" onClick="count()"/>
<br/>
</form>
</body>
</html>
OUTPUT
A-3) Javascript code to count number of empty elements
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Number of Elements</title>
<script type="text/javascript">
function validate()
{
var myarray=new Array();
for(var i=0;i<[Link];i++)
{
if([Link][i].[Link]==0)
[Link]([Link][i].name);
}
if([Link]!=0)
[Link]("The following text boxes are empty:\n"+myarray);
}
</script>
</head>
<body>
<form name="myform">
<pre>
Name:<input type="text" name="Name"/><br/>
Class:<input type="text" name="Class"/><br/>
Age:<input type="text" name="Age"/><br/>
<input type="submit" value="Send Message" onClick="validate()"/><br/>
</pre>
</form>
</body>
</html>
OUTPUT
A-4) Javascript code to evaluate the expression and display.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Evaluate</title>
<script type="text/javascript">
function math_evaluate()
{
var exp=[Link]("expr").value;
[Link]("result").value=eval(exp);
}
</script>
</head>
<body>
<form>
<pre>
<label>Enter any valid Expression:</label><input type="text" id="expr"/><br/>
<input type="button" value="Evaluate" onClick="math_evaluate()"/>
<br/>
<label>Result of expression:</label><input type="text" id="result"/>
<br/>
</pre>
</form>
</body>
</html>
OUTPUT
A-5) Javascript code to display current month, date and year.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<script type="text/javascript">
var days = ["", "First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eight",
"Nineth", "Tenth", "Eleven", "Twelth", "Thirteenth", "Fourteenth", "Fifteenth", "Sixteenth",
"Seventeenth", "Eighteenth", "Nineteenth", "Twentyeth", "Twentyone", "Twentysecond",
"Twentythird", "Twentyfourth", "Twentyfifth", "Twentysixth", "Twentyseveth",
"Twentyeight", "Twentynineth", "Thirtyeth", "Thirtyfirst"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December"];
var year = "Two Thousand Twenty";
var dateObj = new Date();
var currMonth = [Link]();
var currDate = [Link]();
var currYear = [Link]();
if (currYear == 2020) {
year = "2020"; // Changed the year to display properly in the alert message.
[Link]("Today's Date is " + days[currDate] + " " + months[currMonth] + " " +
year);
} else {
[Link]("Today's Date is " + days[currDate] + " " + months[currMonth] + " " +
currYear);
}
</script>
</head>
</html>
OUTPUT
A-6) Create a form for student information.
<!DOCTYPE html>
<html xmlns="[Link]
<head>
<script type="text/javascript">
function showresult()
{
var n = [Link]("name").value;
var cls = [Link]("class").value;
var mark1 = parseInt([Link]("sub1").value);
var mark2 = parseInt([Link]("sub2").value);
var mark3 = parseInt([Link]("sub3").value);
var total = mark1 + mark2 + mark3;
var avg = total / 3;
var grade, result;
if (avg >= 60)
{
grade = "A";
result = "First class";
}
else if (avg >= 50)
{
grade = "B";
result = "Second Class";
}
else if (avg >= 40)
{
grade = "C";
result = "Third class";
}
else
{
grade = "D";
result = "Fail";
}
[Link]("<pre><b><h2> Results </h2>");
[Link]("Name: " + n + "<br/><br/>");
[Link]("Class: " + cls + "<br/><br/>");
[Link]("Total Marks: " + total + "<br/><br/>");
[Link]("Average: " + avg + "<br/><br/>");
[Link]("Grade: " + grade + "<br/><br/>");
[Link]("Result: " + result + "<br/><br/> </b></pre>");
}
</script>
</head>
<body>
<form id="myForm">
<table border="1" cellspacing="0">
<tr><td> Name:</td><td><input type="text" id="name" /></td></tr>
<tr><td>Class:</td><td><input type="text" id="class"/></td></tr>
<tr><td>Subject mark1:</td><td><input type="text" id="sub1"/></td></tr>
<tr><td>Subject mark2:</td><td><input type="text" id="sub2"/></td></tr>
<tr><td>Subject mark3:</td><td><input type="text" id="sub3"/></td></tr>
<tr><td><input type="button" value="View Result" onclick="showresult()"/> </td></tr>
</table>
</form>
</body>
</html>
OUTPUT
A-7) Create a form for employee information.
<!DOCTYPE html>
<html xmlns="[Link]
<head>
<script type="text/javascript">
function calculate() {
var empname = [Link]("en").value;
var empid = [Link]("eid").value;
var basic = parseInt([Link]("eb").value);
var hra = basic * 0.4;
var da = basic * 0.6;
var gross = hra + da + basic;
var pf = gross * 0.13;
var tax = gross * 0.20;
var deduction = pf + tax;
var netsalary = gross - deduction;
[Link]("<pre> <b><h1>Employee Details</h1>");
[Link]("Employee name: " + empname + "<br/><br/><br/>");
[Link]("Employee id: " + empid + "<br/><br/><br/>");
[Link]("Basic salary: " + basic + "<br/><br/><br/>");
[Link]("HRA (40% of basic): " + hra + "<br/><br/><br/>");
[Link]("DA (60% of basic): " + da + "<br/><br/><br/>");
[Link]("Gross Salary: " + gross + "<br/><br/><br/>");
[Link]("PF (13% of gross): " + pf + "<br/><br/><br/>");
[Link]("Tax (20% of gross): " + tax + "<br/><br/><br/>");
[Link]("Deduction: " + deduction + "<br/><br/><br/>");
[Link]("Net salary: " + netsalary + "<br/><br/><br/></b></pre>");
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>Employee name:</td>
<td><input type="text" id="en" /></td>
</tr>
<tr>
<td>Employee Id:</td>
<td><input type="text" id="eid" /></td>
</tr>
<tr>
<td>Basic Pay:</td>
<td><input type="text" id="eb" /></td>
</tr>
<tr>
<td><input type="button" value="SHOW SALARY" onclick="calculate()" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT
A-8) Create a page with dynamic effect.
<!DOCTYPE html>
<html xmlns="[Link]
<head>
<title>Basic Animated</title>
<style type="text/css">
#layer1 {position:absolute; top: 50px; left:50px; }
#layer2 {position:absolute; top:150px; left:150px;}
#layer3 {position:absolute; top: 250px; left:250px; }
</style>
<script type="text/javascript">
function moveImage(layer) {
var top = [Link]("Enter top value");
var left = [Link]("Enter left value");
[Link](layer).[Link] = top + 'px';
[Link](layer).[Link] = left + 'px';
}
</script>
</head>
<body>
<div id="layer1"><img src="C:\HTMLPROGRAMS\pics\[Link]" width="100"
height="100" onclick="moveImage('layer1')" alt="My Image" /></div>
<div id="layer2"><img src="C:\HTMLPROGRAMS\pics\[Link]" width="100"
height="100" onclick="moveImage('layer2')" alt="My Image" /></div>
<div id="layer3"><img src="C:\HTMLPROGRAMS\pics\[Link]" width="100"
height="100" onclick="moveImage('layer3')" alt="My Image"/></div>
</body>
</html>
OUTPUT
A-9) Create a webpage using two image files switches between one another.
<!DOCTYPE html>
<html xmlns="[Link]
<head>
<title>Count</title>
<style type="text/css">
#image1 { position:absolute; top: 50px; left: 50px; border: thin; visibility: visible; }
#image2 { position:absolute; top: 50px; left: 50px; border: thin; visibility: hidden; }
</style>
<script type="text/javascript">
function change() {
var img1 = [Link]("image1").style;
var img2 = [Link]("image2").style;
if ([Link] == "visible") {
[Link] = "hidden";
[Link] = "visible";
}
else {
[Link] = "visible";
[Link] = "hidden";
}
}
</script>
</head>
<body>
<form>
<img src="C:\HTMLPROGRAMS\pics\[Link]" width="300" height="300" id="image1"
onmouseover="change()" onmouseout="change()" />
</form>
<img src="C:\HTMLPROGRAMS\pics\[Link]" width="300" height="300" id="image2"
onmouseover="change()" onmouseout="change()" />
</body>
</html>
OUTPUT
A-10) Create a form to display menu.
<!DOCTYPE html>
<html xmlns="[Link]
<head>
<title>Restaurant Details</title>
<script type="text/javascript">
function Findcost() {
var major = [Link]("major1");
var starters = [Link]("starters1");
var soft = [Link]("softl");
var selectedItem = "Items\t\t\tprice\n-------\n";
var totalcost = 0;
for (var i = 0; i < [Link]; i++) {
var option = [Link][i];
if ([Link] == true) {
var price = parseInt([Link]);
totalcost += price;
selectedItem += [Link] + "\t\t" + price + "\n";
}
}
for (var i = 0; i < [Link]; i++) {
var option = [Link][i];
if ([Link] == true) {
var price = parseInt([Link]);
totalcost += price;
selectedItem += [Link] + "\t\t" + price + "\n";
}
}
var softdrinkIndex = [Link];
if (softdrinkIndex !== -1) {
var selectedsoftdrink = [Link][softdrinkIndex].text;
var price = parseInt([Link][softdrinkIndex].value);
totalcost += price;
selectedItem += selectedsoftdrink + "\t\t\t" + price + "\n";
}
selectedItem += "\n\nTotal cost \t\t" + totalcost;
[Link]("Ordereditems").value = selectedItem;
}
</script>
</head>
<body>
<form name="menuform">
<table border="10">
<tr>
<th colspan="2" align="center">
<h2>Restaurant Menu Details</h2>
</th>
</tr>
<tr>
<td>Major Dishes:</td>
<td>
<select id="major1" size="3" multiple="multiple">
<option value="100">Vegetable Pulav</option>
<option value="150">Hyderabad Biryani</option>
<option value="50">Roti With Curry</option>
</select>
</td>
</tr>
<tr>
<td>Starters:</td>
<td>
<select id="starters1" size="3" multiple="multiple">
<option value="80">Gobi Manchurian</option>
<option value="40">Veg Clear Soup</option>
<option value="30">Masala Papad</option>
</select>
</td>
</tr>
<tr>
<td>Soft Drink:</td>
<td>
<select id="softl" size="3">
<option value="20">Pepsi</option>
<option value="20">Coke</option>
<option value="30">Lime Soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<textarea id="Ordereditems" rows="10" cols="50"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="FindTotalCost" onclick="Findcost()" />
</td>
<td>
<input type="reset" value="Clear" />
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT