Below is everthing that I have for the assignment. I am stuck with the form on interests.html and the associated interests.js file. My issue is that I cannot seem to assign the value pairs to my form fields after separating the query string. And then cookies/confirm.html

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. Directions: 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). 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). 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) 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. 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.

**registration.html**

CapellaVolunteers.org

• Home
• Invitation
• Gallery
• Registration

Username:

Password:

Verify your Password:

First Name:

Last Name:

Email:

Phone Number

Sign up for newsletter: Yes No

**interests.html**

Volunteer Interests Charity Events School Events Community Events

Comments:

Who were you referred by:

**interests.js**

*I get the pairs separated, just cannot get them assigned to the form input boxes*

// Retrieve the text of the query string let qString = location.search.slice(1); console.log(qString);

// Replace the encoded characters in the query string qString = qString.replace(/\+/g, " "); qString = decodeURIComponent(qString);

//split the pairs into separate array items let formData = qString.split(/&/g); for (let items of formData){ let fieldValuePair = items.split(/=/); let fieldName = fieldValuePair[0]; let fieldValue = fieldValuePair[1]; console.log(fieldName, fieldValue); document.getElementsByName(fieldName).value=fieldValue; }