使用 .innerHTML 重新加载后将表单 ID 的输出值保留在页面上答案

【问题标题】：Keep form ID's output value on page after reload using .innerHTML使用 .innerHTML 重新加载后将表单 ID 的输出值保留在页面上
【发布时间】：2017-01-10 12:59:40
【问题描述】：

我有一个搜索表单，点击提交按钮会在下面显示表单值。这是代码：

 <input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>

它工作正常，但是一旦提交（页面重新加载而不是转到另一个页面），输出 div 中的值就会消失。

有没有办法让该值保持不变，即使在页面重新加载后？

我正在努力寻找实现这一目标的最简单方法。

【问题讨论】：

几种方式；将其存储在会话中，将其添加到您的链接中，或者使用 jquery/ajax 提交您的表单。
保留它们的一种方法是在页面重新加载时传递这些值并从 URL 中获取它们或使用 php 将它们放回页面中......除非你使用 AJAX 发布该数据ajax 将在后台运行，在发布该数据时将客户端保持在页面上，这意味着不需要刷新页面，或者您可以使用 cookie/本地存储。
是的，您可以使用获取值（最常用于像 Google 那样的搜索字段 google.com/search?q=value）、会话、ajax 甚至 cookie/localstorege（最好不要）。
将其存储在本地存储中。并检查是否设置了输出。如果设置了，那么只需将本地存储数据放在输出 div 中，否则不要。如果Output div内容很大，不建议使用。
Sessions 听起来像是一个很好的解决方案。我已经用谷歌搜索了如何做到这一点，但我似乎无法将它与表单值联系起来。我以<?php session_start(); ?> 开始页面，然后添加了<?php print_r($_SESSION); ?>，但没有运气。

标签： javascript php jquery html forms

【解决方案1】：

您可以通过多种方式执行此操作，例如使用获取值、会话、cookie、localstorage、ajax...

由于您正在尝试构建搜索表单，因此 GET 值似乎是最合适的（或者也是 ajax）。

代码示例：

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
  <input type="text" name="searchfield" id="searchfield" value="" />
  <input type="submit" id="submitSearch" value="Submit"/>
</form>

<div id="output">

<?php

if(isset($_GET['searchfield'])) {
  echo $_GET["searchfield"];
 }

?>

</div>

如果您不想重新加载，请检查 AJAX。

【讨论】：