Подтвердить что ты не робот

Обратная кнопка управления Динамическая форма

У меня есть форма с массивом текстовых полей. Пользователь (через javascript) может добавить произвольное количество текстовых полей в форму. После отправки формы и нажатия кнопки "Назад" форма отображает только поля, которые были в исходной форме, когда она была впервые отображена (любые добавленные текстовые поля потеряны). Каков наилучший способ, чтобы кнопка "Назад" отображала форму в состоянии, когда пользователь отправил ее? Любые идеи приветствуются, некоторые вещи, которые я пробовал:

  • Поместите данные формы в файл cookie (это отлично подходит для пары причины, но самый большой убийца для меня заключается в том, что файлы cookie ограничены 4K в размер)
  • Поместите данные формы в сеанс
  • Отправить форму через AJAX, а затем управлять историей

Спасибо за помощь. Я разместил тестовую форму на своем веб-сайте в http://fishtale.org/formtest/f1.php. Также здесь представлена ​​простая форма, демонстрирующая поведение, о котором я говорил:

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

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

4b9b3361

Ответ 1

Я не могу найти для этого предварительно написанную библиотеку, но я уверен, что она была решена раньше. Если бы я сам это сделал, я бы взял такой подход:

  • Используйте шаблон команды, чтобы каждый метод, который модифицирует пользовательский интерфейс страницы путем добавления элементов управления, также вызывает метод AJAX для нажатия метода вызывается (текстовое представление Javascript) в очередь, хранящуюся в сеансе сервера.

  • После завершения body onLoad используйте метод AJAX для запроса сеанса сервера для очереди команд для страницы, на которой пользователь включен. Если один из них извлекается, просто eval каждый член очереди, чтобы перестроить интерфейс страницы в том же порядке, что и пользователь.

Помните, что при таком подходе вы записываете не только элементы управления, но и удаления. Вам потребуются отдельные государственные держатели для элементов управления вводами пользователя, например текстовые поля (вам также, вероятно, потребуется сеанс на стороне сервера с доступом к методу AJAX).

Ответ 2

Как создать <input type="hidden"> (без name или вне формы, чтобы он не был отправлен), в котором вы храните кодированный список дополнительных полей для добавления и их значений? Хотя браузер не будет помнить вновь добавленные поля на "назад", он будет помнить значения скрытых полей, которые были в форме с самого начала.

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

<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.

Ответ 3

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

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

Это поддерживается в Opera и WebKit тоже. Однако кэш DOM возможен только в том случае, если вы придерживаетесь правил:

  • Не используйте onunload, onbeforeunload.
  • Не используйте Cache-control: no-store или must-revalidate.
    В PHP вы должны изменить session.cache_limiter от patently_ridiculous (я думаю, они написали его nocache) на none.

    session_cache_limiter('none');
    
  • К сожалению, HTTPS также отсутствует.

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


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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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