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
mchojrin respondió Dic 9
Ayuda , necesito mostrar datos creados solo por el…alyvrs preguntó Oct 19
Ayuda , necesito mostrar datos creados solo por el…ManHol preguntó Jul 9
pasar un archivo de excel a csv en pythonArtEze respondió Abr 24
Alguien sabe, no me ignorenArtEze seleccionó una respuesta Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
No me deja instalar OracleArtEze respondió Abr 24
Formulario que guarde los datos de un jsonArtEze comentó Abr 24
Script /boot/ scraping
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150480 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos