skip to Main Content

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

This error shows for all 'textContent' elements on the page

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


  1. Chosen as BEST ANSWER

    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:

    <!-- Set where the new blog will be posted -->
    <div>Blog Title: <br><span id="btitle"></span></div>
    <div>Author Name: <br><span id="bname"></span></div>
    <div>User Blog: <br><span id="userBlog"></span></div>
    

    Thank you for all the answers and help and sorry for not seeing this before.


    1. Make sure your references to elements (getElementById()) match the elements’ id’s.
    2. Use value instead of textContent.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search