Assessment Instructions
Overview
As Web forms get longer, we very commonly see them split across multiple pages to collect all of the necessary information. There are different reasons for this. A long form can be daunting for users and a large/long form can be difficult for users to fill out on a mobile device. These forms need to be designed so that the data entered by the user on the forms on each page will be submitted to the Web server simultaneously. This makes more sense as they are part of the same data set. The problem with stateless pages is that if the user moves from one page to the next, the data entered is lost. To bypass this issue, you will need to use query strings, hidden input fields, and cookies.
In this assessment you will use the previously created registration.html file to send information to a second page (interests.html) that has another form for the user to complete. You will write a script on that form that will save the information from both forms to a cookie and then display it on a third page.
Tips:
• It will help to output the array into the browser console so that you can verify that the string is being correctly parsed. Details on the browser console can be found in the Resources.
• To skip having to enter data into the form each time to test, it may help to create a JavaScript function that automatically fills in the fields for you and comment it out when completed.
Directions
Read the Overview.
Modify the “registration.html” page created in the prior assessment to send a query (that has all input field information from that form) to a second page (interests.html (created by you)). The information should be stored in hidden input fields (in the interests.html page) using the same field id/name. The interests page should ask the user to enter the following in optional fields:
• Interests (list at least three using a checkbox).
• Newsletter sign up (radio box with a yes/no option).
• Comments (free form text area).
• Referred by (text field).
When the user presses submit, all of the input fields from this form as well as the registration.html form will be saved into a cookie. The user should then be forwarded to a third page (confirm.html (created by you)) that will read the cookie information and display it in a name/value pair using JavaScript.
Make sure to do the following:
• Create and integrate a script on the registration.html page that stores the input field data into hidden fields to be used in the interests.html page once the submit button is pressed.
• Create an interests.html page with a form that has the fields listed above. This interests.html page will read in the input from the query string data from the registration.html page and store them into hidden input fields.
• Ace my homework – Write a script that runs in response to the submit event, from the interests.html page, that saves the input from both pages to a series of cookies to store each input, and opens a third page called confirm.html that reads and displays information from all the fields.
• Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error-free using the appropriate browser-specific development tool found in the Resources. Take a screen capture of each of your validation results and save it for submission.
Submission Requirements
• Upload your Web site files to your Web host.
• Submit your work in the courseroom using a single Zip file containing the following:
o Your entire Web site and all associated files.
o
Overview of Assessment Instructions
As web forms become longer, we frequently see them divided across numerous pages in order to collect all of the required data. This is due to a variety of factors. A long form might be intimidating for consumers, and filling out a large/long form on a mobile device can be problematic. These forms must be built in such a way that the data supplied by the user on each page’s forms is sent to the Web server at the same time. Because they are part of the same data collection, this makes more sense. The difficulty with stateless pages is that the data entered is lost as the user switches from one page to the next. You’ll need to use query strings, hidden input fields, and cookies to get around this problem.
In this evaluation, you’ll use the registration.html file to transfer data to a second page (interests.html), which contains a new form for the user to fill out. On that form, you’ll construct a script that saves the data from both forms to a cookie and then displays it on a third page.
Tips:
• Outputting the array into the browser console will allow you to check that the string is being processed correctly. The Resources section contains information on the browser console.
• To avoid having to manually enter data into the form each time you test it, build a JavaScript function that fills in the fields for you and comments it out once it’s done.
Directions
Read the Executive Homework help – Summary.
Modify the previous assessment’s “registration.html” page to send a query (including all input field information from that form) to a second page (interests.html (made by you)). The data should be saved using the same field id/name in hidden input fields (on the interests.html page). The user should be asked to fill out the following optional fields on the interests page:
• Hobbies and passions (list at least three using a checkbox).
• Sign up for the newsletter (radio box with yes/no option).
• Suggestions (free form text area).
• Recommendation (text field).
When the user submits this form, as well as the registration.html form, all of the input fields are kept in a cookie. After that, the user should be directed to a third page (confirm.html (made by you)) that will read the cookie information and display it as a name/value pair using JavaScript.
Make certain to take the following steps:
• Create and integrate a script on the registration.html page that saves input field data in hidden fields for usage on the interests.html page once the submit button is pushed.
• Make an interests.html page with the fields indicated above and a form. This interests.html page will take the data from the registration.html page’s query string and store it in hidden input fields.
• Create a script that runs in response to the submit event on the interests.html page, stores the input from both pages to a set of cookies, and creates a third page named confirm.html that reads and displays all of the fields’ content.
• Once you’ve finished, test your sites in each of the two Web browsers you chose to see if the content renders correctly and consistently in each. Then, using the relevant browser-specific development tool from the Resources, double-check that your code is error-free. Take a screenshot of each of your validation results and store it to your computer for further use.
Requirements for Submission
• Upload the files for your website to your web host.
• Use a single Zip file containing the following to submit your work in the courseroom:
o Your whole website, including all files related to it.
