▷ Formulario con varias capturas a otra tabla [SOLUCIONADO]

Creación de un Formulario Dinámico con Javascript y Almacenamiento en Tabla

Gestión de Formularios Dinámicos y Almacenaje en Tablas con Javascript

Cuando hablamos de formularios web, nos referimos al medio por el cual los usuarios pueden introducir datos que más tarde serán procesados por una aplicación. La programación con Javascript proporciona grandes ventajas en cuanto a la manipulación dinámica de estos datos. En esta ocasión, nos adentraremos en cómo realizar un formulario dinámico que no solo capture la información del usuario, sino que además organice y muestre esta información en otra tabla, creando así un sistema que permite a los programadores y usuarios finales gestionar datos de forma eficiente y efectiva.

Desarrollo de un Formulario Dinámico

Iniciaremos estableciendo la estructura básica de nuestro formulario. Es imperativo que el mismo cuente con los elementos necesarios para capturar la variedad de datos que deseamos. Un ejemplo básico de un formulario en HTML podría ser el siguiente:

<form id="myForm">
    <input type="text" id="nombre" placeholder="Nombre Completo" />
    <input type="email" id="email" placeholder="Correo Electrónico" />
    <button type="submit">Enviar</button>
</form>

Crear la funcionalidad para añadir los datos a otra tabla involucra una escucha del evento de envío del formulario, para así proceder a la captura de los valores ingresados y su posterior tratamiento. Este proceso puede ser observado en el fragmento de código Javascript a continuación, el cual muestra cómo podemos interceptar los datos y prepararlos para ser agregados a una tabla:

document.getElementById("myForm").addEventListener("submit", function(event){
    event.preventDefault();
    var nombre = document.getElementById("nombre").value;
    var email = document.getElementById("email").value;
    agregarDatosTabla(nombre, email);
});

function agregarDatosTabla(nombre, email){
    var tabla = document.getElementById("tablaDatos");
    var newRow = tabla.insertRow(-1);
    var cel1 = newRow.insertCell(0);
    var cel2 = newRow.insertCell(1);
    cel1.textContent = nombre;
    cel2.textContent = email;
}

Mostrando la Información en la Tabla

Hemos logrado interceptar los datos del formulario. Ahora, la clave está en presentar estos datos de una forma clara y estructurada. Un ejemplo de tabla HTML donde se pueden mostrar los datos capturados es:

<table id="tablaDatos">
    <thead>
        <tr>
            <th>Nombre Completo</th>
            <th>Correo Electrónico</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Ahora bien, es importante dotar de flexibilidad a nuestra tabla, configurándola para soportar múltiples capturas de datos. Esto implica que cada vez que se envíe el formulario, un nuevo conjunto de datos será agregado sin perder los anteriores. La función agregarDatosTabla mostrada anteriormente hace precisamente eso.

Validación de Datos del Formulario

Es sabido que una práctica esencial en el desarrollo de formularios dinámicos es la validación de los datos introducidos por los usuarios. Esto nos permite asegurar la calidad y exactitud de la información que será procesada. A continuación se presenta un ejemplo de cómo añadir una sencilla validación de datos al momento de la captura:

document.getElementById("myForm").addEventListener("submit", function(event){
    event.preventDefault();
    var nombre = document.getElementById("nombre").value;
    var email = document.getElementById("email").value;
    if(validarDatos(nombre, email)){
        agregarDatosTabla(nombre, email);
    } else {
        alert("Por favor, ingrese datos válidos.");
    }
});

function validarDatos(nombre, email){
    var expresionCorreo = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,4})+$/;
    return nombre.trim() !== "" && expresionCorreo.test(email);
}

La función validarDatos utiliza una expresión regular para validar el correo electrónico y verifica que el nombre no esté vacío tras eliminar posibles espacios en blanco.

Mejorando la Interfaz de Usuario

Para proporcionar una mejor experiencia de usuario, es esencial proveer de retroalimentación visual, tanto para confirmar que la captura de datos ha sido exitosa, como para notificar sobre errores en la validación. Asumiendo que deseamos añadir un mensaje de confirmación en nuestro formulario, podríamos hacer lo siguiente:

function agregarDatosTabla(nombre, email){
    // ... (código anterior)
    mostrarMensaje("Datos agregados con éxito.", "success");
}

function mostrarMensaje(mensaje, tipo){
    var divMensaje = document.getElementById("mensaje");
    divMensaje.textContent = mensaje;
    divMensaje.className = tipo; // Puedes definir clases de estilo para 'success' o 'error'.
}

<div id="mensaje"></div> // Insertar esto en el HTML donde quieras que aparezca el mensaje.

El manejo de mensajes informativos mejora de manera considerable la interactividad del formulario con el usuario fina