WBG310 Week 1 Lab Interactive Web Page Scripting with Lab

WBG310 Week 1 Lab Interactive Web Page Scripting with Lab

Scenario/Summary
Apply skills learned in the tutorials to a real-world form specification. Create a form and validate the input, reporting errors and feedback directly to the web page.

Deliverables
Zip all files into one folder titled W1_Lab1_YourName.zip. When you are done, submit your assignment.

STEP 1: Create a Simple Form
1. Download the template file here: jsTemplate.zip
2. Unzip the jsTemplate.html file and save the file as w1_Lab1.html.
3. Within the form tags already coded in the template HTML file, create two text boxes, two buttons, and a radio button group (view Figure 1 for layout). Make sure the textboxes and radio buttons are labeled according to Figure 1.
4. Use the “name” attribute for all instances of the radio group set to: “skilltype.”
5. Use input type of button for the Submit button NOT input type submit.
6. Use input type reset for the clear form button.
Figure 1: Using the Form Section of the Template

STEP 2: Create a Validation Function
1. Create a JavaScript function that will collect the information from the form and verify that it is the correct type and that there are no blank textboxes. Save and test the file to ensure that the textbox information is collected and the script is working correctly. Use the onclick event within the submit button tag to call this function.
2. Output validation error messages by writing directly to the <div> with the id of “results.” (You may want to use Alert boxes for testing at first.)
3. Create a loop within the above function that collects the checked value of the radio button group. Once the value from the radio group is collected, create a function to pass the value for evaluation and return a message for the user based on his or her selected skill type using the <div> with the id of “more.”

STEP 3: Save and Test
1. Save the file.
2. View the page in a browser and test the program. A sample output looks like the following.
Figure 2: Series of Expected Results From Testing

STEP 4: Prep for Turn-In
1. When your application functions as expected, zip the file and submit your assignment.