[RESOLVED] Help with cookies plzzzz

@PasqualinoJul 31.2009

Hey,

I have to make a page that displays a form with 2 fields for name and family name and a choice of colors to set as the background if it’s the first time you open the page. If you’ve been on that page before the previous information must be hidden and I have to display a msg saying “Bonjour, Name FamiliyName, good morning(if it’s before noon) good afternoon (if it’s before 6pm) and good evening(if it’s later than 6pm)” and the color that the user chose on his previous visit must be set for the background color.

I’ve spent the passed couple days searching on this but I don’t understand javascript and cookies enough to use what I see and add it to my script to make it work. So I copied the script off a tutorial site and I’m trying to modify it to do what I need it to but I don’t realy know what I’m doing lol.

If someone could take a look at what I have so far and point me in the right direction or tell me what I need to change/remove or add, that would be greatly appreciated.

Instead of having the prompt box if there is no cookie, that’s where I need the form to show, asking first name,familyname and fav color.

So here is what I have so far:

[CODE] <html> <head> <script language=”javascript”>

function daytime() { var now = newDate() var hour = now.getHours(); if (hour<12) { timemsg=”bonne avant-midi.” } else if (hour<18) { timemsg=”bonne après-midi.” } else (hour>=18) { timemsg=”bonsoir.” } }

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 “” }

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 checkCookie() { username=getCookie(‘username’); if (username!=null && username!=””) { document.write(“Bienvenue, “+username+famname+”, “+timemsg); } else { username=prompt(‘Please enter your name:’,””); if (username!=null && username!=””) { setCookie(‘username’,username,365); } } } </script> </head> <body onLoad=”checkCookie()”> </body> </html> [/CODE]

to post a comment

JavaScript

12 Comments(s) _↴

@JMRKERJul 31.2009 — #Where is the rest of the code?

The HTML part?

JS needs the information to act upon for cookie storage.

Don't need everything, just the parts that are giving you fits and related to the problem!

@PasqualinoauthorJul 31.2009 — #That's the thing I don't know what to put in the body. I thought that because JS would be deciding wether to show or hide the content that maybe I need the form to be written by a JS function. As you can see I'm nothing close to a JS genius lol. I know how to make certain of these things but not having them all interact together

@cellosAug 02.2009 — #Hello, I'm not an expert myself but I thought I could try helping you out.

Let's go one by one through your functions.

First the daytime:

I would suggest you change the function as:

[CODE]
 function daytime()
 {
 if (hour<12)
 {
 timemsg="bonne avant-midi."
 }
 else if (hour<18)
 {
 timemsg="bonne après-midi."
 }
 else (hour>=18)
 {
 timemsg="bonsoir."
 }
 return timemsg;
 }
 
 [/CODE]

then in the html code:

[CODE]
 <script language="javascript"> 
 var now = new Date();
 var hour = now.getHours();
 var timemsg;
 document.write(daytime(timemsg));
 </script> 
 [/CODE]

By this way, you are passing the current hour variable to the function to evaluate and return a message accordingly. Otherwise it gives errors.

Actually you don't need the "return timemsg;" statement in the function but it is said to be good practice.

Notice please, in the var now = new Date(); statement, new and Date() are

[B]separated[/B]. They were not separated in your code and as I copied/pasted it, took me some time where the problem was :-)

Will try out the other functions as time permits and if you have no satisfactory answer. Have to go one by one because of time limitation.

@cellosAug 02.2009 — #In the last code of the script in html, you could say "document.write(daytime(timemsg) + " visiteur");" if the cookie was not present but will work on that now

@cellosAug 02.2009 — #sorry, you have to use "return timemsg;"

@cellosAug 02.2009 — #Haven't tested yet, but there seems to be a logical fault in function checkCookie()

if (username!=null && username!="") tests both conditions, where you want to test if the "username" cookie is empty or blank. It should be OR (||) insted of AND (&&)

@PasqualinoauthorAug 04.2009 — #Thanks allot for your help Cellos. And thanks for pointing out the new Date mistake I did cuz I would of searched a while my self. My biggest problem with this script is how do I hide or show the form with the fields using the cookie?

@PasqualinoauthorAug 04.2009 — #Basically in the function "checkCookie()" instead of having a prompt box, I need a form for "name", "family name" and "color menu" to show. So I don't know what to replace the "[COLOR="Red"]username=prompt('Please enter your name:',"");[/COLOR]" with.

@PasqualinoauthorAug 05.2009 — #anyone?

@cellosAug 09.2009 — #Sorry for coming back so late, was too busy to work on it during weekdays. Actually I do not use Javascript for cookies, I prefer to use them on server side which gives more flexibility so I'm pretty sure there are better ways to do this but this works fine too:

First the functions:

[CODE]
 function setCookie(cookieName, cookieValue, cookieExpires, cookiePath)
 {
 cookieValue = escape(cookieValue);	//convert non alphanumeric characters to hexadecimal
 
 /* Below sets the expiration date to one day later. Change "daysToExpire" as needed. */
 if(cookieExpires == " ")
 {
 var daysToExpire = 1;
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + daysToExpire);
 cookieExpires = exdate.toGMTString();
 }
 
 /*The path parameter is optional. Use it if you want the cookie to be available in any other directory of your 
 site. Here it is set to the root directory so that it is available to all directories of the domain. 
 Change as necessary. If you don't want to use, don't forget to delete from the parameters and the last " " 
 in setCookieValues function. It caused me some errors*/
 
  cookiePath = ";Path=/:";
 
  document.cookie=cookieName + "=" + cookieValue + ";expires=" + cookieExpires + cookiePath;
 }
 
 function setCookieValues()	// values from the form are collected, then passed over to the setCookie function
 { 
 var Name = document.frmTest.f_name.value;
 var FamName = document.frmTest.f_famName.value;
 var fullName = Name + " " + FamName;
 setCookie("Name",fullName," "," ")
 
  var Color = document.frmTest.f_color.value;
  setCookie("Color",Color," "," ")
 }
 
 function getCookie(c_name)	// Have not touched this part. Only added "var" before the first declarations of c_start and c_end else it gives error
 {
 if (document.cookie.length>0)
 {
 var c_start=document.cookie.indexOf(c_name + "=");
 if (c_start!=-1)
 { 
 c_start=c_start + c_name.length+1 ;
 var 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 ""
 }
 [/CODE]

And the HTML:

[CODE]
 <body>
 
 <script language="javascript"> 
 if (getCookie("Name") != " " && getCookie("Color") != " ")
 {
 var strName = getCookie("Name");
 var strColor = getCookie("Color");
 var strText = "Fill the form to change settings"
 }
 else
 {
 var strName = "Visitor";
 var strColor = "#FFFFFF";	// defaults to white
 var strText = "Please fill the below form"
 }
 
  document.bgColor = strColor;
 
  var now = new Date();
  var hour = now.getHours();
  var mins = now.getMinutes();
  if (mins < 10){
   mins = "0" + mins
  }
  var timemsg;
 
  document.write("Bienvenue " + strName + ", " + daytime(timemsg) +"<br />Time is: " + hour + ":" + mins + "<br />");
  document.write(strText)
 </script> 
 
 <form method="get" name="frmTest" onsubmit="setCookieValues()">
 <table>
 <tr>
 <td>Name:</td><td><input type="text" name="f_name" /></td>
 </tr>
 <tr>
 <td>Family Name:</td><td><input type="text" name="f_famName" /></td>
 </tr>
 <tr>
 <td>Background Color:</td>
 <td><select name="f_color">
 <option value="#FFFFFF">White</option>
 <option value="#FFFF00">Yellow</option>
 <option value="#FF0000">Red</option>
 </select>
 </td>
 </tr>
 <tr>
 <td colspan="2" align="center"><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 
 </body>
 </html>
 
 [/CODE]

This is a simple form using the get method and the same page. Just to help you get the idea. I know you don't want the form to show if cookies are present. You may want to simply redirect to another greeting page if cookies are present and have the form page show if not.

If you still want to use a single page, you can have the form's html tags within javascript but that is rather complicated. There's an online tool to help you with it: http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

Hope it will be helpful

Celal

@PasqualinoauthorAug 11.2009 — #Wow thanks alot for your help Cellos. Thats just what I needed.

@cellosAug 11.2009 — #No problem, glad it helps. Better to do some tweaking though. Like checking if cookies are enabled on the client browser and adding a <noscript> tag for browsers with javascript disabled etc.

Also in #JavaScript _↴

Transparant menu Urgent!adding javascript to date field

Success!

Help @Pasqualino spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Help with cookies plzzzz

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Help with cookies plzzzz

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴