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('l astname');
var addr = document.getElementById('a ddr');
var zip = document.getElementById('z ip');
var phone = document.getElementById('p hone');
var email = document.getElementById('e mail');
// 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(numeri cExpressio n)){
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaE xp))
{
return true;
}else
{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg)
{ var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaE xp))
{
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(emailE xp))
{
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>
<?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('l
var addr = document.getElementById('a
var zip = document.getElementById('z
var phone = document.getElementById('p
var email = document.getElementById('e
// 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(numeri
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaE
{
return true;
}else
{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg)
{ var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaE
{
return true;
} else
{
alert(helperMsg);
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\
if(elem.value.match(emailE
{
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>
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,exp iredays)
{
var exdate=new Date();
exdate.setDate(exdate.getD ate()+expi redays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTSt ring());
}
function setDetails(fname, sname, url) {
forename = getElementById(fname).valu e;
surname = getElementById(sname).valu e;
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:setDet ails('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.in dexOf(c_na me + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.inde xOf(";",c_ start);
if (c_end==-1) c_end=document.cookie.leng th;
return unescape(document.cookie.s ubstring(c _start,c_e nd));
}
}
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('f n').value = getCookie('forename');
document.getElementById('s n').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.
#### PAGE 1 ##########################
//// HEAD:
<script language="javascript" type="text/javascript">
<!--
function setCookie(c_name,value,exp
{
var exdate=new Date();
exdate.setDate(exdate.getD
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTSt
}
function setDetails(fname, sname, url) {
forename = getElementById(fname).valu
surname = getElementById(sname).valu
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:setDet
</form>
#### PAGE 2 ##########################
//// HEAD:
<script language="javascript" type="text/javascript">
<!--
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.in
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.inde
if (c_end==-1) c_end=document.cookie.leng
return unescape(document.cookie.s
}
}
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('f
document.getElementById('s
//-->
</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:
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
Open in new window