Forms and JavaScript

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 • Download pizza.html from: http://www.cs.umb.edu/~sbaraty/cs105 • You can find the link to pizza.html under announcements section (Last announcement, dated 04/13/2008) • Download the slice.jpg image file to desktop. • Save it under Desktop as pizza.html. • Open the source file and see the JavaScript function orderPizza() I have written within <SCRIPT> and </SCRIPT> tags. • We are going to use this JavaScript function.

7. Step 2 • Make the slice.jpg image the background of your page by adding BACKGROUND attribute to the BODY element. • Add the line “CS105 Pizzeria” as a H1 header center aligned. • Save the file and see the result with a web browser.

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

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

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):

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

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!