JS function values gone after BACK button clicked

help with combo select code

[lexipixel]

Hi I'm trying to help someone else setup a "Double Combo" select list, (from [javascriptkit.com...] )

The code produces two SELECT lists (FORM elements).

The user selects a value from the first list which loads the related values into the second list.

We got everything working, the last remaining problem is that once the user clicks through to another page, if they use their browser's BACK button, the values in the JS select lists are gone.

Any ideas?

[Dabrowski]

Yes, the JS won't remember anything if you navigate off the page. This would be easy to do, use a cookie. That way you can store a value and look it up again later.

Cookie code is easy to use, and I'm sure Google will point you at some read/write cookie functions you can copy and paste.

[lexipixel]

Thanks... but still a bit more coding than they are capable of, (I'm helping someone and don't want to give them code they can't manage).

Do you know of any JS that can be used to cause a reset or reload when the browser back button is hit?

We don't need to preserve anything the user entered. If we could just get the form to reset to the default SELECT values.

This is to help another WebmasterWorld regular who is not a programmer, (and JS isn't my strong suit).

[Dabrowski]

Do you know of any JS that can be used to cause a reset or reload when the browser back button is hit?

Getting it to reload is easy - just use an onLoad, the problem is getting to know which values were set.

There are 2 methods:

Cookies. When the user clicks a value in the first box, you use 1 line of code -

setCookie( "myvalue", selectedIndex);

and then your onload does

selectedIndex = getCookie( "myvalue");

I personally don't see how that can be too difficult for anybody to grasp, I'll post the functions here, they don't need to understand them.

Second option, when user clicks first option page reloads with a?index=value in the URI. Then your onload code would have to decipher location.query which is a lot more code. Then when the back button is clicked it would go back to the URI with the query in it. To do it properly you'd use location.replace instead of href so you don't fill the history up.

Cookie functions......

// Cookie Functions
// Unknown Author - but Thanks!

function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( (!start ) && ( name!= document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires )? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path )? ';path=' + path : '' ) +
( ( domain )? ';domain=' + domain : '' ) +
( ( secure )? ';secure' : '' );
}

function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path )? ';path=' + path : '') +
( ( domain )? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}