Question

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

将表单数据放入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>

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

Answer 1

如何创建<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 on_之后！这已经导致许多形式脚本问题。你可以通过在onload中加入一个小超时来解决这个问题，等待表单值进入后如果你需要Opera兼容性。

Answer 2

我找不到预先编写的库，但我确信它之前已经解决了。如果我不得不自己采取这种方法：

使用command pattern，以便通过添加控件修改页面UI的每个方法也调用AJAX方法将调用的方法（文本Javascript表示）推送到存储在服务器会话中的队列。 / p>
body onLoad完成后，使用AJAX方法在服务器的会话中查询用户所在页面的命令队列。如果检索到一个，只需eval队列中的每个成员按照用户执行的相同顺序重建页面的UI。

请记住，这种方法不仅可以记录控件的添加，还可以记录删除。您将需要单独的状态持有者来进行用户输入控件，例如文本框（您还可能需要使用AJAX方法访问的服务器端会话）。

Answer 3

在优秀的浏览器中，只需不破坏即可让它完美运行。

对于单个浏览器会话，Firefox 1.5对整个网页使用内存缓存，包括其JavaScript状态。在访问页面之间前后移动不需要加载页面，并且保留JavaScript状态。 source

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 suggests完全一样。

然而，如果您正在寻找存放数据的地方，那就是非常聪明的黑客 - window.name can store megabytes of data。它不会发送到服务器，也不会在Windows之间共享。

还有Flash Cookie和HTML 5 localStorage在IE8和Safari 4中实现。

Answer 4

步骤2：处理表单的脚本将输入的值放入数组中，并将该数组存储到会话变量（或text / db /您认为合适的任何内容）中。

步骤1：如果找到该会话变量，则输出表单的脚本会添加一个javascript（进而填写表单）（并且它也会清除会话变量）。

Answer 5

您可以在网页顶部制作自己的后退按钮，使其比标准网络浏览器后退按钮更大更漂亮。

在幕后，您的代码可以知道之前的状态是什么并恢复到它，或者如果之前没有状态，您可以调用浏览器的后退功能？

Answer 6

阻止使用后退按钮。按下后退按钮时，请为包含新字段的用户重新呈现上一页，如果有意义，则可以显示或隐藏。这样，用户可以正常使用后退按钮，您可以完全控制“上一页”的外观。

在您的特定用例中，您只需渲染页面，其中所有字段都可见，并使用提交的值填充。

对于任何向导类型的流程，这是一个很好的模式，您可以在其中提供一系列表单供用户填写，他们可以选择返回上一个表单。

为了使其完全清楚，我建议您使用this advice on capturing the onUnload event来触发表单提交（以便获取输入的值）并重新显示“返回”将显示的上一页（没有值）。唯一的选择是每次用户离开字段时使用Ajax发送输入的值，然后让每个页面通过AJAX检查服务器以检索要显示的其他值。

以下是一些讨论控制后退按钮功能并使用unload事件来保存表单数据的其他页面：

后退按钮处理动态表格

6 个答案: