Hello, I am having trouble with this assignment in JavaScript. All of my HTML pa

ID: 3746310 • Letter: H

Question

Hello, I am having trouble with this assignment in JavaScript. All of my HTML pages work properly, but all the information does not display on the last HTML page. I have copied my current code for all the relevant HTML pages, my script, and my CSS file. If I could get some help correcting the code so that it displays all the information on the last page, that would be greatly appreciated!

Index.html ====================================================

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" async="" src="JS/gallery_script.js"></script>
</head>

<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers
<span class="dotcom">.org</span>
</a>
</div>
<nav>
<ul class="topnav">
<li>
<a href="index.html" class="active">Home</a>
</li>
<li>
<a href="invitation.html">Invitation</a>
</li>
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="bannerImages">
Banner Images
<br/>
<img src="images/banner1.jpg" alt="Banner" class="banner"/>
<img src="images/banner2.jpg" alt="Banner" class="banner"/>
<img src="images/banner3.jpg" alt="Banner" class="banner"/>
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>

</html>

Registration.html =============================================

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

</li>

<li><a href="invitation.html">Invitation</a>

</li>

<li><a href="volunteer.html">Volunteers</a>

</li>

<li><a href="gallery.html">Gallery</a>

</li>

<li><a href="registration.html" class="active">Registration</a>

</li>

</ul>

</nav>

</header>

<label for="userName">Username:</label>

<label for="Password">Password:</label>

<label for="passwordVerify">Verify your Password:</label>

<label for="firstName">First Name:</label>

<label for="email">Email:</label>

<label for="phoneNumber">Phone Number</label>

<label for="signUpNewsletter">Sign up for newsletter:</label>

<input type="radio" name="signUpNewsletter" value="Yes" checked> Yes

<input type="radio" name="signUpNewsletter" value="No"> No

</form>

</section>

<footer>This events site is for IT3215 tasks.

</footer>

</body>

</html>

Validate.JS ===========================================================

function validate(){

usernameFormat = "^[a-z A-Z0-9]+$"; //This will allow only lower and uppercase alphabets , space and number

nameFormat = "^[a-z A-Z]+$";// this will only allow lower and upper case characters and space

phonenoFormat = "^[1-9][0-9]{9}$";//This will allow only digits but first digit can not be 0 and rest can be between 0-9 and total should not be exceed 10

var username = document.getElementsByName('userName')[0].value;

var password = document.getElementsByName('password')[0].value;

var vpassword = document.getElementsByName('passwordVerify')[0].value;

var firstname = document.getElementsByName('firstName')[0].value;

var lastname = document.getElementsByName('lastName')[0].value;

var email = document.getElementsByName('email')[0].value;

var phoneNumber = document.getElementsByName('phoneNumber')[0].value;

var newsletter = document.getElementsByName('signUpNewsletter');

//If username is empty

if (username == "" ) {

document.getElementById('erroruserName').innerHTML = 'Username can't be empty.';

return false;

}

if(!username.match(usernameFormat) ){

document.getElementById('erroruserName').innerHTML = 'Invalid Username.';

return false;

}

//If password length is less than 8 or empty

if(password.length <8 || password==""){

document.getElementById('errorpassword').innerHTML = 'Password length should be atleast 8.';

return false;

}

//If confirm password length is less than 8 or empty

if(vpassword.length <8 || vpassword==""){

document.getElementById('errorpasswordVerify').innerHTML = 'Confirm Password length should be atleast 8.';

return false;

}

//If password and confirm password both are not same

if(vpassword != password){

document.getElementById('errorpasswordVerify').innerHTML = 'Confirm password should be same as Password.';

return false;

}

//If firstname is empty

if (firstname == '' ) {

document.getElementById('errorfirstName').innerHTML = 'First Name can't be empty.';

return false;

}

//If firstname does not match the name.

if(!firstname.match(nameFormat) ){

document.getElementById('errorfirstName').innerHTML = 'Invalid First Name.';

return false;

}

//If lastname is empty

if (lastname == '' ) {

document.getElementById('errorlastName').innerHTML = 'Last Name can't be empty.';

return false;

}

if(!lastname.match(nameFormat) ){

document.getElementById('errorlastName').innerHTML = 'Invalid Last Name.';

return false;

}

//If email field is empty

if (email == '' ) {

document.getElementById('erroremail').innerHTML = 'Email can't be empty.';

return false;

}

//If email does not contain @ anywhere

if (email.indexOf("@", 0) < 0)

{

document.getElementById('erroremail').innerHTML = 'Invalid Email format.';

return false;

}

//IF . is not present anywhere

if (email.indexOf(".", 0) < 0)

{

document.getElementById('erroremail').innerHTML = 'Invalid Email format.';

return false;

}

//If phone number is empty

if (phoneNumber == '' ) {

document.getElementById('errorphoneNumber').innerHTML = 'Phone Number can't be empty.';

return false;

}

if(!phoneNumber.match(phonenoFormat) ){

document.getElementById('errorphoneNumber').innerHTML = 'Invalid Phone Number.';

return false;

}

//if either of the radio button is not clicked

if ( ( signUpNewsletter[0].checked == false ) && ( signUpNewsletter[1].checked == false ) ) {

document.getElementById('errorsignUpNewsletter').innerHTML = 'Invalid Phone Number.';

return false;

}

Interests.html =======================================================

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

function getQuerystring(key, default_)

{

if (default_==null) default_="";

key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");

var qs = regex.exec(window.location.href);

if(qs == null)

return default_;

else

return qs[1];

}

function fillForm(){

// CAPTURE QUERY STRING VALUES

var uid = getQuerystring('Username');

var fName = getQuerystring('FName');

var lName = getQuerystring('LName');

var pass = getQuerystring('Pass');

var email = getQuerystring('Email');

var phone = getQuerystring('Phone');

var signUp = getQuerystring('SignUp');

if(signUp == "Yes")

{

document.getElementById('signUpNewsletterYes').checked = true;

}

else

{

document.getElementById('signUpNewsletterNo').checked = true;

}

document.myForm.userName.value = uid;

document.myForm.firstName.value = fName;

document.myForm.lastName.value = lName;

document.myForm.password.value = pass;

document.myForm.email.value = email;

document.myForm.phoneNumber.value = phone;

document.myForm.signUpNewsletter.value = signUp;

}

function setCookie(name,value,days) {

var expires = "";

if (days) {

var date = new Date();

date.setTime(date.getTime() + (days*24*60*60*1000));

expires = "; expires=" + date.toUTCString();

}

document.cookie = name + "=" + (value || "") + expires + "; path=/";

}

function saveAndRedirect()

{

var 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: document.myForm.interests.value,

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 + "";

setCookie("saveRegData", dataString, 1);

window.location.href = "confirm.html"

return false;

}

</script>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

<li>

</li>

<li>

<a href="invitation.html">Invitation</a>

</li>

<li>

<a href="gallery.html">Gallery</a>

</li>

<li>

<a href="registration.html" class="active">Registration</a>

</li>

</ul>

</nav>

</header>

<legend>Choose your interests</legend>

<div>

<label for="technology">Technology</label>

</div>

<div>

<label for="music">Music</label>

</div>

<div>

<label for="movies">Movies</label>

</div>

</fieldset>

<br />

</label>

<input id="signUpNewsletterYes" type="radio" name="signUpNewsletter" value="Yes" /> Yes

<input id="signUpNewsletterNo" type="radio" name="signUpNewsletter" value="No" /> No

Comments:

</label>

Referred by:

</label>

</form>

</section>

</body>

</html>

Confirm.HTML ==============================================================

<!DOCTYPE html>

<head>

<title>Invitation Page</title>

function getCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++) {

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function str_obj(str) {

str = str.split(', ');

var result = {};

for (var i = 0; i < str.length; i++) {

var cur = str[i].split('=');

result[cur[0]] = cur[1];

}

return result;

}

function fillForm(){

var regData = getCookie('saveRegData');

var obj = {};

if (regData) {

var regSplitStr = regData.split(",");

for (var i = 0; i < regSplitStr.length; ++i) {

var tmp = regSplitStr[i].split("=");

obj[tmp[0]] = tmp[1];

}

document.getElementsByName("userName")[0].innerText = obj.uid;

document.getElementsByName("firstName")[0].innerText = obj.fName;

document.getElementsByName("lastName")[0].innerText = obj.lName;

document.getElementsByName("password")[0].innerText = obj.pass;

document.getElementsByName("email")[0].innerText = obj.email;

document.getElementsByName("phoneNumber")[0].innerText = obj.phone;

document.getElementsByName("signUpNewsletter")[0].innerText = obj.signUp;

document.getElementsByName("interests")[0].innerText = obj.interest;

document.getElementsByName("comment")[0].innerText = obj.comment;

document.getElementsByName("referredby")[0].innerText = obj.referredBy;

}

</script>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

<li>

</li>

<li>

<a href="invitation.html">Invitation</a>

</li>

<li>

<a href="gallery.html">Gallery</a>

</li>

<li>

<a href="registration.html" class="active">Registration</a>

</li>

</ul>

</nav>

</header>

User Name:

</label>

</label>

Password:

</label>

</label>

First Name:

</label>

</label>

Last Name:

</label>

</label>

Email:

</label>

</label>

Phone:

</label>

</label>

Signup for newsletter:

</label>

</label>

Interests:

</label>

</label>

Comment:

</label>

</label>

Referred By:

</label>

</label>

</form>

</section>

</body>

</html>

Confirmation.php

<?php

echo "You form is successfully submitted. Thank You for registration.";

The information that is entered on two pages must be displayed on the last page,but I can't get them to display properly on the last page.

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 folloinq .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 . 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

Explanation / Answer

I have made some changes to make your code work.

Changed the way you capture the query string values in Interests.html. Below is the modified code snippet.

// 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

Navigate

Hello, I am having trouble with the following questions: Question 13 0 out of 1

Hello, I am having trouble with this intro level program. I need the first solar

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Hello, I am having trouble with this assignment in JavaScript. All of my HTML pa

Question

Explanation / Answer

Related Questions

Navigate