JavaScript Form

I have to create a form that has a name, address, state and zip code and email address. I have to modify the protytype form page so that when the JavaScript funcition has verified that all of the required fields have been filled, a cookie is added to the user's computer. If the same user tries to fill out the form a second time the user will be directed to a diffrent Html page tellling them that they have already submitted the form. Here is what I have created so far:
<?xml version="1.0" encoding="utf-8" ?>
<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Form</title>
<style type="text/css">
body { font-family: "Trebuchet MS", Arial, Helvetica,
sans-serif, serif

}

h2 {font-size: 1.2em}
</style>

<script type="text/javascript">
<!--HIDE FROM INCOMPATIBLE BROWSERS

// STOP HIDING FROM INCOMPATIBLE BROWSERS-->

function formValidator()

{
      //Field reference
      var lastname = document.getElementById('lastname');
      var addr = document.getElementById('addr');
      var zip = document.getElementById('zip');      
      var phone = document.getElementById('phone');      
      var email = document.getElementById('email');

      // Form Verification!
      if(isAlphabet(lastname, "Please fill in your last name with letters only please!"))

{

      if(isAlphanumeric(addr, "Letters or Numbers only!"))

{      if(isNumeric(zip, "Please enter a valid zip code!"))

{      if(isNumeric(phone, "Please enter a valid Phone Number!"))

{      if(emailValidator(email, "Please enter a valid email address!"))

{      return true;
                                    
}

                        
}
                        
}                  

}      

}
      return false;
}

function isEmpty(elem, helperMsg)

{
      if(elem.value.length == 0)

{            
alert(helperMsg);

elem.focus(); // set the focus to this input

            return true;

}

      return false;

}

function isNumeric(elem, helperMsg)

{

      var numericExpression = /^[0-9]+$/;
      
      if(elem.value.match(numericExpression)){
      return true;
}
      else
{
      alert(helperMsg);
            elem.focus();
            return false;
      }
}

function isAlphabet(elem, helperMsg)

{
      var alphaExp = /^[a-zA-Z]+$/;
      if(elem.value.match(alphaExp))
{            
      return true;      
}else
{
      alert(helperMsg);
      elem.focus();
      return false;
      }
}
      function isAlphanumeric(elem, helperMsg)
{      var alphaExp = /^[0-9a-zA-Z]+$/;
      if(elem.value.match(alphaExp))
{
      return true;      
}      else
{
      alert(helperMsg);
      elem.focus();
      return false;
}
}
      function emailValidator(elem, helperMsg)
{
      var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
      if(elem.value.match(emailExp))
{
      return true;      
}      else
{
      alert(helperMsg);
      elem.focus();
      return false;
}

}

</script>

<h1></h1>
<h2>Customer Information Form</h2><hr />


      
<form method='get' action='Submit.html' onsubmit='return formValidator();'>

<table border="0" cellpadding="3" cellspacing="0">
<table>

<tr>
<td valign="top"><h3>Please Enter Data</h3>

 Last Name
<input type="text" name="Customer_Name" id='lastname' size="30" /><br />
</p>
<p>Enter your Address with no spaces <input type="text" name="Address" id='addr' size="50" /></p>
<p>Zip Code <input type="text" name="ZIP_Code" id='zip' size="5" />
<p>E-mail Address <input type="text" name="Email_Address" id='email' size="40"/>
</td>
</tr>

</table>

<p>Telephone <input type="text" name="Telephone_Number" id='phone' size="12"  />
<p>Please select your age range:<br />
<input type="radio" name="age"
      value="Under 21" />Under 21<br />
<input type="radio" name="age"
      value="21 and older" />21 and older</p>
<p><input type="submit" value="Submit"  /> <input type="reset" /></p>

</form>

</head>

<body>

</body>

</html>
632863Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

PhatzerCommented:
You might find this question helpful:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23124538.html

It shows how to create and return cookies, then all you need is something like the code snippet below your cookie functions in the <HEAD> section of the page. That should work.
<script language="javascript">
<!--
 
function checkFormCookie() {
  if (getCookie('formcookie') !== "") {
    window.location = 'location.html'
  }
}
 
checkFormCookie();
 
//-->
</script>

Open in new window

0
632863Author Commented:
This is the code from the URL that you gave above:
#### PAGE 1 ############################
 
//// HEAD:
 
<script language="javascript" type="text/javascript">
<!--
 
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
 
function setDetails(fname, sname, url) {
 
  forename = getElementById(fname).value;
  surname = getElementById(sname).value;
 
  setCookie('forename', forename, 7);
  setCookie('surname', surname, 7);
  window.location = url;
 
}
 
//-->
</script>
 
//// HTML:
 
<form name="detailform">
<input type="text" name="fn" id="fn">
<input type="text" name="sn" id="sn">
<input type="button" onclick="javascript:setDetails('fn', 'sn', 'http://www.yourdomain.com/page2.html');" name="Send" value="Send">
</form>
 
#### PAGE 2 ############################
 
//// HEAD:
 
<script language="javascript" type="text/javascript">
<!--
 
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}
 
//-->
</script>
 
//// HTML:
 
<form name="detailform">
<input type="text" name="fn" id="fn">
<input type="text" name="sn" id="sn">
<input type="text" name="extra" id="extra">
<input type="submit" name="Submit" value="Submit">
</form>
 
//// BEFORE </BODY>:
 
<script language="javascript" type="text/javascript">
<!--
 
document.getElementById('fn').value = getCookie('forename');
document.getElementById('sn').value = getCookie('surname');
 
//-->
</script>
 
Open in New Window

Now if I understand you correctly all I have to do is add this code (exactly as it is here) to the head of the code that I posted earler then I should add what you posted after each cookie function, is this correct? I am new to JavaScript so please excuse me if I ask a lot of questions. I want to make sure that I am doing this correctly.
0
PhatzerCommented:
No, all you need to do is put the code I wrote below the last </script> in the <head>, get it?

PS: Change the 'formcookie' and 'location.html' to the name of the cookie you need to look up, and where you want to redirect them to.

so:
......return "";
}
 
//-->
</script>
 
<script language="javascript">
<!--
 
function checkFormCookie() {
  if (getCookie('formcookie') !== "") {
    window.location = 'location.html'
  }
}
 
checkFormCookie();
 
//-->
</script>

Open in new window

0
hieloCommented:
Try this:
<?xml version="1.0" encoding="utf-8" ?>
<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Form</title>
<style type="text/css">
body { font-family: "Trebuchet MS", Arial, Helvetica,
sans-serif, serif
 
}
 
h2 {font-size: 1.2em}
</style>
 
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS 
 
window.onload = init;
 
function init()
{
	if( readCookie("previousSubmission") )
	{
		if( confirm("You previously filled this form. Would you like to directly PAGENAME?"))
		{
			window.location.href="http://www.thesite.com/theotherpage.html";
		}
		else//load up the previous values to give user a chance to edit info.
		{
			document.getElementById('lastname') = readCookie("lastname");
			document.getElementById('addr') = readCookie("addr");
			document.getElementById('zip') = readCookie("zip");      
			document.getElementById('phone') = readCookie("phone");      
			document.getElementById('email') = readCookie("email");
			if( "Yes"==readCookie("overT1") )
			{
				document.getElementById('overT1').checked=true;
			}
			else
			{
				document.getElementById('underT1').checked=true;
			}
		}
	}
}
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+encodeURIComponent(value)+expires+"; path=/";
}
 
function readCookie(name) {
	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 decodeURIComponent(c.substring(nameEQ.length,c.length));
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}
 
function formValidator()
{
      //Field reference
      var lastname = document.getElementById('lastname');
      var addr = document.getElementById('addr');
      var zip = document.getElementById('zip');      
      var phone = document.getElementById('phone');      
      var email = document.getElementById('email');
      var overT1 = document.getElementById('overT1');
 
      // Form Verification!
      if(isAlphabet(lastname, "Please fill in your last name with letters only please!"))
	{
 
      	if(isAlphanumeric(addr, "Letters or Numbers only!"))
		{
	     	if(isNumeric(zip, "Please enter a valid zip code!"))
			{
		     	if(isNumeric(phone, "Please enter a valid Phone Number!"))
				{
			     	if(emailValidator(email, "Please enter a valid email address!"))
					{
						createCookie("lastname",lastname.value,365);
						createCookie("addr",addr.value,365);
						createCookie("zip",zip.value,365);
						createCookie("phone",phone.value,365);
						createCookie("email",email.value,365);
						createCookie("overT1",(overT1.checked) ? "Yes":"No",365);
						createCookie("previousSubmission","true",365);
				     	return true;                
					}
				}
			}
		}
	}
return false;
}
 
function isEmpty(elem, helperMsg)
{
      if(elem.value.length == 0)
	{            
		alert(helperMsg);
		elem.focus(); // set the focus to this input
	return true;
	}
return false;
}
 
function isNumeric(elem, helperMsg)
{
      var numericExpression = /^[0-9]+$/;
     
     if(!elem.value.match(numericExpression))
	{
     	alert(helperMsg);
          elem.focus();
	return false;
	}
return true;
}
 
function isAlphabet(elem, helperMsg)
{
      var alphaExp = /^[a-zA-Z]+$/;
      if(elem.value.match(alphaExp))
	{            
     	return true;      
	}
	else
	{
      	alert(helperMsg);
      	elem.focus();
      	return false;
      }
}
function isAlphanumeric(elem, helperMsg)
{
	var alphaExp = /^[0-9a-zA-Z]+$/;
     if(elem.value.match(alphaExp))
	{
     	return true;      
	}
	else
	{
     	alert(helperMsg);
     	elem.focus();
     return false;
	}
}
 
function emailValidator(elem, helperMsg)
{
     var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
     if(elem.value.match(emailExp))
	{
     	return true;      
	}
	else
	{
     	alert(helperMsg);
     	elem.focus();
     	return false;
	}
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
 
</script>
</head>
 
<body>
<h1></h1>
<h2>Customer Information Form</h2><hr />
 
 
      
<form method='get' action='Submit.html' onsubmit='return formValidator();'>
 
<table border="0" cellpadding="3" cellspacing="0">
<table>
 
<tr>
<td valign="top"><h3>Please Enter Data</h3>
 
 Last Name
<input type="text" name="Customer_Name" id='lastname' size="30" /><br />
</p>
<p>Enter your Address with no spaces <input type="text" name="Address" id='addr' size="50" /></p>
<p>Zip Code <input type="text" name="ZIP_Code" id='zip' size="5" />
<p>E-mail Address <input type="text" name="Email_Address" id='email' size="40"/>
</td>
</tr>
 
</table>
 
<p>Telephone <input type="text" name="Telephone_Number" id='phone' size="12"  />
<p>Please select your age range:<br />
<input type="radio" id="overT1" name="age"
      value="Under 21" />Under 21<br />
<input type="radio" id="underT1" name="age"
      value="21 and older" />21 and older</p>
<p><input type="submit" value="Submit"  /> <input type="reset" /></p>
 
</form>
 
 
 
</body>
 
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.