Question

所以基本上我有一个使用下拉框的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页面，该页面在使用该var1进行计算的同一Javascript文件中调用单独的函数。

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

Answer 1

首先：

document.getElementById('var1').value;

应该是

document.getElementById('val1').value;

另外，我不知道你尝试做什么，但据我所知onSubmit（）不会发送带有请求的数据，所以让它返回的东西应该什么也不做（考虑到你想要做的是发送http请求，意味着加载新页面）

Answer 2

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

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

Answer 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>

来自HTML表单的数据不会保存在我的javascript函数中

3 个答案: