CIS154 - Assignment #5 INSTRUCTIONS: You will be creating a page that will validate a form and store the form values into a cookie file. The values saved into a cookie file will then be displayed on...

CIS154 - Assignment #5

INSTRUCTIONS:
You will be creating a page that will validate a form and store the form values into a cookie file. The values saved into a cookie file will then be displayed on another page. You may use traditional JavaScript like we did in the class demo, or you may use jQuery if you'd like .
YOU WILL NEED TO CREATE A MINIMUM OF THE FOLLOWING:

1. A text box that asks for the viewer's name




• You must create a validation on this text box to ensure that it's
  not empty
  and that the information entered
  only consists of letters.




2. A text box that asks for a number




• You must create a validation on this box to ensure that it's
  not empty
  AND that
  only a number
  has been entered (no characters or symbols!).




• I recommend that you use the \D metacharacter to rule out characters/symbols other than numbers.






3. A text box requesting the viewer to input something starting with a certain letter(s) OR ending with a certain letter(s) (see the two text boxes on my sample page... one of which requests the user to input a verb ending in ing and the other which requests the user to input something starting with the letter B. I created two text boxes for this requirement, but you are only required to create one.)
   




• You must create a validation on this text box to ensure that it's
  not empty
  AND that the text
  ends OR begins with the letters of your choice.




• You can use the substring method for this and you may also have to use the length property. Or you can instead use the appropriate metacharacter to achieve this (I'll let you search for it on the expressions handout).






4. Radio buttons OR a selection menu. This will be used to eventually display an image on your other page as well as display the name relating to the image. For example, if I wanted to display an image with the name of scotland.gif, I would also want to display the word Scotland. The easiest way to do this is to create two variables. One variable will hold the value of the radio button/selection menu option, and the other variable will hold the value plus the concatenated .gif or .jpg extension.




• You will need to have a minimum of four options for the radio buttons or the selection menu.


• You must create a validation to make sure that
  something has been selected.

• 
  When you click the submit button, the form check will be done at that time (this is where you do the series of if statements that gather the values of the form elements and checks to see if what was entered is correct).


• If the viewer does not properly enter the requested information, you must use red text (like I showed you in the class demo) next to the form element where the error is located to let the viewer know that a correction is needed.


• Once a correction has been submitted, the red text needs to disappear (just like we did in the class demo)


• 
  Once the form checks out okay, you will need to call a function (at the bottom of the form check function like we did in class) that will run code the that creates the cookie information. When this cookie making function runs, the items entered/selected in the form will be saved into a cookie file and window.location will be used to go to another page that will read the values back from the cookie file and display them on that page. DO NOT USE window.open()!!!!!
  ***Remember, you will ultimately have five different values that will need to be saved into the cookie file, read from the cookie file, and then displayed on a separate page
  
  
  
  • To summarize, the five things that will be saved into the cookie file and displayed on the separate page are: The persons name (see #1 above), a number (see #2 above), another value that starts or ends with certain letters of your choice (see #3 above), an image (see #4 above), and text that relates to the image (see #4 on this page).
  
  
  
  

***For 5 points extra credit, place a function on the main page (the form page) that checks to see if cookie information has already been saved and if it has, display some text that indicates that the user has already entered information from a previous session. For example, if you enter information at my example page and click the submit button, then later on you go back to my main page, you will see some text at the top that says "You have already won a prize! Click here to view your prize." This is extra credit and you may not ask me for help with this.

NOTE:
The Expressions Handout over in the Canvas class handouts module, the strings demo, and the form checking/cookie demo will help with this assignment.

Assignment Example:
You will find an example of this assignment at
http://staffwww.fullcoll.edu/bterry/cis154/assignmentExamples/cis154a5/cis154a5.html

File Name and Submission:
Please save the main file with the form elements/form checking as a5.htm. You can save the other page with whatever name you'd like.

Please submit the following files to the assignment #5 submission box over at Canvas:

• The a5.htm document


• The html document that displays the information from the cookie file.


• All images used


• The external .js file that contains the code for the hyperlink rollovers.


• Any other external .js files or external .css files used for this assignment

Please .zip all the files listed above into ONE .zip archive. This is a requirement!! If you do not .zip your files down, there will be an automatic 5 point deduction. If you do not include all files as listed above, point deductions will vary depending on which file(s) you failed to include.

THERE WILL BE NO LATE ASSIGNMENTS ACCEPTED AFTER THE GRACE DATE. THERE ARE NO EXCEPTIONS TO THIS!!!