How can you get information from a form and append it to a table?

Question

I am making a website in which I need to get information from a form and store it in a table that everyone else can see.

For example, every time someone fills out the form and presses "submit", the user is taken to another page where a table is created. The table will append the information that the user just put. If the tab is refreshed or someone else visits the site, the information in the table will still be there.

I believe I need a server for this, so if there is any guidance regarding how to use a server, it would be much appreciated. -THERE ARE COMMENTS REGARDING THIS, NOW I NEED AN ANSWER TO THE QUESTION BELOW

However, more specifically, I want to at least be able to use local storage to find out the technique for saving the data and keeping it in the table for at least one user.

I have some code below that is attempting to use local storage, but it is not currently working. I have a form elsewhere, and I also call the div myresult in another page. Any help is much appreciated. Thanks!

function refresh() {
    const result = document.getElementById("myresult");
    const saved = JSON.parse(localStorage.getItem("save"));
    if (saved) {
        const t =
        `<table>
            <tr>
                <th>Name</th>
                <th>LastName</th>
            </tr>
            <tr>
                <td>${saved.name}</td>
                <td>${saved.lastname}</td>
            </tr>
        </table>`;

        myresult.innerHTML = t;
    }

    const form = document.getElementById("myform");
    form.addEventListener("submit", e => {
        e.preventDefault(); 
        const {
            elements
        } = form;
        const output = {
            name: elements.name.value, 
            lastname: elements.lastname.value,
        };
        localStorage.setItem("save", JSON.stringify(output));
        const template =
            `<table>
            <tr>
                <th>Name</th>
                <th>LastName</th>
            </tr>
            <tr>
                <td>${output.name}</td>
                <td>${output.lastname}</td>
            </tr>
        </table>`;
        myresult.innerHTML = template;
    })
}

Answer 1

The main issue here is your use of your form element. Say your form had the following style:

<form id="myform">
  <input placeholder="Name">
  <input placeholder="LastName">

  <input type="submit">
</form>

When you select using the JavaScript selector, you first do:

const {
    elements
} = form;

Try console.log()ing what elements is, and you may notice that elements might look a little different than what your code is presuming. When you console.log() (this shows up in the browser consoler, which you can find using right click, inspect element, find the tab named console), the response will look something like:

{
    0: <input placeholder="Name">,
    1: <input placeholder="LastName">,
    2: <input type="submit">
}

There will likely be some other JavaScript jargon in there, but this is the meat. When you do:

const output = {
    name: elements.name.value, 
    lastname: elements.lastname.value,
};

There is no value inside of the elements object called name or lastname. It is instead 0 and 1. So the way we would change our output would be:

const output = {
    name: elements[0].value, 
    lastname: elements[1].value,
};

This is not the same as accessing an array, because we are accessing elements at the keys of 0 and 1. The final step would be adding this into your code. I took the liberty of removing the semi-duplicated code (where you create the HTML and add it to the page), because all you have to do is call refresh() from within the form submit listener and then when it checks again, you would then see conceptually how local storage works. Note: if you call refresh from within the HTML listener, the listener should not be inside of the refresh function because it will just slap on a second listener, which means the next time you try submitting it will be trying to submit multiple times!

Here's what the code would look like with these updates. Be warned, the code will not work in a StackOverflow code snippet, since there is not access to local storage. If you want to test it briefly, I would suggest using codepen.io, which lets you easily run HTML, CSS, and JS as well as allows you to have access to local storage.

function refresh() {
    const result = document.getElementById("myresult");
    const saved = JSON.parse(localStorage.getItem("save"));
    if (saved) {
        const t =
        `<table>
            <tr>
                <th>Name</th>
                <th>LastName</th>
            </tr>
            <tr>
                <td>${saved.name}</td>
                <td>${saved.lastname}</td>
            </tr>
        </table>`;

        myresult.innerHTML = t;
    }
}

const form = document.getElementById("myform");
form.addEventListener("submit", e => {
    e.preventDefault(); 
    const {
        elements
    } = form;

    console.log(elements);
    const output = {
        name: elements[0].value, 
        lastname: elements[1].value,
    };

    console.log(output);
    localStorage.setItem("save", JSON.stringify(output));

    refresh();
})

/* CSS to help with displaying the table*/
table, th, td {
  border: 1px solid black;
}

th, td {
  color: black;
}

<form id="myform">
  <input placeholder="Name">
  <input placeholder="LastName">
  <br>
  <input type="submit">
</form>

<div id="myresult">I added the div element here, but myresult may be a different tag than this</div>