Need Assistance on How to store Cookies containing user information

Broll05

12-06-2010, 09:38 PM

Hey everyone -

I am having some trouble with creating cookies and getting them to work for an onclick event. What I am trying to do is create a button to store cookies containing all user information with an alert message and set the expiration date one day after the visit. (This is just a project I am working on to help me understand how to create cookies.)

Below is the cookies code I came up with but it doesn't seem to be functioning at all. Any help would be greatly appreciated. Thanks

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />

<script type = "text/javascript">
/* <![CDATA[ */
//cookie button function
function cookieForm() {
var equipment = document.forms[0].equipment.value;
var pDate = document.forms[0].pickupDate.value;
var pHour = document.forms[0].pickupHours.value;
var pMin = document.forms[0].pickupMinutes.value;
var rDate = document.forms[0].returnDate.value;
var rHour = document.forms[0].returnHours.value;
var rMin = document.forms[0].returnMinutes.value;
var first = document.forms[0].firstName.value;
var last = document.forms[0].lastName.value;
var street = document.forms[0].street.value;
var city = document.forms[0].city.value;
var zip = document.forms[0].zip.value;
var DoBYear = document.forms[0].date.value;

var myDate = new Date();
myDate.setDay(myDate.getDay() +1) ;

document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
document.cookie = "pDate" + encodeURIComponent(pDate) + "; expires=" + mydate.toUTCString();
document.cookie = "pHour" + encodeURIComponent(pHour) + "; expires=" + mydate.toUTCString();
document.cookie = "pMin" + encodeURIComponent(pMin) + "; expires=" + mydate.toUTCString();
document.cookie = "rDate" + encodeURIComponent(rDate) + "; expires=" + mydate.toUTCString();
document.cookie = "rHour" + encodeURIComponent(rHour) + "; expires=" + mydate.toUTCString();
document.cookie = "rMin" + encodeURIComponent(rMin) + "; expires=" + mydate.toUTCString();
document.cookie = "first" + encodeURIComponent(first) + "; expires=" + mydate.toUTCString();
document.cookie = "last" + encodeURIComponent(last) + "; expires=" + mydate.toUTCString();
document.cookie = "street" + encodeURIComponent(street) + "; expires=" + mydate.toUTCString();
document.cookie = "city" + encodeURIComponent(city) + "; expires=" + mydate.toUTCString();
document.cookie = "zip" + encodeURIComponent(zip) + "; expires=" + mydate.toUTCString();
document.cookie = "DoBYear" + encodeURIComponent(DoBYear) + "; expires=" + mydate.toUTCString();

/* ]] */

</script>
</head>
<body onload = "rotateImage('rImage')">

<h1> ABC Outdoor Sports Equipment </h1>

<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;">

<br/>
<br/>

<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
<table border = "0">
<tr>
<td>
Equipment:<br/>
<select name = "equipment">
<option value="unselected">Select Equipment Type</option>
<option value = 20>Fishing Boat</option>
<option value = 15>Kayak</option>
<option value = 2>Mountain Bike</option>
<option value = 10>Scuba Gear</option>
</select>
</td>
</tr>
<tr>
<td>
Pick-up Date: <br/>
<input type = "text" name = "pickupDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Pick-up Time: <br/>
<select name = "pickupHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>

<select name = "pickupMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
Return Date: <br/>
<input type = "text" name = "returnDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Return Time: <br/>
<select name = "returnHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>

<select name = "returnMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
First Name: <br/>
<input type = "text" name = "firstName"/>
</td>
<td>
Last Name: <br/>
<input type = "text" name = "lastName"/>
</td>
</tr>
<tr>
<td>
Street: <br/>
<input type = "text" name = "street"/>
</td>
<td>
City: <br/>
<input type = "text" name = "city"/>
</td>
<td>
Zip:<br/>
<input type = "text" name = "zip" maxlength = "5"/>
</td>
</tr>
<tr>
<td>
Date of Birth: <br/>
<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
<input type = "submit" name = "submit" value = "Submit Reservation"/>
<input type = "button" name = "cookies" value = "Store User Information"/>
</td>
</tr>
</table>
</form>

</body>
</html>

Logic Ali

12-06-2010, 09:56 PM

var myDate = new Date();
myDate.setDay(myDate.getDay() +1) ;

That would be better as:var myDate = new Date();
myDate.setDate( myDate.getDate() +1 ) ;

document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
You're not separating the name and value with '=':
document.cookie = "equipment" + "=" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();

Philip M

12-06-2010, 10:10 PM

Cookies have been covered very many times in this forum. Try this example:-

<html>
<head>

<script type = "text/javascript">

var expDate = new Date();
expDate.setTime(expDate.getTime()+(1*24*60*60*1000)); // one day ahead

function setCookie(isName,isValue,dExpires) {
document.cookie = isName + "=" + isValue + ";expires=" + dExpires.toGMTString() + "path=/";
}

function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1) {return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}

function dispCookie(isName) {
nValue = getCookie(isName);
alert(nValue);
}

function deleteCookie(isName){
if (getCookie(isName)){
document.cookie = isName + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

</script>

</head>

<body>
<input type = "button" value = 'Set 1st Cookie' onclick = "setCookie('anyName','Hello',expDate)">
  <input type = "button" value = 'Set 2nd Cookie' onclick = "setCookie('someName','Goodbye',expDate)">
<br><br>
<input type = "button" value='Delete 1st Cookie' onclick="deleteCookie('anyName')">
  <input type = "button" value = 'Delete 2nd Cookie' onclick = "deleteCookie('someName')">
<br><br>
<input type = "button" value = 'Read 1st Cookie' onclick = "dispCookie('anyName')">
  <input type = "button" value = 'Read 2nd Cookie' onclick="dispCookie('someName')">
</body>

</html>

Instead of "Hello" and "Goodbye" the cookie value can be made up of several or many elements with a delimiter (say ~). Example:

var cookieValue = equipment +"~" + pDate + "~" + pHour + "~" + pMin + "~" .........

and when the cookie is recovered use .split("~") to break it back into the individual variable values.

"Copy from one book, it’s called plagiarism; copy from three, it’s called research." - Wilson Mizner (1876-1933)

Broll05

12-06-2010, 10:20 PM

Thanks both of you for all your help. I have read a plethera of examples and it just keeps confusing me. How can I incorporate the examples to fit the form fields I am using? If someone can get me started with a couple examples from my form list, I think I might be able to complete the rest of the form and function. Thanks again, and below is the code I am trying to create cookies for:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />

<script type = "text/javascript">
/* <![CDATA[ */
//cookie button function
function cookieForm() {
var equipment = document.forms[0].equipment.value;
var pDate = document.forms[0].pickupDate.value;
var pHour = document.forms[0].pickupHours.value;
var pMin = document.forms[0].pickupMinutes.value;
var rDate = document.forms[0].returnDate.value;
var rHour = document.forms[0].returnHours.value;
var rMin = document.forms[0].returnMinutes.value;
var first = document.forms[0].firstName.value;
var last = document.forms[0].lastName.value;
var street = document.forms[0].street.value;
var city = document.forms[0].city.value;
var zip = document.forms[0].zip.value;
var DoBYear = document.forms[0].date.value;

var myDate = new Date();
myDate.setDay(myDate.getDay() +1) ;

document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
document.cookie = "pDate" + encodeURIComponent(pDate) + "; expires=" + mydate.toUTCString();
document.cookie = "pHour" + encodeURIComponent(pHour) + "; expires=" + mydate.toUTCString();
document.cookie = "pMin" + encodeURIComponent(pMin) + "; expires=" + mydate.toUTCString();
document.cookie = "rDate" + encodeURIComponent(rDate) + "; expires=" + mydate.toUTCString();
document.cookie = "rHour" + encodeURIComponent(rHour) + "; expires=" + mydate.toUTCString();
document.cookie = "rMin" + encodeURIComponent(rMin) + "; expires=" + mydate.toUTCString();
document.cookie = "first" + encodeURIComponent(first) + "; expires=" + mydate.toUTCString();
document.cookie = "last" + encodeURIComponent(last) + "; expires=" + mydate.toUTCString();
document.cookie = "street" + encodeURIComponent(street) + "; expires=" + mydate.toUTCString();
document.cookie = "city" + encodeURIComponent(city) + "; expires=" + mydate.toUTCString();
document.cookie = "zip" + encodeURIComponent(zip) + "; expires=" + mydate.toUTCString();
document.cookie = "DoBYear" + encodeURIComponent(DoBYear) + "; expires=" + mydate.toUTCString();

/* ]] */

</script>
</head>
<body onload = "rotateImage('rImage')">

<h1> ABC Outdoor Sports Equipment </h1>

<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;">

<br/>
<br/>

<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
<table border = "0">
<tr>
<td>
Equipment:<br/>
<select name = "equipment">
<option value="unselected">Select Equipment Type</option>
<option value = 20>Fishing Boat</option>
<option value = 15>Kayak</option>
<option value = 2>Mountain Bike</option>
<option value = 10>Scuba Gear</option>
</select>
</td>
</tr>
<tr>
<td>
Pick-up Date: <br/>
<input type = "text" name = "pickupDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Pick-up Time: <br/>
<select name = "pickupHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>

<select name = "pickupMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
Return Date: <br/>
<input type = "text" name = "returnDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Return Time: <br/>
<select name = "returnHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>

<select name = "returnMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
First Name: <br/>
<input type = "text" name = "firstName"/>
</td>
<td>
Last Name: <br/>
<input type = "text" name = "lastName"/>
</td>
</tr>
<tr>
<td>
Street: <br/>
<input type = "text" name = "street"/>
</td>
<td>
City: <br/>
<input type = "text" name = "city"/>
</td>
<td>
Zip:<br/>
<input type = "text" name = "zip" maxlength = "5"/>
</td>
</tr>
<tr>
<td>
Date of Birth: <br/>
<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
<input type = "submit" name = "submit" value = "Submit Reservation"/>
<input type = "button" name = "cookies" value = "Store User Information"/>
</td>
</tr>
</table>
</form>

</body>
</html>

Philip M

12-06-2010, 10:49 PM

Sorry, I thought I had explained that.

Instead of "Hello" and "Goodbye" the cookie value can be made up of several or many elements with a delimiter (say ~). Example:

var cookieValue = equipment +"~" + pDate + "~" + pHour + "~" + pMin + "~" .........

and when the cookie is recovered use .split("~") to break it back into the individual variable values.

Just scrub all the stuff .... document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
document.cookie = "pDate" + encodeURIComponent(pDate) + "; expires=" + mydate.toUTCString();
which is bogus (as Old Pedant would say)

As I see it the trouble is that you are trying to run before you can walk. Your rental/hire script involves too many features which you have not mastered. Create simpler scripts which enable you to understand how to set and read cookies or determine the difference between two dates without the excessive complications you have built in. Just take one step at a time. Understand A - move on to B, understand B - move on to C, and so on.

Broll05

12-06-2010, 11:25 PM

This is the project I was given to work on to help me understand javascript better, but yes, I agree with you that it is far more difficult of a project then should be for beginning javascript coders. If it is possible for you to expand on your code so I might be able to figure it out I would appreciate that. I have never used the .split feature and would not know how to implement that in addition to the cookies being linked to a button. This and the math equation that figures hours are the only two parts out of the whole project I am having trouble with. If there is anyway to substitute your code into my code, so I can see it in context, That would also be very helpful. Thanks so much and I look forward to reading your expert opinion.

Old Pedant

12-07-2010, 01:14 AM

Philip is saying: Store *ALL* the fields as one big long string in a single cookie value. Use a separator you won't find in the field values.

He really was saying just string all your fields together:
var cookieValue = equipment +"~" + pDate + "~" + pHour + "~" + pMin + "~" .........

and then use his setCookie function with that single long cookieValue string.

Broll05

12-07-2010, 02:45 AM

Thank you so much for all your help.

Philip M

12-07-2010, 07:31 AM

Oh! Don't I get thanked as well?

Broll05

12-07-2010, 03:27 PM

Of course, I already thanked you but I will again.