Data from HTML form does not get saved in my javascript function
Question
So basically I have an HTML form that uses a dropdown box. 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.
<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. 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. 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.
I ended up using a local storage API recommended to my by a user below. Here's the link I used: https://www.w3schools.com/html/html5_webstorage.asp
3 answers
solution1
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)
solution2
0 ACCPTED 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.
solution3
0 2017-10-16 21:26:29
You are using the GET method to pass variables using the URL (see HTTP Methods ). Javascript has an experimental URLSearchParams interface which define utility methods to work with the query string of a URL... Mozilla Docs . You can use this alongside getElementById to set the value on load in 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.