Design a Web page with suitable functionality to accept an order for fast food outlet. It must check if the user has entered a valid name & email-id. It must also calculate the value of the order.
<HTML>
<HEAD>
<TITLE>Donald Duck</TITLE>
<SCRIPT Language="JavaScript">
var m;
function chk_name()
{
if( document.form1.txt_name.value == "")
{
alert("Please enter your name");
document.form1.txt_name.focus();
}
}
function chk_email()
{
var str = document.form1.txt_email.value ;
var i; ... [3]n
if ( document.form1.txt_email.value == "")
{
alert("Please enter your Email-ID");
document.form1.txt_email.focus();
}
i = str.indexOf("@");
if ( i< 0)
{
alert ("Please enter a valid Email-Id");
}
}
function mainitem(F1)
{ var z=" ";
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
}
}
m=z;
}
if (F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
z=z+"\n"+y; F1.elements[3].value=z;
}
function cal(F1)
{ var d=0;
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
if (F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
s=new String(y);
var a=s.indexOf(">");
var b=s.substring(a+1,a+3);
c=parseInt(b);
d=d+c;
}
}
}
p="Total cost of the selected items="+d;
m=m+"\n"+p;
F1.elements[3].value=m;
}
function clr(F1)
{
F1.elements[3].value=" ";
}
</SCRIPT>
</HEAD>
<BODY>
<h2><font color="blue"><center> Welcome to the World renowned online Fast Food
Center </font>
<font color="red"> Donald Duck ! </center></font></h2>
<Form name="form1" ACTION = "mailto:[email protected]" METHOD = POST> Select the Menu Items of your choice and then click on the Total Cost to find the bill amount-
<BR><BR>
<Table >
<TR valign=top ><td> Major dishes :<BR>
<select name="s1" MULTIPLE onBlur="mainitem(this.form)">
<option value="Onion cheese capsicum Pizza->300" selected> Onion cheese capsicum Pizza
<option value="Onion mushroom Pizza->200"> Onion mushroom Pizza
<option value="Chicken Tikka Pizza->460"> Chicken Tikka Pizza
<option value="Cheese Pizza->150"> Cheese Pizza
</select>
<BR><BR></td>
<td> </td><td> </td>
<td>
Soups :<BR>
<select name="s2" MULTIPLE onBlur="mainitem(this.form)">
<option value="Tomato Soup->70"> Tomato Soup
<option value="Sweet corn Soup->80">Sweet corn Soup
<option value="Sweet n Sour soup->90">Sweet n Sour soup
<option value="Mixed veg soup->50">Mixed veg soup
</select>
<BR><BR></td>
<td> </td><td> </td>
<td>
Miscellaneous :<BR>
<select name="s3" onBlur="mainitem(this.form)">
<option value=" ">'Desserts'
<option value="Milkshakes->35">Milkshakes
<option value="Soft drinks->20">Soft drinks
<option value="Ice cream sodas->25">Softy
</select>
<BR><BR></td>
<td> </td><td> </td>
</TR>
</Table>
<Table>
<TR valign=top><td>
The items chosen form the Menu is following:
<TEXTAREA Name="TA1" Rows=10 Cols=50>
</TEXTAREA><BR><BR></td>
<td> </td><td> </td>
<td><BR>
<input type="button" Value="Total Cost" onClick="cal(this.form)">
<input type="button" Value="Clear" onClick="clr(this.form)">
</td>
</TR>
</Table>
<HR noshade>
<h2><font color="red"> Personal Details </center></font></h2>
<Table >
<TR valign=top ><td> Name:<BR>
<Input Type = "Text" Name = "txt_name" Onblur = "chk_name()">
<BR><BR></td>
<td> </td><td> </td>
<td>
Contact Address :<br>
<TEXTAREA Name="TA2" Rows=3 Cols=10>
</TEXTAREA>
<BR><BR></td>
<td> </td><td> </td>
<td>
Email :<BR>
<Input Type = "Text" Name = "txt_email" Onblur = "chk_email()">
<BR><BR></td>
<td> </td><td> </td>
</TR>
</Table>
<Table>
<TR valign=top ><td>
Phone :<BR>
<Input Type = "Text" Name = "txt_phone">
<BR><BR></td>
<td> </td><td> </td>
<td>
<BR>
<Input Type = "submit" Name = "btnsubmit" Value = " Submit ">
<BR><BR></td>
<td> </td><td> </td>
</TR>
</Table>
</Form>
</BODY>
</HTML>