Hacer Pregunta

Conecta

1voto

Formulario que guarde los datos de un json

preguntó
Web
1219 Vistas
1 Respuestas
abierta

crea un formulario que guarde los datos de un json que tenga 7 campos y que se guarde en un arreglo y que se visualice en un div

por anónimo (130 puntos) en Web

0voto

anónimo comentado

la necesito para hoy a las 12

por anónimo (130 puntos)

0voto

Peter comentado

Jajajajajaja!

por Peter (150.480 puntos)

1 Respuesta

0voto

ArtEze Puntos1180

Bien, le pregunté a Chat GPT y me dio esta respuesta.

En esa época no había Chat GPT, pero dejo la respuesta igual.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario y Visualización de JSON</title>
<style>
    #datos-json {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
    }
</style>
</head>
<body>
    <h2>Formulario de Datos</h2>
    <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required><br><br>

        <label for="apellido">Apellido:</label>
        <input type="text" id="apellido" name="apellido" required><br><br>

        <label for="edad">Edad:</label>
        <input type="number" id="edad" name="edad" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="telefono">Teléfono:</label>
        <input type="tel" id="telefono" name="telefono"><br><br>

        <label for="direccion">Dirección:</label>
        <input type="text" id="direccion" name="direccion"><br><br>

        <label for="ciudad">Ciudad:</label>
        <input type="text" id="ciudad" name="ciudad"><br><br>

        <button type="button" onclick="guardarDatos()">Guardar</button>
    </form>

    <h2>Datos Guardados</h2>
    <div id="datos-json"></div>

    <script>
        let datos = [];

        function guardarDatos() {
            // Obtener valores del formulario
            const nombre = document.getElementById('nombre').value;
            const apellido = document.getElementById('apellido').value;
            const edad = document.getElementById('edad').value;
            const email = document.getElementById('email').value;
            const telefono = document.getElementById('telefono').value;
            const direccion = document.getElementById('direccion').value;
            const ciudad = document.getElementById('ciudad').value;

            // Crear objeto JSON
            const nuevoDato = {
                nombre: nombre,
                apellido: apellido,
                edad: edad,
                email: email,
                telefono: telefono,
                direccion: direccion,
                ciudad: ciudad
            };

            // Agregar objeto al arreglo de datos
            datos.push(nuevoDato);

            // Limpiar formulario
            document.getElementById('formulario').reset();

            // Mostrar datos guardados en el div
            mostrarDatos();
        }

        function mostrarDatos() {
            let html = '<ul>';
            datos.forEach(dato => {
                html += `<li>Nombre: ${dato.nombre}, Apellido: ${dato.apellido}, Edad: ${dato.edad}, Email: ${dato.email}, Teléfono: ${dato.telefono}, Dirección: ${dato.direccion}, Ciudad: ${dato.ciudad}</li>`;
            });
            html += '</ul>';
            document.getElementById('datos-json').innerHTML = html;
        }
    </script>
</body>
</html>
por ArtEze (1.180 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta