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!