Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Need Assistance on How to store Cookies containing user information

    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

    Code:
    <!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>
    	<!-- Brooks Rogalski
    		December 6, 2010 -->
    <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>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    var myDate = new Date();
    myDate.setDay(myDate.getDay() +1) ;
    That would be better as:
    Code:
    var myDate = new Date();
    myDate.setDate( myDate.getDate() +1 ) ;
    Code:
    	document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
    You're not separating the name and value with '=':
    Code:
    	document.cookie = "equipment" + "=" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Cookies have been covered very many times in this forum. Try this example:-

    Code:
    <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)">
    &nbsp;&nbsp;<input type = "button" value = 'Set 2nd Cookie' onclick = "setCookie('someName','Goodbye',expDate)">
    <br><br>
    <input type = "button" value='Delete 1st Cookie' onclick="deleteCookie('anyName')">
    &nbsp;&nbsp;<input type = "button" value = 'Delete 2nd Cookie' onclick = "deleteCookie('someName')">
    <br><br>
    <input type = "button" value = 'Read 1st Cookie' onclick = "dispCookie('anyName')">
    &nbsp;&nbsp;<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)
    Last edited by Philip M; 12-06-2010 at 10:12 PM.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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>
    	<!-- Brooks Rogalski
    		December 6, 2010 -->
    <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>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,335 Times in 4,301 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Broll05 (12-07-2010)

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you so much for all your help.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Oh! Don't I get thanked as well?

  • Users who have thanked Philip M for this post:

    Broll05 (12-07-2010)

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Of course, I already thanked you but I will again.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •