Question: I need help with Query Strings and Storing Persistent Information I need help to Modify the registration.html page below to send a query (that has
I need help with Query Strings and Storing Persistent Information
I need help to Modify the "registration.html" page below to send a query (that has all input field information from that form) to a second page. When a 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.
This needs 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.
The code belows that I have so far Opens a second page called confirm.html but it does not read and displays information from all the fields, this is not display all the information from the fields, Can you update, I need this tonight It has to read and display all the informantion from the regitration html. .
I am stuck:
function formValidation()
{ //VARIABLES SET FOR EACH
var uid = document.registration.userName;
var passid=document.registration.password;
var conpassid=document.registration.passwordVerify;
var fname=document.registration.firstName;
var lname=document.registration.lastName;
var uemail=document.registration.email;
var phn =document.registration.phno.value;
if(userid_validation(uid))
{
if(passid_validation(passid))
{
if(checkpass(passid,conpassid))
{
if(allLetter(fname))
{
if(allLetter(lname))
{
if(ValidateEmail(uemail))
{
if(phonenumber(phn))
{
document.forms["registration"].submit();
setCookie("uid", uid, 1);
setCookie("passid", passid, 1);
setCookie("fname", fname, 1);
setCookie("lname", lname, 1);
setCookie("uemail", uemail, 1);
setCookie("phn", phn, 1);
}
}
}
}
}
}
}
return false;
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function userid_validation(uid)//CHECKING FOR USER ID VALIDATION
{
var uid_len = uid.value.length;
var letterNumber = /^[0-9a-zA-Z]+$/;//VAR FOR ENSURING CORRECT CHARACTERS
if (uid_len == 0)//ENSURING NOT EMPTY
{
alert("User Id should not be empty");//ALERT IF USERiD IS EMPTY
uid.focus();
return false;
}
else if(uid.value.match(letterNumber))
{
return true;
}
else
{
alert("User Id should be alphanumeric");
uid.focus();
return false;
}
}
function passid_validation(passid)//PASSWORD VALIDATION for 8 characters
{
var passid_len = passid.value.length;//CHECKING FOR PASSWORD LENGTH
if (passid_len == 0)
{
alert("Password should not be empty" );
passid.focus();
return false;
}
else if(passid_len < 8)//AT LEAST 8 CHARACTERS
{
alert("Password length must be more then 8 character");
passid.focus();
return false;
}
else
return true;
}
function checkpass(passid,conpassid)//VERIFY PASSWORDS MATCH
{
if (passid.value == conpassid.value)//COMPARE PASSWORDS
{
return true;
}
else
{
alert("Confirm passwords, they do not match");//ALERT IF THEY DO NOT MATCH
conpassid.focus();
return false;
}
}
function allLetter(fname)//validate first name for correct characters
{
var letters = /^[A-Za-z]+$/;
//document.print(lname);
if(fname.value.match(letters))
{
return true;
}
else
{
alert(" First Name or last name has to be letters and it can not be blank");
fname.focus();
return false;
}
}
function ValidateEmail(uemail)//validate email to be right format
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;//right format
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");//alert if email is invalid
uemail.focus();
return false;
}
}
function phonenumber(phn) {//validate phone number to be in xxx xxx xxxx format
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;//format for phone number
if(phn.match(phoneno)) {
return true;
}
else {
alert("Please enter the phone number with digits in this form: XXX XXX XXXX");
return false;
}
}
CapellaVolunteers.org
- Home
- Invitation
- Volunteers
- Gallery
- Registration
Confrim HTML:
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
document.getElementById("uid").innerHTML=getCookie("uid");
document.getElementById("passid").innerHTML=getCookie("passid");
document.getElementById("fname").innerHTML=getCookie("fname");
document.getElementById("lname").innerHTML=getCookie("lname");
document.getElementById("uemail").innerHTML=getCookie("uemail");
document.getElementById("phn").innerHTML=getCookie("phn");
Confirmation PHP:
You have succesfully registered!
CSS MAIN:
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=button] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=button]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; margin: auto; }
article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; margin: 2px; } 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: 0px; 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: fixed; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; /*this works well to not cover over pictures as you mouse over .*/ width: 23%; overflow: auto; }
div.gallery:hover { border: 4px solid #777; }
div.gallery img { width: 100%; height: auto; }
div.desc { padding: 15px; text-align: center; } div.banner { text-align: center; width: 100%; height: auto; }
