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
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
############CONFIRM.HTML############
Thanks your response has been recorded!
###########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.
}
Step by Step Solution
There are 3 Steps involved in it
Step: 1
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started
Authors: Jeff Mapua
1st Edition
1978502257, 978-1978502253
