rhivka
asked on
Creating and Reading Cookies
I started out with a form that validates user has entered name and either physical or email address when submitted. Then opens confirm.html saying their form has been submitted. Now after JavaScript function has verified that all of the required fields have been filled, I want to add a cookie to the user's computer. If the same user attempts to fill out the form a second time, the user will be directed to a separate HTML page advising them that they have already submitted the form.
What I have below is not working properly. As soon as the form is loaded the first time, the alert window pops up saying the user has already submitted the form...instead of waiting until the user has filled out the form first and returned to the page.
Also, I need to change the alert window of function getUserPrefs() to open a Web page such as Return.html....but only if the same user returns to fill out the form a second time. Meaning I want the form to still go to Confirm.html the first time a user fills out the form. I think I created the cookie correctly, and set it to expire after 1 week. Any help would be greatly appreciated.
<html>
<head>
<script type="text/javascript">
<!--HIDE FROM INCOMPATIBLE BROWSERS
function validateForm() { /* validates user enters name */
var a,i,o = document.mailList;
if(o.name_shipping.value == ""){
alert("You must enter your name");
o.name_shipping.focus();
return false;
}
if(o.email.value == ""){ /* validates either email or street address is entered */
a = ["name_shipping","address_
for (i=0;i<a.length;i++) if(o[a[i]].value == "") {
alert("You must enter either your street address or email address.");
o[a[i]].focus();
return false;
}
}
a = ["area","exchange","phone"
for(i=0;i<a.length;i++) if(o[a[i]].value == "") {
alert("You must enter your telephone number.");
o[a[i]].focus();
return false;
}
a = ["area","exchange","phone"
for (i=0;i<a.length;i++) if(isNaN(parseInt(o[a[i]].
alert("You must enter numeric values!");
o[a[i]].focus();
return false;
}
return true;
}
function setCookie() {
var expiresDate = new Date();
cookieDate.setDate(myDate.
document.cookie = encodeURI("name_shipping="
+ expiresDate.toUTCString();
}
function getUserPrefs() {
var userPrefs = decodeURI(document.cookie)
var prefs = userPrefs.split("; ");
var userName = prefs[0].split("=");
window.alert("Welcome back " + userName[1] + ". You have already submitted this form. ");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body onload="getUserPrefs();">
<h1>Kudler Customer Mailing List</h1>
<h4>Sign up here to be notified of upcoming sales and events.</h4><hr />
<form name="mailList" action="confirm.html" enctype="application/x-www
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td valign="top">
<p>Name<br />
<input type="text" name="name_shipping" size="50" /><br /></p>
<p>Address<br />
<input type="text" name="address_shipping" size="50" /></p>
<p>City, State, Zip<br />
<input type="text" name="city_shipping" size="34" />
<input type="text" name="state_shipping" size="2" maxlength="2" />
<input type="text" name="zip_shipping" size="5" maxlength="5" />
</p>
</td>
</tr>
</table>
<p>E-mail<br />
<input type="text" name="email" size="50" />
</p>
<p>Telephone<br />
(<input type="text" name="area" size="3" maxlength="3" />)
<input type="text" name="exchange" size="3" maxlength="3" />
<input type="text" name="phone" size="4" maxlength="4" />
</p>
<p><input type="submit" value="Submit" onclick="setCookie();" style="width: 150px" /></p>
</form>
</body>
</html>
What I have below is not working properly. As soon as the form is loaded the first time, the alert window pops up saying the user has already submitted the form...instead of waiting until the user has filled out the form first and returned to the page.
Also, I need to change the alert window of function getUserPrefs() to open a Web page such as Return.html....but only if the same user returns to fill out the form a second time. Meaning I want the form to still go to Confirm.html the first time a user fills out the form. I think I created the cookie correctly, and set it to expire after 1 week. Any help would be greatly appreciated.
<html>
<head>
<script type="text/javascript">
<!--HIDE FROM INCOMPATIBLE BROWSERS
function validateForm() { /* validates user enters name */
var a,i,o = document.mailList;
if(o.name_shipping.value == ""){
alert("You must enter your name");
o.name_shipping.focus();
return false;
}
if(o.email.value == ""){ /* validates either email or street address is entered */
a = ["name_shipping","address_
for (i=0;i<a.length;i++) if(o[a[i]].value == "") {
alert("You must enter either your street address or email address.");
o[a[i]].focus();
return false;
}
}
a = ["area","exchange","phone"
for(i=0;i<a.length;i++) if(o[a[i]].value == "") {
alert("You must enter your telephone number.");
o[a[i]].focus();
return false;
}
a = ["area","exchange","phone"
for (i=0;i<a.length;i++) if(isNaN(parseInt(o[a[i]].
alert("You must enter numeric values!");
o[a[i]].focus();
return false;
}
return true;
}
function setCookie() {
var expiresDate = new Date();
cookieDate.setDate(myDate.
document.cookie = encodeURI("name_shipping="
+ expiresDate.toUTCString();
}
function getUserPrefs() {
var userPrefs = decodeURI(document.cookie)
var prefs = userPrefs.split("; ");
var userName = prefs[0].split("=");
window.alert("Welcome back " + userName[1] + ". You have already submitted this form. ");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body onload="getUserPrefs();">
<h1>Kudler Customer Mailing List</h1>
<h4>Sign up here to be notified of upcoming sales and events.</h4><hr />
<form name="mailList" action="confirm.html" enctype="application/x-www
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td valign="top">
<p>Name<br />
<input type="text" name="name_shipping" size="50" /><br /></p>
<p>Address<br />
<input type="text" name="address_shipping" size="50" /></p>
<p>City, State, Zip<br />
<input type="text" name="city_shipping" size="34" />
<input type="text" name="state_shipping" size="2" maxlength="2" />
<input type="text" name="zip_shipping" size="5" maxlength="5" />
</p>
</td>
</tr>
</table>
<p>E-mail<br />
<input type="text" name="email" size="50" />
</p>
<p>Telephone<br />
(<input type="text" name="area" size="3" maxlength="3" />)
<input type="text" name="exchange" size="3" maxlength="3" />
<input type="text" name="phone" size="4" maxlength="4" />
</p>
<p><input type="submit" value="Submit" onclick="setCookie();" style="width: 150px" /></p>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
you can use
mypopup = window.open('return.html',
but since your popup will open automatically onload and is not triggered by your user, your popup will be blocked by popup blockers therefore I won't recommend it.
mypopup = window.open('return.html',
but since your popup will open automatically onload and is not triggered by your user, your popup will be blocked by popup blockers therefore I won't recommend it.
ASKER
Thanks... I decided to go with the alert window. You made a good point and the window is more user friendly than opening another page.
ASKER
Thank you! It worked great.
I was just wondering.. is there a way to open a new page such as Return.html instead of using the alert window?