Дескриптор кнопки "Назад" динамическая форма

Вы можете создать свою собственную кнопку возврата на в верхней части веб-страницы и сделать ее больше и красивее, чем стандартная кнопка возврата в веб-браузере.

Под капотом ваш код может узнать, какое было предыдущее состояние, и вернуться к нему, или, если предыдущего состояния не было, вы могли бы вызвать функцию возврата браузера?

Как насчет создания (без имени или вне формы, чтобы оно не было отправлено), в котором вы хранить закодированный список дополнительных полей для добавления и их значений? Хотя браузер не запоминает недавно добавленные поля на «спине», он будет запомнить значения скрытых полей, которые были в форме с самого начала.

Вот пример, который сохраняет дополнительные поля при выгрузке документа и извлечении их по готовности:

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

Примечания:

• Вы можете использовать form.onsubmit вместо window.onbeforeunload , если вам нужно только запоминать значения более представление. onunload не работает, так как некоторые браузеры уже сохранили старые значения формы до того, как это событие произойдет.

• В Firefox важно положение скрытого ввода. По какой-то причине, если вы поместите его под динамически добавляемыми полями, Firefox запутается, какой это ввод, и не сможет запомнить значение.

• Этот пример не работает в Opera. Его можно заставить работать в Opera, но это больно. Вызов Opera событий загрузки и выгрузки несовместим, поэтому вместо этого вам нужно использовать onsubmit, или установить скрытое поле в интервале опроса, или что-то в этом роде. Хуже того, когда Opera запоминает предыдущие значения полей формы, она фактически не заполняет их до после запуска onload! Это уже вызывает множество проблем с написанием скриптов форм. Вы можете обойти это, установив небольшой тайм-аут в своей onload, чтобы дождаться, пока значения формы не войдут, если вам нужна совместимость с Opera.

В хороших браузерах вы можете добиться идеальной работы, просто не нарушая его .

Firefox 1.5 использует кэширование в памяти для целых веб-страниц, включая их состояния JavaScript, для одного сеанса браузера. Переход между посещенными страницами вперед и назад не требует загрузки страницы, а состояния JavaScript сохраняются. исходный код

Это также поддерживается в Opera и WebKit . Однако кеширование DOM возможно только при соблюдении правил:

1. Не используйте onunload , onbeforeunload .

2. Не используйте Cache-control: no-store или необходимо повторно проверить .
   В PHP вы должны изменить session.cache_limiter с patently_ridiculous (я думаю, они пишут это nocache ) на none .

    session_cache_limiter ('нет');
   

3. К сожалению, HTTPS также отсутствует.

Если вы не заставляете браузеры перезагружать страницу, они этого не сделают. Они сохранят модель DOM и ее значения неизменными, точно так же, как RFC 2616 предлагает .

Однако , если вы ищете место для хранения данных, есть невероятно умный взлом - ] window.name может хранить мегабайты данных . Он не отправляется на сервер и не разделяется между окнами.

Существуют также файлы cookie Flash, а HTML 5 localStorage реализован в IE8 и Safari 4.

Запретить использование кнопки возврата. Когда нажата кнопка «Назад», повторно отобразите предыдущую страницу для пользователя с включенными новыми полями, либо визуально, если это имеет смысл, либо скрытым. Таким образом, пользователь сможет использовать кнопку «Назад» в обычном режиме, а вы получите полный контроль над внешним видом «предыдущей» страницы.

В вашем конкретном случае вам просто нужно отобразить страницу со всеми видимыми полями. и заполнены значениями, которые были отправлены.

Это хороший образец для подражания для любого типа процесса мастера, где вы предоставляете последовательность форм для заполнения пользователем, и они могут выбрать возврат к предыдущей форме .

Чтобы прояснить ситуацию, Я предлагаю вам использовать этот совет по захвату события onUnload , чтобы инициировать отправку формы (чтобы вы получили введенные значения) и повторно отрендерить предыдущую страницу, которая отображалась бы «назад» (без значений) . Единственная альтернатива - использовать Ajax для отправки введенных значений каждый раз, когда пользователь покидает поле, а затем проверять каждую страницу с сервером через AJAX для получения дополнительных значений для отображения.

Вот некоторые дополнительные страницы, на которых обсуждается принятие управление функцией кнопки «Назад» и использование события выгрузки для сохранения данных форм:

• Освоение кнопки «Назад» с помощью Javascript
• Не позволяйте двери поразить вас
• Событие выгрузки кроссбраузера и кнопка «Назад»
• Сохранение данных форм портлета в WebSphere Portal V5. 1

Шаг 2: сценарий, обрабатывающий форму, помещает введенные значения в массив и сохраняет этот массив в переменной сеанса (или text / db / в зависимости от того, что вы сочтете подходящим).

Шаг 1. Сценарий, который выводит форму, добавляет javascript (который, в свою очередь, заполняет форму), если эта переменная сеанса найдена (а также очищает переменную сеанса).