How do you get information from a form and put it in a table with HTML, CSS, and Javascript?

Question

I am new to HTML/CSS/JS and I wanted to know how to get information from a form and store it in a table.

For example, the user will type their name in the form and press a create button. This will make a table that has the user's name in it. However, I also want the data to stay in the table even after the tab is refreshed. I believe this requires a server. Please point me in the right direction. Below is my HTML followed by my JS.

Clarifications: When the tab is refreshed, other people who visit the website should be able to see the data in the table that the user entered. Every time the user presses enter on the table, it should add a new row without deleting the previous one.

I believe that I have to use a server, so can anyone tell me how to use it in conjunction with what I want to do as stated above? Thanks!

HTML

<form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"<br>
</form>


JS

function refresh() {
    var table = document.getElementById("infotable");
    let row = table.insertRow(1);
    let cell1 = row.insertCell(0);
    cell1.innerHTML = document.getElementById("name").value;
}

Answer 1

If you want long term storage, yes, you'll want to use some kind of back end solution with a database. However, there are other options, like cookies and localStorage.

This won't work in a snippet here due to security constraints, but it will keep the users input in localStorage and show them each time they come to the page

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

<form onsubmit='do_fn()'>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"<br>
        <button type='submit'>submit</button>
</form>

<div class='showname' hidden>Your name is <span></span></div>

<script>
  function do_fn() {
    localStorage.setItem('name', document.querySelector('#name').value);
  }

  // here is where you can detect it when they come back.
  window.addEventListener('DOMContenetLoaded', function() {
    let n = localStorage.getItem('name');
    let d = document.querySelector('.showname')
    if (n && n!='')  {
      d.removeAttribute('hidden');
      d.querySelector('span').innerText = n;
    }
  })
</script>

Answer 2

Well, actually you don't need a server. You can save the data in localStorage . Check out this commented example:

 const result = document.getElementById("result"); const saved = localStorage.getItem("save"); // get saved items if (saved) { const t = `<table> <tr> <th>Name</th> <th>Age</th> <th>Hobby</th> </tr> <tr> <td>${saved.name}</td> <td>${saved.age}</td> <td>${saved.hobby}</td> </tr> </table>`; result.innerHTML = t; // show the result } const form = document.getElementById("my-form"); // get the form element form.addEventListener("submit", e => { // detect once the submit button is clicked e.preventDefault(); // Don't allow the form to redirect to another page const { elements } = form; // Get input elements so we can retrieve their values const output = { name: elements.name.value, // get name age: +elements.age.value, // get age; the "+" in front converts it to a number hobby: elements.hobby.value // get hobby }; localStorage.setItem("save", output); // save output to localStorage // Create a template const template = `<table> <tr> <th>Name</th> <th>Age</th> <th>Hobby</th> </tr> <tr> <td>${output.name}</td> <td>${output.age}</td> <td>${output.hobby}</td> </tr> </table>`; result.innerHTML = template; // show the result });

 <form id="my-form"> <:-- some dummy inputs --> <label for="name">Name.</label> <input type="text" id="name" name="name" placeholder="Enter your name..:"> <br> <label for="age">Age.</label> <input type="number" id="age" name="age" placeholder="Enter your age..:"> <br> <label for="hobby">Hobby.</label> <input type="text" id="hobby" name="hobby" placeholder="Enter your hobby..."> <br> <input type="submit" /> </form> <div id="result"></div>

Note: localStorage won't work in the above example because the embed doesn't allow it.