Form Validation using Javascript and PHP
Question
Here is my code, I am having difficulties validating. Please tell me what I am doing wrong. I have everything listed that is required for my assignment, but I cannot understand where I am messing up. When I complete the registration and go to the next step it is here where I have problems. After making my selections on the Interests page, I am supposed to be able to hit register and get a notification thanking me for registering, but nothing happens... no next page or error is given. I didn't know what information to provide, so I have given all of my HTML, javascript, and php files. Thank you for any help and guidance you can provide as I am a student and very new to Javascript.
Registration.html and Registration.js:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript">
function formValidation() {
// Make quick references to our fields.
var username = document.getElementById('userName');
var password = document.getElementById('password');
var passwordv = document.getElementById('passwordVerify');
var firstname = document.getElementById('firstName');
var lastname = document.getElementById('lastName');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var signup = document.getElementById('signUpNewsletter');
// To check empty form fields.
if (username.value.length == 0) {
document.getElementById('head').innerText = "* All fields are required
*"; // This segment displays the validation rule for all fields
username.focus();
return false;
}
// Check each input in the order that it appears in the form.
if (textAlphanumeric(username, "* For your username please use alphabets
and numbers only *")) {
if (lengthDefine(password, 8, 16 )) {
if (matchPass(password,passwordv,"* Passwords do not match! *" )) {
if (inputAlphabet(firstname, "* For your name please use alphabets only
*")) {
if (inputAlphabet2(lastname, "* For your name please use alphabets only
*")) {
if (emailValidation(email, "* Please enter a valid email address *")) {
if (textAlphanumeric(phone, "* Enter phone number in format (xxx)xxx-xxxx
*")) {
}
}
}
}
}
}
return false;
}
// Function that checks whether input text is numeric or not.
function textNumeric(inputtext, alertMsg) {
var numericExpression = /^[0-9]+$/;
if (inputtext.value.match(numericExpression)) {
return true;
} else {
document.getElementById('p6').innerText = alertMsg; // This segment
displays the validation rule for zip.
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or
not.
function inputAlphabet(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p3').innerText = alertMsg; // This segment
displays the validation rule for name.
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or
not.
function inputAlphabet2(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p4').innerText = alertMsg; // This segment
displays the validation rule for name.
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text includes alphabetic and
numeric characters.
function textAlphanumeric(inputtext, alertMsg) {
var alphaExp = /^[0-9a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p5').innerText = alertMsg; // This segment
displays the validation rule for address.
inputtext.focus();
return false;
}
}
// Function that checks whether the input characters are restricted
according to defined by user.
function lengthDefine(inputtext, min, max) {
var uInput = inputtext.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
document.getElementById('p1').innerText = "* Please enter between " + min
+ " and " + max + " characters *"; // This segment displays the
validation rule for username
inputtext.focus();
return false;
}
}
// Function that checks whether the 2 passwords are correct.
function matchPass(pass1,pass2, alertMsg) {
if (pass1.value === pass2.value) {
return true;
} else {
document.getElementById('p2').innerText = alertMsg; // This segment
displays the validation rule for username
pass2.focus();
return false;
}
}
// Function that checks whether an user entered valid email address or
not and displays alert message on wrong email address format.
function emailValidation(inputtext, alertMsg) {
var emailExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (inputtext.value.match(emailExp)) {
return true;
} else {
document.getElementById('p5').innerText = alertMsg; // This segment
displays the validation rule for email.
inputtext.focus();
return false;
}
}
// Function that checks whether an user entered valid phone number or not
and displays alert message on wrong phone address format.
function phoneValidation(inputtext, alertMsg) {
var phoneExp = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}
[0-9]{4}$/;
if (inputtext.value.match(phoneExp)) {
document.getElementById("regform").submit();
return true;
} else {
document.getElementById('p6').innerText = alertMsg; // This segment
displays the validation rule for email.
inputtext.focus();
return false;
}
}
}
</script>
<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="interests.html" id="regform" name="regform" >
<p id="head"></p>
<label for="userName">Username:</label>
<input type="text" name="userName" id="userName" placeholder="Enter your
Username" />
<p id="p1"></p>
<label for="Password">Password:
</label>
<input type="password" name="password" id="password" placeholder="Enter
your Password" />
<p id="p2"></p>
<label for="passwordVerify">Verify your Password:
</label>
<input type="password" name="passwordVerify" id="passwordVerify"
placeholder="Enter in your Password again" />
<p id="p3"></p>
<label for="firstName">First Name:
</label>
<input type="text" name="firstName" id="firstName" placeholder="Enter
your First Name" />
<p id="p4"></p>
<label for="lastName">Last Name:
</label>
<input type="text" name="lastName" id="lastName" placeholder="Enter your
Last Name" />
<p id="p5"></p>
<label for="email">Email:
</label>
<input type="text" name="email" id="email" placeholder="Enter your Email
Address" />
<p id="p6"></p>
<label for="phoneNumber">Phone Number
</label>
<input type="text" name="phone" id="phone" placeholder="Enter your Phone
Number" />
<p id="p7"></p>
<label for="signUpNewsletter">Sign up for newsletter:
</label>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="Yes" checked> Yes
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="No"> No
<input type="submit" value="Next step">
</form>
</section>
<!--<footer>This events site is for IT-FP3215 tasks.
</footer>-->
</body>
</html>
Interest.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Interests Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript" src="js/interest.js"></script>
<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="confirm.html" id="addform">
<input type="hidden" name="userName" id="userName" />
<input type="hidden" name="password" id="password" />
<input type="hidden" name="passwordVerify" id="passwordVerify" />
<input type="hidden" name="firstName" id="firstName" />
<input type="hidden" name="lastName" id="lastName" />
<input type="hidden" name="email" id="email" />
<input type="hidden" name="phone" id="phone" />
<input type="hidden" name="signUpNewsletter" id="signup" />
<label for="checkbox">Interests:
</label><br/>
<input type="checkbox" class="check1" id="check1" name="interests"
value="Swimming"> Swimming<br>
<input type="checkbox" name="interests" id="check2" class="check2"
value="Travelling"> Travelling <br>
<input type="checkbox" name="interests" id="check3" class="check3"
value="Reading"> Reading <br>
<label for="signUpNewsletter">Sign up for newsletter:
</label><br/>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="Yes" checked> Yes <br>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="No"> No<br>
<label for="comments">Comments:
</label><br/>
<textarea name="comments" id="comments" placeholder="Your Comments"
rows="10" cols="60"> </textarea><br>
<label for="referred">Referred by:
</label><br>
<input type="text" name="referred" id="referred" placeholder="Enter who
referred you" /><br>
<input type="button" value="Register" onclick="storeCookie()">
</form>
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Confirm.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Interests Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript" src="js/confirm.js"></script>
<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="pageFormContent">
Username: <p id="username">Placeholder</p>
Password: <p id="password">Placeholder</p>
First Name: <p id="firstName">Placeholder</p>
Last Name: <p id="lastName">Placeholder</p>
email: <p id="email">Placeholder</p>
Phone: <p id="phone">Placeholder</p>
Sign up News Letter: <p id="signup">Placeholder</p>
interest 1: <p id="username"></p>
Interest 2: <p id="username"></p>
Interest 3: <p id="username"></p>
Comments: <p id="phone">Placeholder</p>
<!--
Process content to display content on screen
-->
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
PHP:
<?php
echo "You form is successfully submitted. Thank you for registering.";
?>
Validation.js:
//a function which splits the url into the different variabls
window.onload= function(){
var params = {};
var param_array = window.location.href.split('?')[1].split('&');//split
the rul
for(var i in param_array){//save the parts in the arry
x = param_array[i].split('=');
params[x[0]] = x[1];
}
document.getElementById("userName").value = params.userName;//gets the
values of the username
document.getElementById("password").value = params.password;//gets
password value
document.getElementById("passwordVerify").value = params.passwordVerify;
document.getElementById("firstName").value = params.firstName;//first
name
document.getElementById("lastName").value = params.lastName;
document.getElementById("email").value = params.email;
document.getElementById("phone").value = params.phone;
document.getElementById("signup").value = params.signUpNewsletter;
}
function storeCookie(){
var username=document.getElementById("userName").value; //saves the
username in a variabe
document.cookie= "username=" + username; //saves the username variable in
a cookie
alert(document.cookie);
var password=document.getElementById("password").value; //saves the
password in a variable
document.cookie= "password=" + password; //saves the password varible in
a cookie
var fname=document.getElementById("firstName").value;//saves the first
name in a variable
document.cookie= "firstName=" + fname; //saves the firstname varible in a
cookie
var lname=document.getElementById("lastName").value ; //saves the last
name in a variable
document.cookie= "lastName=" + lname; //saves the lastnaem varible in a
cookie
var email=document.getElementById("email").value; //saves the email in a
variable
document.cookie= "email=" + email; //saves the email varible in a cookie
var phone=document.getElementById("phone").value ; //saves the phone in a
variable
document.cookie= "phone=" + phone;//saves the phone varible in a cookie
var signup=document.getElementById("signup").value; ////saves the sign up
value in a variable
document.cookie= "signUpNewsletter=" + signup;//saves the signup varible
in a cookie
var comments=document.getElementById("comments").value; //saves the
comments in a variable
document.cookie= "comments=" + comments; //saves the comments varible in
a cookie
var referred=document.getElementById("referred").value;//saves the
referred by value in a variable
document.cookie= "referred=" + referred; //saves the referred by varible
in a cookie
if(document.querySelector('.check1').checked){ //check if the checkbox is
checked if yes, it saves the value in cookie
var interest1=document.getElementById("check1").value;
document.cookie= "interest1=" + interest1;
}
if(document.querySelector('.check2').checked){ //check if the checkbox
is checked if yes, it saves the value in cookie
var interest2=document.getElementById("check2").value;
document.cookie= "interest2=" + interest2;
}
if(document.querySelector('.check3').checked){ //check if the checkbox
is checked if yes, it saves the value in cookie
var interest3=document.getElementById("check3").value;
document.cookie= "interest3=" + interest3;
}
document.getElementById("addform").submit();//submits the form
}
1 answers
solution1
1 2018-09-02 21:48:03
Found and solved problems:
registration.html:
- Added the correct
metatags inheadtags. - You must use overall the correct page name. I decided to use
interests.html(notinterest.html). So I changed theformtag to<form action="interests.html"...>. - I added
onsubmit="return formValidation();"to theformtag, so that your form can be validated. - Error at line 9:
"script" element between "head" and "body". I moved<script type="text/javascript">...</script>between theheadtags. - Duplicate ID "signUpNewsletter" at
<input type="radio" name="signUpNewsletter" id="signUpNewsletter". You MUST NOT have duplicate id's. So I changed to "signUpNewsletter1" and "signUpNewsletter2". - Errors raised on "broken" lines. I corrected all errors by putting the corresponding value and/or comment on ONE LINE.
interests.html:
- Added the correct
metatags inheadtags. - Added
<script type="text/javascript" src="js/validation.js"></script>into theheadtags, so that you can access the functions in "validation.js". Otherwise you would have received an error. - I renamed
<script src="js/interest.js" ...></script>to<script src="js/interests.js" ...></script>. - Error at line 8:
"script" element between "head" and "body". I moved<script type="text/javascript" src="js/interest.js"></script>between theheadtags. - Duplicate ID "signUpNewsletter" at
<input type="radio" name="signUpNewsletter" id="signUpNewsletter". You MUST NOT have duplicate id's. So I changed to "signUpNewsletter1" and "signUpNewsletter2". - Always close a js script with semicolon (";"). So I added one in
onclick="storeCookie();". - Errors raised on "broken" lines. I corrected all errors by putting the corresponding value and/or comment on ONE LINE.
confirm.html:
- Added the correct
metatags inheadtags. - Error at line 9:
"script" element between "head" and "body". I moved<script type="text/javascript" src="js/confirm.js"></script>between theheadtags. - Duplicate ID "username" at
interest 1: <p id="username"></p>. You MUST NOT have duplicate id's. So I changed to "interest1", "interest2" and "interest3". - Duplicate ID "phone" at
Comments: <p id="phone">Placeholder</p>. It should beComments: <p id="comments">Placeholder</p>, so I corrected it.
js/validation.js:
- Errors raised on "broken" lines. I corrected all errors by putting the corresponding value and/or comment on ONE LINE.
Recommendations:
- For avoiding a lot of errrors which I found in your code, you should start using a good IDE, which shows you were your code is error-prone and which can perfectly format your code. I personally use Netbeans 8.2 - choose to download the library for PHP (the 4th column in the download page). The newest version for PHP, eg version 9.0, will come on the market very soon (maybe in a couple of weeks). Note that the current released version 9.0 is only for java projects! So wait a bit further, until the new 9.0 library for PHP is released.
- In order to achieve your functionality, you should use php pages instead of html pages. So that you can process the submitted form data, or the url, by php code, not by js code.
- Whenever you run a page, open the "Console" or the "Inspector" from the corresponding "Development tools" menu of your browser. For example, in the Firefox browser, you can find "Console" and "Inspector" under the menu "Tools > Web Developer". With these tools you can see the eventual errors raised by your pages, or you can study the page structure. And many other cool things can be achieved with those tools.
Notes:
I did not change the text contents of your pages. I took just the proper steps to bring your code in a running, error-free state.
The pages (with the resolved codes):
All pages contain the working code. Just use them instead of yours.
registration.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript">
function formValidation() {
// Make quick references to our fields.
var username = document.getElementById('userName');
var password = document.getElementById('password');
var passwordv = document.getElementById('passwordVerify');
var firstname = document.getElementById('firstName');
var lastname = document.getElementById('lastName');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var signup = document.getElementById('signUpNewsletter');
// To check empty form fields.
if (username.value.length == 0) {
// This segment displays the validation rule for all fields
document.getElementById('head').innerText = "* All fields are required * ";
username.focus();
return false;
}
// Check each input in the order that it appears in the form.
if (textAlphanumeric(username, "* For your username please use alphabets and numbers only * ")) {
if (lengthDefine(password, 8, 16)) {
if (matchPass(password, passwordv, "* Passwords do not match! *")) {
if (inputAlphabet(firstname, "* For your name please use alphabets only * ")) {
if (inputAlphabet2(lastname, "* For your name please use alphabets only * ")) {
if (emailValidation(email, "* Please enter a valid email address *")) {
if (textAlphanumeric(phone, "* Enter phone number in format (xxx)xxx-xxxx * ")) {
return true;
}
}
}
}
}
}
}
return false;
}
// Function that checks whether input text is numeric or not.
function textNumeric(inputtext, alertMsg) {
var numericExpression = /^[0-9]+$/;
if (inputtext.value.match(numericExpression)) {
return true;
} else {
// This segment displays the validation rule for zip.
document.getElementById('p6').innerText = alertMsg;
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or not.
function inputAlphabet(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
// This segment displays the validation rule for name.
document.getElementById('p3').innerText = alertMsg;
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or not.
function inputAlphabet2(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
// This segment displays the validation rule for name.
document.getElementById('p4').innerText = alertMsg;
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text includes alphabetic and numeric characters.
function textAlphanumeric(inputtext, alertMsg) {
var alphaExp = /^[0-9a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
// This segment displays the validation rule for address.
document.getElementById('p5').innerText = alertMsg;
inputtext.focus();
return false;
}
}
// Function that checks whether the input characters are restricted according to defined by user.
function lengthDefine(inputtext, min, max) {
var uInput = inputtext.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
// This segment displays the validation rule for username.
document.getElementById('p1').innerText = "* Please enter between " + min
+ " and " + max + " characters *";
inputtext.focus();
return false;
}
}
// Function that checks whether the 2 passwords are correct.
function matchPass(pass1, pass2, alertMsg) {
if (pass1.value === pass2.value) {
return true;
} else {
// This segment displays the validation rule for username.
document.getElementById('p2').innerText = alertMsg;
pass2.focus();
return false;
}
}
// Function that checks whether an user entered valid email address or not and displays alert message on wrong email address format.
function emailValidation(inputtext, alertMsg) {
var emailExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (inputtext.value.match(emailExp)) {
return true;
} else {
// This segment displays the validation rule for email.
document.getElementById('p5').innerText = alertMsg;
inputtext.focus();
return false;
}
}
// Function that checks whether an user entered valid phone number or not and displays alert message on wrong phone address format.
function phoneValidation(inputtext, alertMsg) {
var phoneExp = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1} [0 - 9]{4}$ /;
if (inputtext.value.match(phoneExp)) {
document.getElementById("regform").submit();
return true;
} else {
// This segment displays the validation rule for email.
document.getElementById('p6').innerText = alertMsg;
inputtext.focus();
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 action="interests.html" id="regform" name="regform" onsubmit="return formValidation();">
<p id="head"></p>
<label for="userName">Username:</label>
<input type="text" name="userName" id="userName" placeholder="Enter your Username" />
<p id="p1"></p>
<label for="Password">Password:</label>
<input type="password" name="password" id="password" placeholder="Enter your Password" />
<p id="p2"></p>
<label for="passwordVerify">Verify your Password:</label>
<input type="password" name="passwordVerify" id="passwordVerify" placeholder="Enter in your Password again" />
<p id="p3"></p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" placeholder="Enter your First Name" />
<p id="p4"></p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" placeholder="Enter your Last Name" />
<p id="p5"></p>
<label for="email">Email:</label>
<input type="text" name="email" id="email" placeholder="Enter your Email Address" />
<p id="p6"></p>
<label for="phoneNumber">Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter your Phone Number" />
<p id="p7"></p>
<label for="signUpNewsletter">Sign up for newsletter:</label>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter1" value="Yes" checked> Yes
<input type="radio" name="signUpNewsletter" id="signUpNewsletter2" value="No"> No
<input type="submit" value="Next step">
</form>
</section>
<!--
<footer>
This events site is for IT-FP3215 tasks.
</footer>
-->
</body>
</html>
interests.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Interests Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/interests.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">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="confirm.html" id="addform">
<input type="hidden" name="userName" id="userName" />
<input type="hidden" name="password" id="password" />
<input type="hidden" name="passwordVerify" id="passwordVerify" />
<input type="hidden" name="firstName" id="firstName" />
<input type="hidden" name="lastName" id="lastName" />
<input type="hidden" name="email" id="email" />
<input type="hidden" name="phone" id="phone" />
<input type="hidden" name="signUpNewsletter" id="signup" />
<label for="checkbox">Interests:</label><br/>
<input type="checkbox" name="interests" id="check1" class="check1" value="Swimming"> Swimming<br>
<input type="checkbox" name="interests" id="check2" class="check2" value="Travelling"> Travelling <br>
<input type="checkbox" name="interests" id="check3" class="check3" value="Reading"> Reading <br>
<label for="signUpNewsletter">Sign up for newsletter:</label><br/>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter1" value="Yes" checked> Yes <br>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter2" value="No"> No<br>
<label for="comments">Comments:</label><br/>
<textarea name="comments" id="comments" placeholder="Your Comments" rows="10" cols="60"> </textarea><br>
<label for="referred">Referred by:</label><br>
<input type="text" name="referred" id="referred" placeholder="Enter who referred you" /><br>
<input type="button" value="Register" onclick="storeCookie();">
</form>
</section>
<footer>
This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
confirm.html:
If you want to get the values posted from the interests.html , then you should maybe import the js/validation.js into confirm.html too. It's up to you.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Interests Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/confirm.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">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="pageFormContent">
Username: <p id="username">Placeholder</p>
Password: <p id="password">Placeholder</p>
First Name: <p id="firstName">Placeholder</p>
Last Name: <p id="lastName">Placeholder</p>
email: <p id="email">Placeholder</p>
Phone: <p id="phone">Placeholder</p>
Sign up News Letter: <p id="signup">Placeholder</p>
interest 1: <p id="interest1"></p>
Interest 2: <p id="interest2"></p>
Interest 3: <p id="interest3"></p>
Comments: <p id="comments">Placeholder</p>
<!-- Process content to display content on screen -->
</section>
<footer>
This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
js/validation.js:
//a function which splits the url into the different variabls
window.onload = function () {
var params = {};
var param_array = window.location.href.split('?')[1].split('&'); //split the url
for (var i in param_array) {//save the parts in the array
x = param_array[i].split('=');
params[x[0]] = x[1];
}
document.getElementById("userName").value = params.userName;//gets the values of the username
document.getElementById("password").value = params.password;//gets password value
document.getElementById("passwordVerify").value = params.passwordVerify;
document.getElementById("firstName").value = params.firstName;//first name
document.getElementById("lastName").value = params.lastName;
document.getElementById("email").value = params.email;
document.getElementById("phone").value = params.phone;
document.getElementById("signup").value = params.signUpNewsletter;
};
function storeCookie() {
var username = document.getElementById("userName").value; //saves the username in a variabe
document.cookie = "username=" + username; //saves the username variable in a cookie
var password = document.getElementById("password").value; //saves the password in a variable
document.cookie = "password=" + password; //saves the password varible in a cookie
var fname = document.getElementById("firstName").value;//saves the first name in a variable
document.cookie = "firstName=" + fname; //saves the firstname varible in a cookie
var lname = document.getElementById("lastName").value; //saves the last name in a variable
document.cookie = "lastName=" + lname; //saves the lastnaem varible in a cookie
var email = document.getElementById("email").value; //saves the email in a variable
document.cookie = "email=" + email; //saves the email varible in a cookie
var phone = document.getElementById("phone").value; //saves the phone in a variable
document.cookie = "phone=" + phone;//saves the phone varible in a cookie
var signup = document.getElementById("signup").value; ////saves the sign up value in a variable
document.cookie = "signUpNewsletter=" + signup;//saves the signup varible in a cookie
var comments = document.getElementById("comments").value; //saves the comments in a variable
document.cookie = "comments=" + comments; //saves the comments varible in a cookie
var referred = document.getElementById("referred").value;//saves the referred by value in a variable
document.cookie = "referred=" + referred; //saves the referred by varible in a cookie
if (document.querySelector('.check1').checked) { //check if the checkbox is checked if yes, it saves the value in cookie
var interest1 = document.getElementById("check1").value;
document.cookie = "interest1=" + interest1;
}
if (document.querySelector('.check2').checked) { //check if the checkbox is checked if yes, it saves the value in cookie
var interest2 = document.getElementById("check2").value;
document.cookie = "interest2=" + interest2;
}
if (document.querySelector('.check3').checked) { //check if the checkbox is checked if yes, it saves the value in cookie
var interest3 = document.getElementById("check3").value;
document.cookie = "interest3=" + interest3;
}
document.getElementById("addform").submit();//submits the form
}
EDIT 1
Order of calling the pages:
The pages are made to be called in this way:
Load registration.html > Click on "Next step" button > Load interests.html > Click on "Register" button > Load confirm.html .
Project structure:
I can assure you that my codes are correct and tested. So, first, recheck the file names that you are using. They should be as presented in the file system structure below:
css
main.css
js
confirm.js
interests.js
validation.js
confirm.html
gallery.html
index.html
interests.html
invitation.html
registration.html
Activate cookies
In order to test the pages properly, you MUST clear the cookies (set by the code in js/validation.js ) before each test. So, in Firefox, go to the menu "History > Clear Recent History..." and set:
- Time range to clear : "Everything".
- Check Cookies and Cache .
Then click the button "Clear Now" .
Also, in order for the cookies to work, you have to set your browser to ACCEPT COOKIES . So, if you are using Firefox, follow these instructions . You should have these settings:
- Accept cookies and site data from websites (recommended) : checked.
- Keep until : . I would select "Firefox is closed".
- Accept third-party cookies and site data : "Always". Though "Never" is better, for testing your project set it to "Always".
And don't forget to check the "Console" and the "Inspector".
Although other things may prevent the pages from working, I hope the measures above will bring your project working.
EDIT 2
Problem found:
In the page registration.html , the formValidation() function was not returning true , even if all fields were valid. I changed the js script correspondingly now. Note that, earlier, all other functions resided in the formValidation() function. I brought them outside and changed the formValidation() so, that it works properly. Check registration.html again.
Note:
My tests were not taking into consideration how the validation function works, but only if the pages trigger the proper submits to the other pages without it. Then, in the end, I also tested if the function is triggered. When I saw that it's called properly, I stopped my tests. So it was my fault. I am sorry! Now I ran a complete test and it works. I hope it will work at your systems too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Login form validation using javascript and php
complete form validation using javascript,php
Using javascript for form validation in a PHP file
Form Validation using Javascript inside PHP
HTML Form validation using Javascript / PHP
Problem with register form using JavaScript validation and PHP
PHP/JavaScript form validation?
form validation with javascript to php
form validation in php and javascript
php form with javascript validation
Related Tags