<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button id="submitbutton">Submit</button>
</form>
<script type="text/javascript">
document.getElementById("submit3").addEventListener("click", myfunction);
function myFunction(){
localStorage.setItem("jobreference3", "KJ3N7");
}
</script>
</body>
</html><body>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<p>Job Reference Number: <span id="job1"></span> <span id="job2"></span> <span id="job3"></span>
</p>
<input type="submit" value="Apply">
</form>
<script type="text/javascript">
document.getElementById("job1").innerHTML = localStorage.getItem("jobreference1");
document.getElementById("job2").innerHTML = localStorage.getItem("jobreference2");
document.getElementById("job3").innerHTML = localStorage.getItem("jobreference3");
</script>
</body>I've set up an event listener which makes it so that the value is only stored if the submit button is pressed. For some reason it doesn't work though. I set it up to be retrieved on another page but even if I simply hyperlink myself to that page, without submitting this form, the value is displayed on the other page. Why isn't the even listener working?
edit: I edited in the HTML code that retrieves the values I set. The thing is that it retrieves it and displays it even if I don't submit the form on the other HTML page.
Note: the reason there is "job1", "job2" and "job3" is because I only sent a small portion of the first code. It's meant to only show 1 depending on which form you submitted on the previous page.
You need to define a function named setItem. That function is the event handler and will react when the event happens
<script>
function setItem () {
localStorage.setItem("jobreference1", "1FN43");
} document.getElementById("submitbutton").addEventListener("click", setItem);
</script>