ITSE 1411 Beginning Web
Assignment 9

Reading:

JavaScript Text, Chapter 5 (Form elements and Validating Forms), pgs 237 - 239, 244 - 267

Sending From Data to Another Page

• FormProcessor
  • The action attribute can contain a URL or the name of a file located on a server. The author gives you a page FormProcessor.html that when used as the URL for the action of the form, receives and displays the form element names and values from the form that designates FormProcessor.html as the action URL.
  • Explanation for coding in FormProcessor.html will be covered in assignment 10.

Practice using More Elements and Validation of Values Entered by the User

• Create an assignment9 folder (no spaces in the name, no uppercase) in your public_html folder.
• subscription1 page
  • Open your subscription.htm page from your assignment6 folder in your editor.
  • Save as subscription1.htm in your assignment9 folder.
  • Add the coding on page 237 to use the isNaN function. (You used the isNaN function in your Gas Mileage page to verify that numerical values had been entered.)
  • Password input boxes are used the same as text boxes except the values entered are not displayed on the screen. Usually the user enters the password twice to ensure that a typo has not occured. Then the two values are compared to validate the same value has been entered both times.
    • Add the coding on page 238 to use the password box.
    • Add the coding on page 239 to confirm the password field.
    • Save the document.

Check Boxes Example and Practice

• Check Boxes
  • Click on checkboxExample.htm
  • View the source.
  • Save in your assignment9 folder in the public_html folder.
  • Open checkboxExamle.htm in LTS.
  • Resize this page on the left of your screen.
  • Resize the checkboxExample.htm page on the right of your screen.
  • Explanation of the check boxes on the checkboxExample.htm page
    • The intent of check boxes is to allow the user to select more than one choice.
    • You can group check boxes by giving each the same name value. But, you can also give each a different name.
    • The checked attribute for checkboxes is the same as the checked attribute for radio buttons.
• Check Box Practice
  • subscription2 page
    • If necessary, open subscription1.htm from your assignment9 folder in your editor.
    • Add the coding from page 245 - 246 of your JavaScript text.
    • Save the document as subscription2.htm.
    • Compare you page to figure 5-12 page 246..

  Using DOM to Copy Elements

  • You should not require the user to enter the same data rather ask them if the data is the same and copy it for them when it is.
  • subscription3 page
    • If necessary, open your subscription2.htm page in your editor.
    • Add the coding from pages 246 - 247 of your JavaScript text.
    • Save the document as subscription3.htm.

  Selection Lists

  • Selection lists give uses a list of options from which to choose. One advantage to using a selection list is the responses or limited and cannot be mis-keyed. The select element must be contained with a block-level element. You can control the number of options that are listed or a drop-down list or a combination of both.
  • subscription4 page
    • If necessary, open your subscription3.htm page in your editor.
    • Save as subscription4.htm in your assignment9 folder.
    • Add the coding from page 249 of the text. The option element is the menu option of the selection list.
    • Save the document.

Adding Options

• Adding Options to a Selection is not consistent among different browsers. Use it with care.

• subscription5 page
  • If necessary, open your subscription4.htm page in your editor.
  • Save as subscription5.htm in your assignment9 folder.
  • Add the coding from pages 253 - 254 of the text.
  • Save the document.

Removing Options

• A single opting can be removed from a selection list by using the index of that option. Remaining elements will be reordered. To remove all options, use the length property.

• subscription6 page
  • If necessary, open your subscription5.htm page in your editor.
  • Save as subscription6.htm in your assignment9 folder.
  • Add the coding from pages 254 - 255 of the text.
  • Save the document.

Changing Options

• To change an option in a list, assign a new value to the option.

• subscription7 page
  • If necessary, open your subscription6.htm page in your editor.
  • Save as subscription7.htm in your assignment9 folder.
  • Add the coding from pages 257 - 258 of the text.
  • Save the document.

Submitting and Resetting Forms

• The input type submit creates a submit button that is used with the form's action attribute. You may use the value attriute to indicate what is displayed on the button, or use the default "Submit Query". To use an image for the submit button create an input type image and include the src attribute to show the path of the image.

• subscription8 page
  • Click on FormProcessor.html
  • Right click on FormProcessor.html.
  • View Source.
  • Save as FormProcessor.html in your assignment9 folder.
  • If necessary, open your subscription7.htm page in your editor.
  • Save as subscription8.htm in your assignment9 folder.
  • Add the coding from pages 259 - 260 of the text.
  • Add the coding for the Reset Button on page 260 of the text.
  • Save the document.

Validation

• The onsubmit event handler (when used) is executed when the submit button is pressed. The onsubmit event handler is usually used to call a function to validate the values entered by the user before the page is submitted to the server or another page.

• subscription9 page
  • If necessary, open your subscription8.htm page in your editor.
  • Save as subscription9.htm in your assignment9 folder.
  • Add the coding from page 262 of the text.
  • Save the document.

Validating Text and Password Boxes

• subscription10 page
  • If necessary, open your subscription9.htm page in your editor.
  • Save as subscription10.htm in your assignment9 folder.
  • Add the coding from pages 263 - 264 of the text.
  • Save the document.

Validating Radio Buttons

• subscription11 page
  • If necessary, open your subscription10.htm page in your editor.
  • Save as subscription11.htm in your assignment9 folder.
  • Add the coding from pages 265 - 266 of the text.
  • Save the document.

Validating Selection Lists

• subscription12 page
  • If necessary, open your subscription11.htm page in your editor.
  • Save as subscription12.htm in your assignment9 folder.
  • Add the coding from page 267 of the text.
  • Save the document.

Submit Button

• 
  • You may use any submit image of your choice.
  • If you want this one, right click and save the image.
  • When you test your page by sending the form information to the FormProcessor.html page, you will see a value for x and y on the page. This value is actually the location of the mouse as it clicks on the Submit button. Just ignore it. We do not need that information.

Case Project

• Complete Case Project 5-3 found on pages 276 - 277 of your text.
  • Open your template.htm page.
  • Save as registration.htm in your assignment9 folder.
  • Follow the steps described in the text but start with the template so that you will have the validation icons on your page.

Update your index page:

• Add links on your index page to the pages in your assignment9 folder that are to be graded:
  • subscription12.htm
  • registration.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment9 folder with the files:
  • subscription12.htm
  • FormProcessor.html
  • registration.htm
  • your subscription image for your submit button

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.