HTML 表单中的数据未保存在我的 javascript 函数中答案

【问题标题】：Data from HTML form does not get saved in my javascript functionHTML 表单中的数据未保存在我的 javascript 函数中
【发布时间】：2017-10-16 20:45:59
【问题描述】：

所以基本上我有一个使用下拉框的 HTML 表单。提交表单时，它会调用我编写的函数。但是，在提交此表单后，它会进入另一个 HTML 页面，在该页面中需要使用该表单的数据表单，但它不再可用，我不知道为什么。

<body>
<h1>Select your input:</h1>
<form id="customize" name="customize" method="get" action="index.html" onSubmit="return checkInfo();">
<p>Please select the right value</p>
<select id="val1" name="val1">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
<input type="submit" value="submit" />
</form>
</body>


function checkInfo() {
var1 = document.getElementById('var1').value;
return true;
}

我遗漏了一些涉及其他变量且与此问题无关的 javascript 代码，这就是为什么它总是返回 true 的原因，因为我没有显示返回 false 的选项。我怀疑这要么与非全局变量有关，要么由于某种原因无法从同一个 Javascript 文件中的不同函数访问这个 var1。基本上是提交表单，调用函数，创建变量并分配数据，然后当函数返回 true 时加载另一个 HTML 页面，该页面调用同一 Javascript 文件中的单独函数，该 Javascript 文件使用该 var1 进行计算.

我最终使用了以下用户向我推荐的本地存储 API。这是我使用的链接：https://www.w3schools.com/html/html5_webstorage.asp

【问题讨论】：

如果你不在 checkInfo() 中使用 e.preventDefault() 你仍然会提交表单
你做事的方式，不使用服务器端脚本，数据不会被存储，而是通过表单动作传递到 url。在这种情况下，您的 URL 将类似于 index.html?var1=WhatEverValueTheFormHad。您需要一个脚本（Javascript 或 JQuery）来准备来自查询字符串的值。
Nawed Khan，我的 checkInfo 脚本不是在处理数据吗？我知道数据通过 URL，但我不明白为什么当我将其设置为变量时它没有被存储。 Cruiser，变量 e 是什么？我是否在函数调用的顶部使用了阻止默认语句？谢谢。
e - 被调用的事件（在本例中为 onclick）。每次加载新页面时，状态都是空白的（就好像您以前从未在该页面上运行过代码一样 - 因为它是一个新页面，即使它位于同一个域中）。这就是为什么要将数据从一个页面传递到另一个页面，您需要使用@P Ackerman 的解决方案之一

标签： javascript html frontend

【解决方案1】：

加载新页面时状态不会持续存在。如果您将数据分配给一个页面上的变量，然后导航到新页面，则会重新加载脚本（即使它是同一个文件）。

但是，您可以使用 localStorage 或 sessionStorage 等 API 跨页面持久保存数据，或者您可以查看使用页面内路由仅通过模拟来维护相同状态/上下文的单页面应用程序解决方案页面导航。

【讨论】：

感谢您的回复！因此，如果我对您的理解正确，我要么必须制作一些脚本，将数据存储在文本文件中，要么使用预制的 API 来存储数据？我现在明白它不是在页面之间存储的。我将如何使用页内路由？它使用相同的 HTML 文件，但改变了周围的元素？
这取决于您要为此付出多少努力，以及您实际尝试构建的内容。在页面路由中通常涉及某种大型框架（如 Angular、React、Ember 等），因此对您来说可能有点矫枉过正，但原则上您基本上有一个 HTML 容器页面，可以根据需要将其他 HTML 加载到 DOM 中通过 JavaScript，而不是导航到不同的页面。
看看这个：w3schools.com/html/html5_webstorage.asp。它提供了一种在页面之间存储变量的简单方法（如果对您很重要，还可以查看浏览器支持）
另一方面，localStorage 和 sessionStorage 本质上允许您编写要存储的字符串，这些字符串可以在页面加载时访问（或真正由任何事件触发），它是更接近于拥有可以在页面之间共享的变量。
您只需要确保正确序列化和解析数据并了解其局限性：developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

【解决方案2】：

首先：

document.getElementById('var1').value;

应该是

document.getElementById('val1').value;

另外，我不知道你想做什么，但据我所知 onSubmit() 不会随请求发送数据，所以让它返回一些东西应该什么都不做（考虑到你想做的是发送一个http请求，意思是加载一个新页面）

【讨论】：

如果有不一致，那只是一个错字，因为我没有复制粘贴。我有点困惑，因为我看到了两个 youtube 视频，它们的操作方式与我相同，所以我认为这是从表单接收数据的正确日期。

【解决方案3】：

您正在使用 GET 方法通过 URL 传递变量（请参阅HTTP Methods）。 Javascript 有一个实验性的 URLSearchParams 接口，它定义了实用方法来处理 URL 的查询字符串...Mozilla Docs。您可以在 getElementById 旁边使用它来设置 index.html 中的加载值。

<html>
<body>
  <h1>Select your input:</h1>
  <form id="customize" name="customize" method="get" action="index.html" onSubmit="return checkInfo();">
    <p>Please select the right value</p>
    <select id="selectVal" name="val1">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
    </select>
    <input type="submit" value="submit" />
  </form>
  <script>
    let params = new URLSearchParams(document.location.search.substring(1))
    let value = params.get('val1')
    var element = document.getElementById('selectVal');
    element.value = value
  </script>
</body>

【讨论】：