Looking for advice on how to collect data in a text box and display it on another page? I have included HTML code for both the announcement page (where the data is entered) and the archive page (where the data should be shown). Could someone guide me on the correct approach? As a novice in HTML, I want to ensure I am following the right steps.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="stylem.css" />
<script type="text/javascript" src="index.js"></script>
<head>
<title>Announcement Page</title>
</head>
<body>
<form method="Post" action="archive.html">
<textarea type="text" id="textbox" class="textbox" cols="40" rows="10"></textarea>
<input type="submit" id="save" name="save" value="submit" onclick="handleSubmit()"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Archive
</title>
<link rel="stylesheet" href="stylea.css" />
</head>
<body>
<h2> Announcement : <span id="result-text"> </span> </h2>
</body>
</html>
function handleSubmit (){
const textbox = document.getElementById('textbox').value;
localStorage.setItem("Data", textbox);
return;
}
window.addEventListener('load', () => {
const params = (new URL(document.location)).searchParams;
const textbox = params.get('textbox');
document.getElementById('result-text').innerHTML= textbox;
})