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
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
1 Respuesta
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 favor, accede o regístrate para responder a esta pregunta.
Actividad Reciente
ArtEze respondió hace 2 días
Alguien sabe, no me ignorenArtEze seleccionó una respuesta hace 3 días
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 3 días
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó hace 3 días
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 3 días
No me deja instalar OracleArtEze respondió hace 3 días
Formulario que guarde los datos de un jsonArtEze comentó hace 3 días
Script /boot/ scrapingSantiago2610 comentó Mar 23
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scraping
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150470 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos