Clear Form on Back Button?

Question

I have a page with several check-boxes in a form, which when selected, filter corresponding info out of a table with jquery. My problem is the following scenario:

1. Someone checks one or more boxes, hiding rows from table

2. They Click a link, going to another page

3. They click the back button.

At this point, the check boxes are still checked (in chrome at least), but the all the table rows are visable again.

Any Ideas?

Answer 1

If your objective is to bring them back to the exact view they had before they left (table rows are still hidden):

Such is a disadvantage (or advantage) of a website: it's stateless, particularly when it comes to client-side manipulation.

What you'll need to do is store the application state in the URL hash tag so that when the user uses their back button, you can retrieve the "state" and reconstruct their view.

Here's another question whose answer might help you: jquery javascript: adding browser history back with hashtag?

If your objective is to return the page back to its initial state:

Just reset all the checkboxes on page load:

$('input:checkbox').prop('checked', false);

-or-

Reset the entire form:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .prop('checked', false)
 .prop('selected', false);

Answer 2

Do not allow your page to be cached, or add code to reset your form:

$("form input").each(function(){
    var elem = $(this);
    var type = elem.attr("type");
    if(type == "checkbox") elem.prop("checked", "");
    else if(type == "text") elem.val("");
});

.each has to be used, because the CSS selector input[type=text] doesn't match <input />, while the element is still a text element.