Reselect Select box on back / forward with Chrome?

Question

I have a select box which changes the form below via ajax. If someone changes the form, clicks the back button then clicks the forward button the form changes are reset but the select box still shows the same value.

How do I either do a hard page refresh or make the select box retain its default selected value?

Answer 1

You probably have an onchange event handler on your select element. Trigger that same event handler onload (or on document ready) of the document.

Answer 2

Reset the select box based on the value in the address bar.

Just reset the state of the check box every time the desired address is in the address bar.

After detecting a change in the browser's address, you can use some simple jQuery for example:

if (address === 'foobar.com/whatever') {
    $('input[name=foo]').attr('checked', false);
}

The above code will simply uncheck the checkbox if it's checked. Do this check as soon as you detect that you are back at the address you are referring to.