Link to home
Start Free TrialLog in
Avatar of 632863
632863

asked on

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>
Avatar of Phatzer
Phatzer
Flag of United Kingdom of Great Britain and Northern Ireland image

You might find this question helpful:
https://www.experts-exchange.com/questions/23124538/Javascript-form-cookie.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

Avatar of 632863
632863

ASKER

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.
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

ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial