Overview

As Web forms get longer, we very commonly see them split across multiple pages to collect all of the necessary information. There are different reasons for this. A long form can be daunting for users and a large/long form can be difficult for users to fill out on a mobile device. These forms need to be designed so that the data entered by the user on the forms on each page will be submitted to the Web server simultaneously. This makes more sense as they are part of the same data set. The problem with stateless pages is that if the user moves from one page to the next, the data entered is lost. To bypass this issue, you will need to use query strings, hidden input fields, and cookies.

In this assignment you will use the previously created registration.html file to send information to a second page named confirm.html. You will write a script on that page that will save the information from the form to a cookie and then display it on a same page. If the user goes back to this confirm.html page, the page should display the user form data from the registration entry that was last entered.

Tips:

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. When the user presses submit, all of the input fields from the registration.html form will be saved into a cookie. The user should then be forwarded to a second 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 following:

Create and integrate a script on the registration.html page passes all of the input fields from the form when the submit button is pressed.

Create a confirm.html page will read in the input from the query string data from the registration.html page and store them into variables first.

Write a script that runs in response to the submit event, that saves the input from the registration.html page to a series of cookies to store each input, and opens a second page called confirm.html that reads and displays information from all the fields.

##########REGISTRATION.HTML##########

CapellaVolunteers.org

• Home

• Invitation

• Volunteers

• Gallery

• Registration

Username:

Password:

Verify your Password:

First Name:

Last Name:

Email:

Phone Number

Sign up for newsletter:

Yes

No

This events site is for IT3515 tasks.

############CONFIRM.HTML############

CapellaVolunteers.org

• Home
• Invitation
• Volunteers
• Gallery
• Registration

Thanks your response has been recorded!

This events site is for IT3515 tasks.

###########MAIN.CSS#############

body {

font: 15px arial, sans-serif;

color: #808080;

}

input[type=text],

select ,input[type=password],radio{

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

input[type=submit] ,input[type=button]{

width: 100%;

background-color: #800D1E;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover ;input[type=button]:hover {

background-color: #802F1E;

}

section {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}

article {

border-radius: 5px;

background-color: #CCCCCC;

padding: 20px;

color: #222222;

}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.topnav li {

float: left;

}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {

background-color: #111;

}

ul.topnav li a.active {

background-color: #CCCCCC;

color: #333

}

ul.topnav li.right {

float: right;

}

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {

float: none;

}

}

.top {

position: relative;

background-color: #ffffff;

height: 68px;

padding-top: 20px;

line-height: 50px;

overflow: hidden;

z-index: 2;

}

.logo {

font-family: arial;

text-decoration: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-size: 37px;

letter-spacing: 3px;

color: #555555;

display: block;

position: absolute;

top: 17px;

}

.logo .dotcom {

color: #800D1E

}

.topnav {

position: relative;

z-index: 2;

font-size: 17px;

background-color: #5f5f5f;

color: #f1f1f1;

width: 100%;

padding: 0;

letter-spacing: 1px;

}

.top .logo {

position: relative;

top: 0;

width: 100%;

text-align: left;

margin: auto

}

footer {

position: relative;

right: 0;

bottom: 0;

left: 0;

padding: 1rem;

background-color: #efefef;

text-align: center;

}

div.gallery {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

div.gallery:hover {

border: 1px solid #777;

}

div.gallery img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

/*THis will display errors in red color.*/

span{

color: red;

}

IF NEEDED ALSO INCLUDED REGISTRATION.JS FILE

#########REGISTRATION.JS########

function validate(){

// Creating regex for username, firstname, lastname and phone number

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 does not match the respective regex

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 cofirm 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 regex

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 last name does not match the name regex

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 phone number does not match the phone regex

if(!phoneNumber.match(phonenoFormat) ){

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

return false;

}

//if either of the radio button is not clciked

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

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

return false;

}

//IF registration.js return false then that means validation is not successful and confirm.html page will not load.

}