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;
}
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 = JSON.parse(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", JSON.stringify(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.
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>