Forms and JavaScript

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!