Scribd
Upload
63 views

Java Script

The document describes how to build an HTML form to take pizza orders online using JavaScript. It provides step-by-step instructions to create a form with fields for customer name, phone number, pizza style, size, and up to four toppings. It also includes code for JavaScript functions that validate form selections and output a confirmation page with the submitted order details.

Uploaded by

Ema
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
63 views

Java Script

The document describes how to build an HTML form to take pizza orders online using JavaScript. It provides step-by-step instructions to create a form with fields for customer name, phone number, pizza style, size, and up to four toppings. It also includes code for JavaScript functions that validate form selections and output a confirmation page with the submitted order details.

Uploaded by

Ema
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 13

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 dont 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!

You might also like