I have a JavaScript cookie question. I have used the example for writing and reading a JavaScript cookie from this site: http://www.tutorialspoint.com/javascript/javascript_cookies.htm. The cookie reads and writes just fine to the same page but once I go to another page with a similar form that it should work in – the information in the cookie is gone.
I had originally gotten this to work off my desktop but once I added it to the DEV site we are testing on – it only works on one page. Basically I can set a cookie on one page with a form and then on another page there will be no cookie to read. However I can create another cookie on the second form and it saves just fine. When I go back to page one form – the first cookie I created populates the form fields.
So:
Form 1 page - cookie 1 created - then go to - Form 2 page - cookie 1 doesn't exist but I can create cookie 2 - then go to - Form 1 page - cookie 1 loads into form 1 - then go to - Form 2 page - cookie 2 loads into form 2
Additional information about the website:
Apache server PHP 5.4 AngularJS 1.2.26 Webservice other JavaScript and jQuery files 3rd party scripts
About the only thing I see in the document.cookie when I debug it is a phpsessid. Could this be blocking my cookies from being carried over the form on the other page? These forms are all on the same domain, so…
The desktop version which is the same as the DEV website:
Page 1
<html>
<head>
<script src="tutorialspoint-cookies.js" type="text/javascript"></script>
</head>
<body>
<h1>FORM 1</h1>
<form name="form_000c" id="form_000c" action="">
<label>First Name:</label>
<input type="text" name="First_Name" id="First_Name" /><br />
<label>Last Name:</label>
<input type="text" name="Last_Name" id="Last_Name" /><br />
<label>Email:</label>
<input type="text" name="Email" id="Email" /><br />
<label>Phone Number:</label>
<input type="text" name="Phone" id="Phone" /><br />
<label>Timeline:</label>
<select name="Timeline" id="Timeline">
<option value="time1">Timeline 1</option>
<option value="time2">Timeline 2</option>
<option value="time3">Timeline 3</option>
<option value="time4">Timeline 4</option>
</select><br />
<label>Measurements:</label>
<select name="Measurements" id="Measurements">
<option value="meas1">Measurement 1</option>
<option value="meas2">Measurement 2</option>
<option value="meas3">Measurement 3</option>
<option value="meas4">Measurement 4</option>
</select><br />
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
<a href="tutorialspoint-cookies-2.html">go to page 2</a>
</body>
</html>
Page 2
<html>
<head>
<script src="tutorialspoint-cookies.js" type="text/javascript"></script>
</head>
<body onLoad="ReadCookie()">
<h1>FORM 2</h1>
<form name="form_000c" id="form_000c" action="">
<label>First Name:</label>
<input type="text" name="First_Name" id="First_Name" /><br />
<label>Last Name:</label>
<input type="text" name="Last_Name" id="Last_Name" /><br />
<label>Email:</label>
<input type="text" name="Email" id="Email" /><br />
<label>Phone Number:</label>
<input type="text" name="Phone" id="Phone" /><br />
<label>Timeline:</label>
<select name="Timeline" id="Timeline">
<option value="time1">Timeline 1</option>
<option value="time2">Timeline 2</option>
<option value="time3">Timeline 3</option>
<option value="time4">Timeline 4</option>
</select><br />
<label>Measurements:</label>
<select name="Measurements" id="Measurements">
<option value="meas1">Measurement 1</option>
<option value="meas2">Measurement 2</option>
<option value="meas3">Measurement 3</option>
<option value="meas4">Measurement 4</option>
</select><br />
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
<a href="tutorialspoint-cookies.html">go to page 1</a>
</body>
</html>
JavaScript cookie
<!--http://www.tutorialspoint.com/javascript/javascript_cookies.htm
function WriteCookie(){
cookievalue1 = escape(document.form_000c.First_Name.value) + ";";
cookievalue2 = escape(document.form_000c.Last_Name.value) + ";";
cookievalue3 = escape(document.form_000c.Email.value) + ";";
cookievalue4 = escape(document.form_000c.Phone.value) + ";";
cookievalue5 = escape(document.form_000c.Timeline.value) + ";";
cookievalue6 = escape(document.form_000c.Measurements.value) + ";";
document.cookie = "First_Name=" + cookievalue1;
document.cookie = "Last_Name=" + cookievalue2;
document.cookie = "Email=" + cookievalue3;
document.cookie = "Phone=" + cookievalue4;
document.cookie = "Timeline=" + cookievalue5;
document.cookie = "Measurements=" + cookievalue6;
alert("Setting Cookies : " + "First_Name=" + cookievalue1 + "Last_Name=" + cookievalue2 + "Email=" + cookievalue3 + "Phone=" + cookievalue4 + "Timeline=" + cookievalue5 + "Measurements=" + cookievalue6 );
}
function ReadCookie(){
var allcookies = document.cookie;
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
// the cookie is leaving a white space in the name so we need to remove it with .trim()
name = name.trim();
value = cookiearray[i].split('=')[1];
document.getElementById(name).value = value;
}
}
Advertisement
Answer
When you are setting cookie, it is important to remember that you need to specify path also.
// use path=/ while setting cookie in javascript
document.cookie = "First_Name=" + cookievalue1 + " path=/"; document.cookie = "Last_Name=" + cookievalue2 + " path=/"; document.cookie = "Email=" + cookievalue3 + " path=/"; document.cookie = "Phone=" + cookievalue4 + " path=/"; document.cookie = "Timeline=" + cookievalue5 + " path=/"; document.cookie = "Measurements=" + cookievalue6 + " path=/";