javascript - 后退按钮处理动态表单

Question

我有一个带有文本字段数组的表单。用户(通过 javascript)可以向表单添加任意数量的文本字段。提交表单并按下后退按钮后，表单仅显示原始表单首次呈现时的字段(任何添加的文本字段都将丢失)。允许后退按钮以用户提交时的状态呈现表单的最佳方法是什么？欢迎任何想法，我尝试过的一些事情是:

• 将表单数据放在 cookie 中(这 不适合一对夫妇 原因，但对我来说是最大的 killer 是 cookie 限制为 4K 尺寸)
• 将表单数据放入 session
• 通过 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>

这类似于我刚才发布的问题，Best Way For Back Button To Leave Form Data ，但是，此表单的元素已被用户修改。

Answer 1

如何创建一个 <input type="hidden"> (没有 name 或在表单之外，因此未提交)您在其中存储要添加的额外字段及其值的编码列表？虽然浏览器不会记住“back”上新添加的字段，但它会记住从一开始就在表单中的隐藏字段的值。

这是一个在文档卸载时保存额外字段并在准备就绪时检索它们的示例:

<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 记住以前的表单字段值时，它实际上不会填写它们，直到 after onload 被触发!这已经导致了很多很多表单脚本问题。如果您需要 Opera 兼容性，您可以通过在 onload 中放置一个小的超时来等待表单值输入来解决这个问题。