how to keep cookies out of webpage?

Question

I have text fields on a website. When I type things in it, hit the back button, then the forward button, the things I typed in are still there.

More specifically, the text boxes start of with grey text. When you type for the first time, the box empties the grey text, then shows what you type in black. When you do that, then hit the back button, then the forward, what we originally typed now appears in grey. Clicking on the box does not clear it anymore, and further typing is also in grey.

Here's my code (carriage returned for reading sake):

"<input id="friend_name_0" 
type="text" 
style="color: rgb(119, 119, 119);" 
value="eg: Sharon" 
onblur="if(this.value==''){this.value = 'eg: Sharon'; this.style.color = '#777777';}" onfocus="if(this.value == 'eg: Sharon'){clearField(friend_name_0); this.style.color = '#222222';}" 
maxlength="9" "
name="friend_name_0"/>

Thanks guys!

Answer 1

It's not the Cookies, but a browser that keeps forms fields filled. Initial color is set to grey, so only your script will change it on event. You have IF block for event but do not have ELSE block to set it as it should.

<input id="friend_name_0" 
type="text" 
style="color: #777777;" 
value="eg: Sharon" 
onblur="if(this.value==''){this.value = 'eg: Sharon'; this.style.color = '#777777';}
else {this.style.color = '#222222';}"
onfocus="if(this.value == 'eg: Sharon'){clearField(friend_name_0); this.style.color = '#222222';}" 
maxlength="9"
name="friend_name_0" />

Keep in mind, when you're writing IF block you always should think about ELSE and omit it if not needed.

Answer 2

Yeah, like Viktor says, it's not cookies. The problem is that the page is being cached by the browser.

In your example, this is fairly expected, since the page hasn't changed since the user went back and then forward (imagine they put in some info and forgot something from the last page, for instance).

It gets really messy though when the page is actually a NEW page (page 1 and page 2 have some URL, same form, different expected content), which is the problem I'm dealing with as well.

The only for sure ways to prevent this type of behavior that I know of are (in no particular order):

1. Using a different URL (add a random number-letter combo to the end of the url as a get variable, call it "uid" or some such). This won't prevent the back and forth, but will keep two pages with same URL from being confused by browser cache.

2. Throw in a bit of javascript that says something like "onload : reload". Obviously you don't want an infinite loop, so you could have another get variable that let's the script know if it has already loaded the page before. Maybe a hidden input on the page that it checks against. Bottom-line, force reload page.

3. Have a js script that says "onunload, wipe all user input values". Unload would be fine, as it wouldn't wipe out the POST or GET request, I don't think, only the values left over on the page as it is left behind.

4. Write a js script that onload wipes out any fields that don't have the value set as an attribute (ie input type='text' value='stuff') If it sees the value in the HTML itself, it leaves it be.

That last one is what I'm working on. The tricky part is making sure it doesn't screw up the accessibility of the page.