0

我有一个 javascript 表单，我在其中使用 innerHTML 来设置一些文本。

当表单提交时，信息丢失了。无论如何我可以让它“粘”。我在想一个cookie，但我知道的就这么多。

谢谢

<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>

快速示例我正在捕获名称并需要 div 在表单提交后显示名称。

4

3 回答 3

3

您将需要以某种方式持久化数据。有几种选择：

  • 将其存储在服务器上。提交表单后，您的服务器端脚本将接收数据；它可以将其保存在数据库、会话变量或其他适合您的应用程序的存储形式中。每当客户端重新访问带有表单的页面时，让服务器使用持久数据生成表单的 HTML。
  • 使用 HTML5 的本地存储。虽然旧版浏览器不支持，但所有现代浏览器都提供本地存储 API。当用户提交表单时（将事件监听器附加到表单的“提交”事件），您可以通过调用localStorage[key] = value和检索表​​单数据来存储表单数据localStorage[key]。
  • 将其存储在 cookie 中。虽然我不推荐这种方法，但您可以使用表单数据创建 cookie。唯一的限制是数据需要表示为字符串，但我推荐JSON。但是，您可能不应该使用这种方法，因为每个请求都会将 cookie 发送到服务器；如果表单字段包含大量数据，那么您也不必要地将大量数据发送到服务器。

使用 HTML5 的本地存储为您提供了一种不需要服务器端配置的自封装方法：

<form action="" name="myform">
  <input type="text" name="name">
  <div id="theName"></div>
</form>
<script type="text/javascript">
  (function() {
    var form = document.getElementsByName('myform')[0];
    if (localStorage['name'] !== undefined) {
      var displayArea = document.getElementById('theName');
      displayArea.textContent = localStorage['name'];
    }
    form.addEventListener('submit', function() {
      var nameField = document.getElementsByName('name')[0];
      localStorage['name'] = nameField.value;
    }, false);
  })();
</script>
于 2011-01-19T06:26:16.720 回答
2

您是否将输入标签的“值”属性设置为某个值或空白？您可以删除（删除属性本身），以便使用最后一个值集（仅适用于非密码类型输入。此外，还没有在所有浏览器中尝试过。）。

或者更好的是，您可以使用服务器端脚本（如 PHP、ASP、RUBY 等）将属性值设置为先前提交的值。

<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>

由于您要使用 cookie，因此仅在 js 中执行此操作要复杂得多且不可靠。

PS：我假设您没有使用 XHR(AJAX) 提交表单，因为 XHR 不会刷新页面或重新初始化输入，除非您告诉他们这样做。

于 2011-01-19T06:23:25.397 回答
0

This should be happening server-side. Javascript is for enhancing a page, it's not to be depended on for data manipulation.

Your script, converted to PHP, would look like

<form action="" method="post" name="myform">
  <input type="text" name='name">
  <div id="theName"><?php
    if(isset($_POST['name'])) { echo $_POST['name']; }
  ?></div>
</form>

...and it would work every time, without having to call any JS.

You'll have to handle the form data somehow anyway - how were you intending to retrieve the data without a server-side script?

于 2011-01-19T06:38:47.323 回答