Question

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.

Answer 1

Answer:

Explanation:

// CAPTURE QUERY STRING VALUES

var urlParams = new URLSearchParams(location.search);

var uid = urlParams.get('userName');

var fName = urlParams.get('firstName');

var lName = urlParams.get('lastName');

var pass = urlParams.get('password');

var email = urlParams.get('email');

var phone = urlParams.get('phoneNumber');

var signUp = urlParams.get('signUpNewsletter');

=====================================

Modified the checkbox control into multiple control

<div>

<select id="interests" name="interests" multiple>

<option value="Technology">Technology</option>

<option value="Music">Music</option>

<option value="Movies">Movies</option>

</select>

</div>

==================================

Added a js function to read multiple input values

function getSelectValues(select) {

var result = [];

var options = select && select.options;

var opt;

for (var i=0, iLen=options.length; i<iLen; i++) {

opt = options[i];

if (opt.selected) {

result.push(opt.value || opt.text);

}

}

return result;

}

==============================

Below is how I create cookie object

ar data =

{

uid:document.myForm.userName.value,

fName: document.myForm.firstName.value,

lName: document.myForm.lastName.value,

pass: document.myForm.password.value,

email: document.myForm.email.value,

phone:document.myForm.phoneNumber.value,

signUp: document.myForm.signUpNewsletter.value,

interests: getSelectValues(document.myForm.interests).toString(),

comment: document.myForm.comment.value,

referredBy: document.myForm.referredBy.value,

};

var dataString = "uid=" + data.uid + ",fName=" + data.fName + ",lName=" + data.lName + ",pass=" + data.pass + ""+ +",email=" + data.email + ",phone=" + data.phone + ",signUp=" + data.signUp + ",interests=" + data.interests + "" + +",comment=" + data.comment + ",referredBy=" + data.referredBy + "";

===========

Make sure you write last line in single line