I'm trying to pass an input value from page to the another page.. Using local storage was useful, but when I'm trying to change the value in the second page it doesn't changed, I want to be able to change it..
html code for the first page
<html>
<head>
<title>
Input Form
</title>
<link rel="stylesheet" href="style.css" />
<script>
function handleSubmit () {
const name = document.getElementById('name').value;
const surname = document.getElementById('surname').value;
localStorage.setItem("NAME", name);
localStorage.setItem("SURNAME", surname);
return;
}
</script>
</head>
<body>
<form action="result.html" method="POST">
<input type="text" id="name" name="name" placeholder="Enter name.." />
<input type="text" id="surname" name="surname" placeholder="Enter surname.." />
<input type="submit" onclick="handleSubmit()"/>
</form>
</body>
</html>
html code for second page
<html>
<head>
<title>
Result Page
</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener('load', () => {
const name = sessionStorage.getItem('NAME');
const surname = sessionStorage.getItem('SURNAME');
document.getElementById('result-name').value = name;
document.getElementById('result-surname').value = surname;
})
</script>
</head>
<body>
<h1>
Result Page
</h1>
<h2>
Name: <input id="result-name" />
</h2>
<h2>
Surname: <input id="result-surname" />
</h2>
</body>
</html>
You are using local storage to set the item. You need to use local storage to get the item. Not session storage.
I am talking about these lines here:
const name = sessionStorage.getItem('NAME');
const surname = sessionStorage.getItem('SURNAME');
I changed it for you. Just copy paste the whole page and you are good to go.
<html>
<head>
<title>
Result Page
</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener('load', () => {
const name = localStorage.getItem('NAME');
const surname = localStorage.getItem('SURNAME');
document.getElementById('result-name').value = name;
document.getElementById('result-surname').value = surname;
})
</script>
</head>
<body>
<h1>
Result Page
</h1>
<h2>
Name: <input id="result-name" />
</h2>
<h2>
Surname: <input id="result-surname" />
</h2>
</body>
</html>
Read on local storage vs session storage. They are bit different.