Cargar información a un formulario HTML mediante JavaScript

JavaScript

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.

Cargar información a un formulario HTML mediante 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.

Cargar información a un formulario HTML mediante JavaScript

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.

Cargar información a un formulario HTML mediante JavaScript

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.