I want to collect data in the form of a paragraph in the text box and then show that to a new page. I have added code for HTML for the announcement page (from where I want to take data and show it there as well), and for the archive page ( where I want to show the data), How should I do it? Kindly help me out. I am new to HTML therefore I am not sure if I am doing this the right.
<!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;
})
You're putting your "Data" into local storage so you need to access it there instead of trying to pull it from the document location
window.addEventListener('load', () => {
const data = localStorage.getItem('Data');
document.getElementById('result-text').innerHTML = data;
});