Estoy tratando de crear una función tal que, cuando se envía el formulario, los detalles completados por el usuario (es decir, su nombre e identificación de correo electrónico) se agregan a una lista/matriz. Y luego se muestra la lista/matriz.
Por ejemplo...
Cuando completo las credenciales por primera vez:
Nombra un
Correo electrónico: algo@abc.com
El resultado al enviar el formulario debe ser:
[["A", "algo@abc.com"]]
Cuando completo las credenciales por segunda vez:
Nombre-B
Correo electrónico: alguien@xyz.com
El resultado al enviar el formulario debe ser:
[["A", "algo@abc.com"], ["B", "alguien@xyz.com"]]
Pero cuando probé esto, no obtengo el resultado de la lista/matriz. Esto es lo que probé...
const info = []; function display(){ var nm = document.getElementById("nm").value; var em = document.getElementById("em").value; var data = [nm, em]; info.push(data); var text = document.createElement("h2"); text.innerHTML = info; } <body> <script src="script.js"></script> <form onsubmit="return(display())"> <input type="text" placeholder="Name" id="nm"> <input type="email" placeholder="Email" id="em"> <input type="submit" value="Submit"> </form> </body>La razón por la que no muestra los datos es por dos motivos.
Cada vez que envía el formulario, se actualiza la página. Para evitar esto, debe evitar la acción predeterminada del envío del botón. Lo cual se puede hacer usando la función preventDefault() a través de un evento. Mejor explicado en el código.
No ha agregado el elemento creado a ningún elemento, por lo que no se muestra en ninguna parte de la página web.
¡Ambos se pueden resolver revisando el código y su explicación a continuación!
const info = []; function display(e){ // the `e` parameter is the event passed in. e.preventDefault(); // We run the function preventDefault to prevent the page from reloading. var nm = document.getElementById("nm").value; var em = document.getElementById("em").value; var data = [nm, em]; info.push(data); var text = document.createElement("h2"); text.innerHTML = info; document.body.appendChild(text); // You haven't appended the information to // anything, here I append the created Element to the Body so it displays, but do note, that this displays // the full list, you may want to change this to display only the newer data // or perhaps append to a element that prints out each time a new user is added. //console.log(info); You can see that the array now updateds in the console. } <script src="script.js"></script> <!-- Pass the event of submitting a form as an argument --> <form onsubmit="display(event)"> <input type="text" placeholder="Name" id="nm"> <input type="email" placeholder="Email" id="em"> <input type="submit" value="Submit"> </form>