HTML表单中的数据未保存在我的javascript函数中
[英]Data from HTML form does not get saved in my javascript function
问题描述
So basically I have an HTML form that uses a dropdown box. 
所以基本上我有一个使用下拉框的HTML表单。 When the form is submitted it calls a function I wrote. 提交表单后，它将调用我编写的函数。 However after this form is submitted it proceeds to another HTML page where the data form the form needs to be used but it is no longer available and I don't know why. 但是，在提交此表单后，它将继续进入另一个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;
}
I left out some of the javascript code that involved other variables and was irrelevant for this issue which is why it always returns true because I did not show the option for returning false. 我遗漏了一些涉及其他变量的javascript代码，因此与该问题无关，这就是为什么它总是返回true的原因，因为我没有显示返回false的选项。 I suspect this either has to do with a variable that isn't global or for some reason this var1 cannot be accessed from a different function within the same Javascript file. 我怀疑这与非全局变量有关，或者由于某种原因，无法从同一Javascript文件中的其他函数访问此var1。 Basically the form is submitted, the function is called, the variable is created and assigned the data, and then when the function returns true another HTML page is loaded which calls a separate function in the same Javascript file that uses that var1 to make a calculation. 基本上，提交表单，调用函数，创建变量并分配数据，然后在函数返回true时加载另一个HTML页面，该页面在使用该var1进行计算的同一Javascript文件中调用一个单独的函数。
I ended up using a local storage API recommended to my by a user below. 我最终使用了下面的用户推荐给我的本地存储API。 Here's the link I used: https://www.w3schools.com/html/html5_webstorage.asp 这是我使用的链接： https : //www.w3schools.com/html/html5_webstorage.asp
3 个解决方案
解决方案1
0 2017-10-16 21:04:08
First of all: 首先：
document.getElementById('var1').value;
should be 应该
document.getElementById('val1').value;
Also, I don't know what you try to do, but as far as I know onSubmit() does not send data with the request so letting it return something should do nothing (considering that what you wish to do is to send a http request, meaning to load a new page) 另外，我不知道您想做什么，但据我所知onSubmit（）不会随请求发送数据，因此让它返回某内容应该什么都不做（考虑到您希望做的是发送一个http请求，表示加载新页面）
解决方案2
0 已采纳 2017-10-16 21:13:09
State does not persist when new pages are loaded. 加载新页面时状态不会持久。 If you assign data to a variable on one page, and then navigate to a new page, the script (even if it is the same file) is reloaded. 如果将数据分配给一页上的变量，然后导航到新页，则将重新加载脚本（即使它是同一文件）。
You can, however, use APIs like localStorage or sessionStorage to persist data across pages, or you can look at a Single Page Application solution that uses in-page routing to maintain the same state/context by merely simulating page navigation. 但是，您可以使用localStorage或sessionStorage类的API在页面之间持久化数据，也可以查看单页面应用程序解决方案，该解决方案使用页面内路由通过仅模拟页面导航来维持相同的状态/上下文。
解决方案3
0 2017-10-16 21:26:29
You are using the GET method to pass variables using the URL (see HTTP Methods ). 您正在使用GET方法通过URL传递变量（请参见HTTP方法 ）。 Javascript has an experimental URLSearchParams interface which define utility methods to work with the query string of a URL... Mozilla Docs . Javascript具有实验性的URLSearchParams接口，该接口定义了可与URL的查询字符串一起使用的实用程序方法... Mozilla Docs 。 You can use this alongside getElementById to set the value on load in index.html. 您可以将其与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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.