I am trying to get the user information that is written in a form to post the information provided once submitted to another HTML page.
This is the page with the form:
<form id="newBlog">
<label for="btitle">Title of your blog</label>
<input type="text" id="btitle" value="" placeholder="Title" required>
<br>
<br>
<label for="bname">Author name</label>
<input type="text" id="bname" value="" placeholder="Your full name" required>
<br>
<br>
<textarea id="userBlog">
</textarea>
<br>
<br>
<button type="submit">
Submit
</button>
</form>
<script>
const form = document.getElementById('newBlog');
const blogTitle = document.getElementById('btitle');
const authorName = document.getElementById('bname');
const userBlog = document.getElementById('userBlog');
form.addEventListener('submit', function(e) {
e.preventDefault();
const blogTitleValue = blogTitle.value;
const authorNameValue = authorName.value;
const userBlogValue = userBlog.value;
localStorage.setItem('blog-title', blogTitleValue);
localStorage.setItem('author-title', authorNameValue);
localStorage.setItem('user-blog', userBlogValue);
window.location.href = "index.html";
})
And this is what is on the HTML page where the information should be posted:
<script>
const blogTitle = localStorage.getItem('blog-title');
const authorTitle = localStorage.getItem('author-title');
const userBlog = localStorage.getItem('user-blog');
document.getElementById('b-title').textContent = blogTitle;
document.getElementById('b-name').textContent = authorTitle;
document.getElementById('user-Blog').textContent = userBlog;
</script>
</body>
</html>
This is the error I got in console
I am not sure if posting the other functions of the code will help but do tell me If I need to. Thanks.
2
Answers
So the reason I was getting the error was because I didn't add a place to put the results of the form. I fixed this by adding:
Thank you for all the answers and help and sorry for not seeing this before.
getElementById()
) match the elements’ id’s.value
instead oftextContent
.