views:

67

answers:

2

Hello, I am trying to learn how to write cookies to keep the data in my CookieButton1 button persistent and to survive refreshes and page reloads. How can I do this in JavaScript? I have supplied my source code. Any advise, links or tutorials will be very helpful. If you navigate to [http://iqlusion.net/test.html][1] and click on Empty1, it will start to ask you questions. When finished it stores everything into CookieButton1. But when I refresh my browser the data resets and goes away.

Thanks!

<html>
<head>
<title>no_cookies>
</head>

<script type="text/javascript" >

    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.toUTCString());
}

    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 checkCookie()

{
CookieButton1=getCookie('CookieButton1');
if (CookieButton1!=null && CookieButton1!="")
  {
  alert('Welcome again '+CookieButton1+'!');
  }
else
  {

  if (CookieButton1!=null && CookieButton1!="")
    {
    setCookie('CookieButton1',CookieButton1,365);
    }
  }
}

var Can1Set = "false";

function Can1()
{
   if (Can1Set == "false")
   {
      Can1Title = prompt("What do you want to name this new canned response?","");
      Can1State = prompt("Enter a ticket state (open or closed)","closed");
      Can1Response = prompt("Enter the canned response:","");
      Can1Points = prompt("What point percentage do you want to assign? (0-10)","2.5");

      // Set the "Empty 1" button text to the new name the user specified
      document.CookieTest.CookieButton1.value = Can1Title;

      // Set the cookie here, and then set the Can1Set variable to true
      document.cookie = "CookieButton1"; 
      alert(document.cookie); 

      Can1Set = true;
   }else{
      document.TestForm.TestStateDropDownBox.value = Can1State;
      document.TestForm.TestPointsDropDownBox.value = Can1Points;
      document.TestForm.TestTextArea.value = Can1Response;

      // document.TestForm.submit();

   }
}
</script>

<form name=TestForm>
State: <select name=TestStateDropDownBox>
<option value=new selected>New</option>
<option value=open selected>Open</option>
<option value=closed>Closed</option>

</select>

Points: <select name=TestPointsDropDownBox>
<option value=1>1</option>
<option value=1.5>1.5</option>
<option value=2>2</option>
<option value=2.5>2.5</option>
<option value=3>3</option>
<option value=3.5>3.5</option>
<option value=4>4</option>
<option value=4.5>4.5</option>
<option value=5>5</option>
<option value=5.5>5.5</option>
<option value=6>6</option>
<option value=6.5>6.5</option>
<option value=7>7</option>
<option value=7.5>7.5</option>
<option value=8>8</option>
<option value=8.5>8.5</option>
<option value=9>9</option>
<option value=9.5>9.5</option>
<option value=10>10</option>
</select>
<p>

Ticket information:<br>
<textarea name=TestTextArea cols=50 rows=7></textarea>
</form>

<form name=CookieTest>

<input type=button name=CookieButton1 value="Empty 1" onClick="javascript:Can1()">

</form>
A: 
// Set the cookie here, and then set the Can1Set variable to true
document.CookieTest.CookieButton1 = "CookieButton1";

You aren't setting the cookie here. You are attempting to change the button element with the name CookieButton1 of the form with the name CookieTest to a String value "CookieButton1". This would have shown a JavaScript error in the average webbrowser.

To set a real cookie, you need document.cookie. You can find a little tutorial at w3schools.

BalusC
Looking at the two links you provided now. Thanks for bringing this up to my attention.
Johhny Thero
I checked the links you provided. I have followed the tutorials and still cannot seem to write cookies for my form.I wrote the three functions function setCookie, function getCookie and function checkCookie(). I have also updated my source code output above. Dont know what I am doing wrong.
Johhny Thero
A: 

document.cookie = "CookieButton1";

All that is doing is setting a cookie without a value, only a name. Cookies are defined as a 'name=value' pairing.

It should look like this ( or equivalent ) document.cookie = 'cookieID=CookieButton1';

Setting document.cookie = will NOT overwrite existing cookies, simply append information to the established cookie.

If you wanted to delete all cookies set by YOUR domain you can always use the following script

function delCookie() {
    var new_date = new Date()
    new_date = new_date.toGMTString()
    var thecookie = document.cookie.split(";")
    for (var i = 0; i < thecookie.length; i++) {
        document.cookie = thecookie[i] + "; expires =" + new_date
    }
}

If you need to remove cookies individually, the removeCookie function you have will suffice, but only if it is in a name=value pairing. Else your cookie is unusable since it will contain no data just a name.

Akidi