Form Submission

Click to see live Form Submission!!

Form Submission using Javascript

The Form Submission features the following criteria;

1. On page load, the cursor appears in the "Name" field, ready for a user to type.
2. "Your job role" text field appears when user selects "Other" from the Job Role menu.
3. Until a theme is selected from the “Design” menu, no color options appear in the “Color” drop down and the “Color” field reads “Please select a T-shirt theme”.
4. When a new theme is selected from the "Design" menu, the "Color" field and drop down menu is updated.
5. “Color” drop down menu is hidden until a T-Shirt design is selected.
6. User cannot select two activities that are at the same time.
7. Total cost of selected activities is calculated and displayed below the list of activities.
8. The "Credit Card" payment option is selected by default.
9. Payment option in the select menu matches the payment option displayed on the page.
10. When a user chooses a payment option, the chosen payment section is revealed and the other payment sections are hidden.
11. Form cannot be submitted (the page does not refresh when the submit button is clicked) until the following requirements have been met:

• Name field isn’t blank.
• Email field contains validly formatted e-mail address: (doesn’t have to check that it's a real e-mail address).
• At least one checkbox under "Register for Activities" section must be selected.
• If "Credit Card" is the selected payment option, the three fields accept only numbers: a 13 to 16-digit credit card number, a 5-digit zip code, and 3-number CVV value.

12. On submission, the form provides an error indication or message for each field that requires validation:

• Name field
• Email field
• “Register for Activities” checkboxes
• Credit Card number, Zip code, and CVV, only if the credit card payment method is selected.

13. When JavaScript is disabled, all form fields and payment information is displayed, including the "Other" field under the "Job Role" section.