Hello, I need help with my HTML and JavaScript. The code works perfectly on my L

Q: Hello, I need help with my HTML and JavaScript. The code works perfectly on my L

Hi, Please run it in webserver , if you are not running it in webserver. cookies wont be set and u will not get he values

ID: 3747886 • Letter: H

Question

Hello, I need help with my HTML and JavaScript. The code works perfectly on my LocalHost, but when I upload the code to my website, the registration form doesn't work as intended. Can you please find out where my mistake is or make the correction to my code so that it will work on my website? Below are screenshots of how the information is entered and the issue is with the last page, confirm.html. Confirm.html is supposed to display all the previous information that has been entered.

Below is the issue - The screen below needs to display all of the previous information. It works on my Localhost but won't work on my website.

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

/*querynames should be same.*/

var uid = getQuerystring('userName');

var fName = getQuerystring('firstName');

var lName = getQuerystring('lastName');

var pass = getQuerystring('password');

var email = decodeURIComponent(getQuerystring('email'));

var phone = getQuerystring('phoneNumber');

var signUp = getQuerystring('signUpNewsletter');

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,

comment: document.myForm.comment.value,

referredBy: document.myForm.referredBy.value,

};

//conditions for checkbox values.

if(document.myForm.interests[0].checked && document.myForm.interests[1].checked && document.myForm.interests[2].checked)

{

interests=document.myForm.interests[0].value+" "+document.myForm.interests[1].value+" "+document.myForm.interests[2].value;

} else if(document.myForm.interests[0].checked && document.myForm.interests[1].checked)

{

interests=document.myForm.interests[0].value+" "+document.myForm.interests[1].value;

} else if(document.myForm.interests[1].checked && document.myForm.interests[2].checked)

{

interests=document.myForm.interests[1].value+" "+document.myForm.interests[2].value;

}else if(document.myForm.interests[2].checked && document.myForm.interests[0].checked)

{

interests=document.myForm.interests[2].value+" "+document.myForm.interests[0].value;

} else if(document.myForm.interests[0].checked)

{

interests=document.myForm.interests[0].value;

}else if(document.myForm.interests[1].checked)

{

interests=document.myForm.interests[1].value;

}else if(document.myForm.interests[2].checked)

{

interests=document.myForm.interests[2].value;

} else{

interests='';

}

var dataString = "uid=" + data.uid + ",fName=" + data.fName + ",lName=" + data.lName + ",pass=" + data.pass +",email=" + data.email + ",phone=" + data.phone + ",signUp=" + data.signUp + ",interests=" + 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) {
console.log(document.cookie);
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.interests;

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 confirm.html ,but I can't get them to display properly on the last page

Test Password Verify your Password First Name Debbie Last Name Andrews Email D.Andrews@gmail.com 1234567890] Sign up for newsletter (e) Yes O No Next step

Explanation / Answer

Hi,

Please run it in webserver , if you are not running it in webserver. cookies wont be set and u will not get he values

Navigate

Hello, I need help with my HTML and JavaScript. The code works perfectly on my L

Hello, I need help with my JAVA homework! Thanks This assignment asks you to cre

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

Hello, I need help with my HTML and JavaScript. The code works perfectly on my L

Question

Explanation / Answer

Related Questions

Navigate