1. Forms and JavaScript CS105

2. Introduction We want to write an html page for a Pizza shop for getting order from customers online.

3. 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.

4. 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)

5. 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.

6. Step 1:Downlaoding the file 1.Download pizza.html from: http://www.cs.umb.edu/~sbaraty/cs105 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 and tags. 6.We are going to use this JavaScript function.

7. 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.

8. Step 3 Specify an area for having Form elements within using tag. Name the FORM as “order” (Make sure you are calling it exactly “order” ). Define a table within the Form element ( ). Define a row within the table ( ). Define two data cells within the row ( ). 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.

9. Step 4 Add another row for the table with two data cells. Define two drop down menus each inside a data cell ( ). Name the first menu exactly as “style”. Name the second menu exactly as “size”. The options ( ) 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.

10. 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.

11. 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): NAMEVALUE t1Pepperoni t2Black Olives t3Meat ball t4Sausage

12. Step 7 Add another yet another row an a single data cell Add a button to the data cell ( ) with exact name “order” (NAME attribute) and some value (VALUE attribute). Save and see the result using a browser.

13. 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!