Forms and JavaScript

phobicdrugInternet και Εφαρμογές Web

16 Φεβ 2014 (πριν από 3 χρόνια και 10 μήνες)

416 εμφανίσεις

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!