Part I: Dynamic HTML

• First, add a new form to the web page with one element, a drop-down select box. The select element will have two options: one that allows the user to fill out a help request form, and one that allows the user to fill out a general feedback form. Based on the user's selection, it will then use an event handler and the W3C DOM to dynamically display the appropriate form and relevant instructions. The selected form will be submitted to the same Form to Email Script we used in the previous module which will generate the appropriate email.
• The new select box will need to use an event handler to call a JavaScript function that will display either the feedback form or the help request form. The JavaScript function can work in several different ways.
  • One possibility would be to dynamically write the HTML5 code for the chosen form into an existing block element via the "innerhtml" property.
  • Another choice might be to have multiple hidden block elements in your page's body section, one containing the feedback form and the other the help form, and the JavaScript function would then just reveal the chosen form.
  • There are other possibilities as well. However, you should avoid using pop-up windows to display the chosen form, and instead use JavaScript to dynamically display content within the existing page. Any other approach is acceptable, provided the forms are not initially visible when the user first comes to the page, the JavaScript display function reveals the appropriate form, and you account for what happens if the user changes his mind and selects one form first then changes to the other. You should not rely on the browsers back button to solve this requirement.
• You will also need two forms where the user can enter his or her information.
  • The first form is a feedback form, which can basically be the same form you used in the previous assignment.
  • The second form is a new form that will be used to send a user's "help request" to the designated email addresses.
    • The help request form will be very similar to the feedback form. It should include almost all of the same fields, but instead of a radio button for rating the site, it should include check boxes that let the user specify whether he would prefer to be contacted by email or telephone (or both if either is acceptable).

Part II: Form Validation

Once your Dynamic HTML is finished and your page allows the user to select which form to display, the next portion of the assignment is to add some user data validation. You will use JavaScript to check the information the user enters to make sure it is valid before it gets submitted to the server and sent as an email.

• You will need to add additional JavaScript functions to your page that will make sure all required information is available when the user submits the chosen form.
  • Your JavaScript functions should only submit the form if all the required data is filled in and valid.
  • If any required information is missing, or determined to be invalid, then your JavaScript functions should provide appropriate feedback to the user with instructions on what needs to be corrected.
• You will need to modify your feedback form and help request form to show the user which fields are required.
  • In the feedback form, at least the text area must be required. However, in the help request form, the name field, text area and check box fields should be required.
  • In addition, if the user checks the box indicating that he would prefer to be contacted by email or telephone, you will need to make sure the appropriate fields (email address or telephone number) are treated as required, and that the email address is in a valid format.
• You should validate your page using the W3C Markup Validation Service.
  • The validator will check your page for conformance to the appropriate specification that you are using.
  • Fix any non-compliant code, and once the page is valid, take a screenshot of your validation.