Cuando manejamos formularios en HTML, es muy común necesitar manejar los valores de los controles que hacen parte de estos; esta labor podemos llevarla a cabo con JavaScript de forma fácil y sin consumir muchos recursos, siendo este lenguaje de programación el indicado para manejar los elementos del DOM, veremos cómo cargar información a un formulario HTML mediante JavaScript, función que sin duda ayudará a complementar tus proyectos Web.
Cargar información a un formulario HTML mediante JavaScript
Para este ejemplo utilizaremos el siguiente formulario de ejemplo, al cual enviaremos datos desde una función JavaScript.
Para lograr el formulario anterior hacemos uso del siguiente código y lo guardamos como archivo .html utilizando bloc de notas.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <fieldset> <legend>Formulario</legend> <label for="td">Tipo documento</label> <br> <select id="td"> <option value="CC">Cédula</option> <option value="TI">Tarjeta de Identidad</option> <option value="CE">Cédula de Extranjería</option> <option value="PA">Pasaporte</option> </select> <br> Nombres:<br> <input type="text" id="txtNombre"><br> Apellidos:<br> <input type="text" id="txtApellido"> <br> <label for="rgenero">Genero:</label><br> <input type="radio" name="genero" value="M" checked> Masculino<br> <input type="radio" name="genero" value="F"> Femenino<br> <br> <label for="txtDescripcion">Descripción:</label> <br> <textarea id="txtDescripcion"></textarea> <br> <button type="button" onclick="Cargar();">Cargar Información</button> </fieldset> </form> </body> </html>
Nota: Si cuentas con un formulario diseñado, solo deberás ajustar el código JavaScript a tus controles del formulario.
Para llevar a cabo la asignación de valores de los controles debemos basarnos en el «id» que hemos asignado para cada uno, a continuación el código JavaScript para asignar los valores al presionar el botón.
Cabe recordar: el código JavaScript deberás incluirlo luego del cierre de la etiqueta body en el HMTL; posteriormente al pulsar el botón «Cargar Información», podrás ver como se asignan los valores a tus controles muy rápidamente.
Por último, deberás tener presente que cada control maneja formas diferentes de asignación, investiga acerca del control para que puedas establecer la propiedad correcta, así mismo si usas JQuery podrás hacer de forma fácil la asignación de los valores.
Hola Ivan.
Bien explicado pero que pasa si lo que quiero cargar en el formulario es un dato o información que se encuentra almacenado en IndexedDB?
Lo he intentado de esta forma, pero no me funciona:
function modify() {
var active = dataBase.result;
var data = active.transaction([«pacientes»], «readwrite»);
var object = data.objectStore(«pacientes»);
document.getElementById(«id»).value = object.get(id);
document.getElementById(«nombres»).value = object.get(nombres);
document.getElementById(«apellidos»).value = object.get(apellidos);
document.getElementById(«tmovil»).value = object.get(tmovil);
}
//El llamado a la función la hago mediante el boton:
Modificar
//El error que meda al presionar el boton MODIFICAR es este:
Uncaught ReferenceError: id is not defined
at modify (indexedDB.js:129)
at HTMLButtonElement.onclick (index.html:1)
modify @ indexedDB.js:129
onclick @ index.html:1