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

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方法）。 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 个解决方案

解决方案1
0 2017-10-16 21:04:08

解决方案2
0 已采纳 2017-10-16 21:13:09

解决方案3
0 2017-10-16 21:26:29

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

问题描述

3 个解决方案

解决方案1 0 2017-10-16 21:04:08

解决方案2 0 已采纳 2017-10-16 21:13:09

解决方案3 0 2017-10-16 21:26:29

解决方案1
0 2017-10-16 21:04:08

解决方案2
0 已采纳 2017-10-16 21:13:09

解决方案3
0 2017-10-16 21:26:29