Forms and JavaScript
CS105
Introduction
•
We want to write an html page for a Pizza
shop for getting order from customers online.
Introduction
•
We want to write an html page for a Pizza
shop for getting order from customers online.
•
So we need to use HTML form to get the data
from our customers.
Introduction
•
We want to write an html page for a Pizza shop
for getting order from customers online.
•
So we need to use HTML form to get the data
from our customers.
•
We need to get the following information from
them:
–
Name
–
Phone No.
–
Pizza Style
–
Pizza Size
–
Toppings (up to four toppings)
Introduction
•
We want to write an html page for a Pizza shop for
getting order from customers online.
•
So we need to use HTML form to get the data from our
customers.
•
We need to get the following information from them:
–
Name
–
Phone No.
–
Pizza Style
–
Pizza Size
–
Toppings (up to four toppings)
•
Then we need to output a confirmation page with
provided data after the customer clicks the order
button using JavaScript (You don’t need to worry about
JavaScript implementation.)
•
Lets see the finished work together.
Step 1:Downlaoding the file
1.
Download pizza.html from:
http://www.cs.umb.edu/~sbaraty/cs105
2.
You can find the link to pizza.html under
announcements section (Last announcement,
dated 04/13/2008)
3.
Download the slice.jpg image file to desktop.
4.
Save it under Desktop as pizza.html.
5.
Open the source file and see the JavaScript
function
orderPizza
() I have written within
<SCRIPT> and </SCRIPT> tags.
6.
We are going to use this JavaScript function.
Step 2
1.
Make the slice.jpg image the background of
your page by adding BACKGROUND attribute
to the BODY element.
2.
Add the line “CS105 Pizzeria” as a H1 header
center aligned.
3.
Save the file and see the result with a web
browser.
Step 3
•
Specify an area for having Form elements within using
<FORM > tag. Name the FORM as “order” (Make sure
you are calling it exactly “order” ).
•
Define a table within the Form element (<TABLE>).
•
Define a row within the table (<TR>).
•
Define two data cells within the row (<TD>).
•
Define two Text Fields one inside each data cell.
•
Name the first text field exactly as “name”.
•
Name the second text field exactly as “
tel
”.
•
Save and see the result.
Step 4
•
Add another row for the table with two data cells.
•
Define two drop down menus each inside a data cell (<select …>).
•
Name the first menu exactly as “style”.
•
Name the second menu exactly as “size”.
•
The options (<OPTION …>) for the first menu should be:
–
Deep Dish
–
Tomato Pie
–
Thin Crust
–
Stuffed Crust
•
The options for the second menu should be:
–
Xtra Large
–
Large
–
Medium
–
Small
•
Note each option for each of the two menus should have VALUE attribute
with values exactly as specified above.
Step 5
•
Add the
Event Handler
attribute to each of the
two menus which correspond to any change
to the selection of the menus (ONCHANGE).
•
Use predefined JavaScript function
alert(message) as the actions corresponding
to these event handlers.
•
The alert message for size menu should be
“You have changed the size of your pizza!”
•
The alert message for style menu should be
“You have changed the style of your pizza!”
•
See the Result using a browser.
Step 6
•
Add another row and a data cell within to your
table.
•
Add four checkboxes inside the data cell one
for each toppings.
•
Here are the NAME and VALUE of each
checkbox (NAME and VALUE attributes):
NAME
VALUE
t1
Pepperoni
t2
Black Olives
t3
Meat ball
t4
Sausage
Step 7
•
Add another yet another row an a single data
cell
•
Add a button to the data cell (<INPUT …>)
with exact name “order” (NAME attribute)
and some value (VALUE attribute).
•
Save and see the result using a browser.
Step 8
•
Add an
Event Handler
attribute to order
button which corresponds to click event
(ONCLICK attribute).
•
The action of this event handler (the value of
this attribute) should be a call to the
JavaScript function orderPizza() defined at the
top of the file with no parameter.
•
Save the file and see the result. We are done!
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment