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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hieloConnect With a Mentor Commented:
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
 
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
All Courses

From novice to tech pro — start learning today.