Soy nuevo en HTML/CSS/JS y quería saber cómo obtener información de un formulario y almacenarla en una tabla.
Por ejemplo, el usuario escribirá su nombre en el formulario y presionará un botón de creación. Esto creará una tabla que tendrá el nombre del usuario. Sin embargo, también quiero que los datos permanezcan en la tabla incluso después de actualizar la pestaña. Creo que esto requiere un servidor. Por favor, indícame en la dirección correcta. A continuación se muestra mi HTML seguido de mi JS.
Aclaraciones: cuando se actualiza la pestaña, otras personas que visitan el sitio web deberían poder ver los datos en la tabla que ingresó el usuario. Cada vez que el usuario presiona enter en la tabla, debe agregar una nueva fila sin eliminar la anterior.
Creo que tengo que usar un servidor, entonces, ¿alguien puede decirme cómo usarlo junto con lo que quiero hacer como se indicó anteriormente? ¡Gracias!
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; }Bueno, en realidad no necesitas un servidor. Puede guardar los datos en localStorage . Mira este ejemplo comentado:
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>Nota: localStorage no funcionará en el ejemplo anterior porque la inserción no lo permite.
Si desea almacenamiento a largo plazo, sí, querrá usar algún tipo de solución de back-end con una base de datos. Sin embargo, hay otras opciones, como cookies y almacenamiento local.
Esto no funcionará en un fragmento aquí debido a restricciones de seguridad, pero mantendrá la entrada de los usuarios en localStorage y los mostrará cada vez que ingresen a la página.
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>