Courses Home
JavaScript Home
Looping - Beer

Contional Operator Virus Alert!

Passing Variables to Functions

Image Swapping - Rollover Buttons

Buttons Page

Interactive Form

Lab Assignment

JavaScript Lab Assignment

Pet Supply Store Form

The assignment

1. Required Portion of Assignment

1. Ceate a web page with a registration form for an online Pet Supply Store.

• The page will have the form elements indicated below, with form field validation as indicated.
• If you plan to complete the Optional portion of the assignment related to this form (see See B.1 below), you may want to use the exact name values for your fields that are indicated below, and include the appropriate method and action attribute values. This will allow you to upload an instructor-provided perl script to the cgi-bin sub directory of your individual Web4Students site that will process your registration form and acknowledge it with a return web page.
• Use the following form tag value : form method="post" action="cgi-bin/pet_registration.pl".
• Fields and names (* indicates required fields)
  • First Name* (name="fname")
  • Last Name* (name="lname")
  • Email* (name="email") (validate for existance and appropriate location of @ and . )
  • Password* (name="pw") ( validate for >= 6 characters)
  • Password Confirmation* (name="pwc") (validate for >= 6 characters, exact match to initial Password)
  • Checkboxes for responses to a question (Do you have any pets?)
    • Birds (name="birds")
    • Cats (name="cats")
    • Dogs (name="dogs")
    • Fish (name="fish")
  • Submit and Reset
• Try to create your own form page. However, if you get stuck on the html code, work with the pre-created form (which does not include any of the validation), and insert the appropriate JavaScript code to achieve the indicated validation. (The alternative form and script will not be available until Monday, April 26.)
• Include as much validation as you can get to work. If you are unable to get your email or password validations to work, just include the validation for the name fields and post a second version of the form with all of your validation so I can see where you are getting stuck.

2. Create a web page that hyperlinks to a page that opens in a new window. Use the appropriate Javascript to assign the following characteristics to the new browser window and create content appropriate to the window size:

• a window 400 x 300 pixels, with left side 150 pixels in from left screen edge and top 50 pixels down from screen top
• do not display a location box or toolbar
• do include the menubar and scrollbars

2. Optional Portion of Assignment

1. Install the provided perlscript and cgi-lib.pl in the cgi-bin directory of your web4students site and configure the permissions on the scripts as indicated in the form processing instructions . Make sure the script is processing the registration form and generating the expected acknowledgement to the user.
   
2. Create a web page that includes a form with the following features:

• provides a list of 6 orderable items in a menu dropdown list (single selection)
• provides quantity ordering from 1 to 8 in a menu dropdown list (single selection)
• provides a 3-option radio button shipping choice that specifies a shipping price for each option
• provides a cost field that is filled when the order is submitted
• The JavaScript provides all of the processing necessary to manipulate the selected values and calculate a cost. The form does not actually get forwarded to a server for external script processing, so you can omit the action and post attributes of the form tag.

Saturday Lab

Lab hours: HU321 is open on Saturday morning, on the day of your lab from 9:30 to 12:30. Your lab instructor is a very competent lab tech who will be available for assistance during this time. This lab is not open to the general student body.

Check in with the lab instructor so that you will receive credit for attending. The Saturday lab is considered one of five (5) classes in the course and will count toward the certificate award.

There are 2 purposes for this lab. First, the lab provides an opportunity for completing the assignment or just having more hands-on practice on any of the material covered in the evening sessions, with a qualified technical person to help you through any rough spots. Second, the lab counts for 20% of the course, so attending the lab allows you to meet the 80% requirement for receipt of a course certificate even if you miss one of the evening classes.

With acknowledgement and gracious thanks to Instructor Reggie Moore, Montgomery College, who designed the lab materials and assignment.