Hello, I need help with my HTML and JavaScript. The code works perfectly on my L
ID: 3747759 • 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>
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>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript">
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>
<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">Home</a>
</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>
<section id="pageForm">
<form method="post" name="myForm">
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="interests" value="technology">
<label for="technology">Technology</label>
</div>
<div>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
</div>
<div>
<input type="checkbox" id="movies" name="interests" value="movies">
<label for="movies">Movies</label>
</div>
</fieldset>
<br />
<label for="signUpNewsletter">
Sign up for newsletter:
</label>
<input id="signUpNewsletterYes" type="radio" name="signUpNewsletter" value="Yes" /> Yes
<input id="signUpNewsletterNo" type="radio" name="signUpNewsletter" value="No" /> No
<br /><br />
<label for="comment">
Comments:
</label>
<textarea type="text" name="comment" placeholder="Enter your comment here..."></textarea>
<label for="referredBy">
Referred by:
</label>
<input type="text" name="referredBy" placeholder="Referred By" />
<input type="submit" value="Next step">
<input type="hidden" name="userName"/>
<input type="hidden" name="password"/>
<input type="hidden" name="firstName"/>
<input type="hidden" name="lastName"/>
<input type="hidden" name="email"/>
<input type="hidden" name="phoneNumber"/>
</form>
</section>
</body>
</html>
Confirm.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">
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>
<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">Home</a>
</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>
<section id="pageForm">
<form action="confirmation.php" method="post" name="myForm">
<label for="userName">
User Name:
</label>
<label name="userName">
</label>
<br/><br />
<label for="password">
Password:
</label>
<label name="password">
</label>
<br /><br />
<label for="firstName">
First Name:
</label>
<label name="firstName">
</label>
<br /><br />
<label for="lastName">
Last Name:
</label>
<label name="lastName">
</label>
<br /><br />
<label for="email">
Email:
</label>
<label name="email">
</label>
<br/><br />
<label for="phoneNumber">
Phone:
</label>
<label name="phoneNumber">
</label>
<br /><br />
<label for="signUpNewsletter">
Signup for newsletter:
</label>
<label name="signUpNewsletter">
</label>
<br /><br />
<label for="interests">
Interests:
</label>
<label name="interests">
</label>
<br /><br />
<label for="comment">
Comment:
</label>
<label name="comment">
</label>
<br /><br />
<label for="referredby">
Referred By:
</label>
<label name="referredby">
</label>
<br /><br />
<input type="submit" value="OK" />
</form>
</section>
</body>
</html>
Confirmation.php =====================================================================
<!-- confirmation.php will display the below message after successful validation -->
<?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 stepExplanation / Answer
SOlution:
You have not provided the registeration.hml so its hard to debug the program.
Please provide all the files in zip folder .
Or else I can help you over teamviewer remotely.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.