Очистить форму на кнопке «Назад»?

Question

У меня есть страница с несколькими флажками в форме, которые при выборе фильтруют соответствующую информацию из таблицы с помощью jquery.Моя проблема заключается в следующем сценарии:

1. Кто-то проверяет один или несколько полей, скрывая строки из таблицы

2. Они нажимают ссылку, переходя к другойстраница

3. Они нажимают кнопку возврата.

На этом этапе флажки по-прежнему установлены (по крайней мере, в Chrome), но все строки таблицы снова видны.

Любые идеи?

Answer 1

Если ваша цель - вернуть их к точному виду, который они имели до того, как они ушли (строки таблицы все еще скрыты):

Это недостаток (или преимущество)веб-сайт: он не имеет состояния, особенно когда речь идет о манипуляциях на стороне клиента.

Вам нужно будет сохранить состояние приложения в хэш-теге URL-адреса, чтобы при использовании пользователем кнопки «Назад» вы моглиполучить "состояние" и восстановить их представление.

Вот еще один вопрос, ответ на который может вам помочь: jquery javascript: добавление истории браузера обратно с хэштегом?

Если ваша цель - вернуть страницу в исходное состояние:

Просто сбросьте все флажки при загрузке страницы:

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

-или-

Сбросить всю форму:

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

Answer 2

Не разрешайте кэширование вашей страницы или добавляйте код для сброса вашей формы:

$("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 необходимо использовать, потому что селектор CSS input[type=text] не соответствует <input />, в то время как элемент все еще является текстовым элементом.

Answer 3

Для IE сброс формы после отправки мне не помог. Вместо этого следующий код работал для меня. Событие загрузки страницы вызывается также в браузере Back Button.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Answer 4

Таким образом, ваша проблема не в том, что браузер кэширует вводимые пользователем данные, а в том, что строки не скрыты.Вы можете легко решить эту проблему, добавив скрипт jQuery, который будет проверять, установлен ли флажок (после загрузки страницы).Если этот флажок установлен, вы скрываете строку:)

псевдокод:

1. wait for the page to load
2. for each checkbox check if checked
3. if it's checked, hide the corresponding row in the same way you did when the user checked it.