Conceptos de DHTML

Un lugar donde podemos aplicar el DHTML es en la creación de controles de un formulario en forma dinámica.

Veamos un ejemplo donde podemos utilizar esta herramienta, supongamos que necesitamos ingresar nuestro nombre y el nombre de nuestros hijos. Podemos sin duda disponer un control de tipo text para el ingreso de nuestro nombre y varios otros controles de tipo text para los nombres de los hijos (¿pero cuántos?)

Podemos solucionar esta situación disponiendo un botón para crear un elemento de tipo input cada vez que sea presionado.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <form method="post" action="#">
        Ingrese su nombre:
        <input type="text" name="nombre" id="nombre"><br>
        <fieldset id="fs">
            <legend>Ingrese los nombres de sus hijos</legend>
            <input type="button" onclick="agregarHijo()" value="Presione el botón para agregar un hijo.">
            <br>
        </fieldset>
        <input type="submit" value="Registrar">
    </form>
    <script src="funciones.js"></script>
</body>

</html>

luego el archivo funciones.js

let cantidad = 0

function agregarHijo() {
    cantidad++
    let nuevohijo = document.createElement('input')
    nuevohijo.type = 'text'
    nuevohijo.name = 'nombre' + cantidad
    nuevohijo.id = 'nombre' + cantidad
    document.getElementById('fs').appendChild(nuevohijo)
    document.getElementById('fs').appendChild(document.createElement('br'))
}

Algunas consideraciones que debemos tener en cuenta son:
La definición de una variable global contador, que nos permite definir para las propiedades name y id nombres distintos:

let cantidad = 0

La función agregarHijo, incrementa el contador y crea un nodo de tipo elemento:

    cantidad++
    let nuevohijo = document.createElement('input')

Seguidamente, inicializamos las propiedades type, name y id:

    nuevohijo.type = 'text'
    nuevohijo.name = 'nombre' + cantidad
    nuevohijo.id = 'nombre' + cantidad

Luego obtenemos la referencia del elemento fieldset y le añadimos el elemento que acabamos de crear:

    document.getElementById('fs').appendChild(nuevohijo)

Por último, creamos un nodo elemento de tipo br y lo añadimos también al fieldset para que cada control text se muestre uno debajo de otro:

    document.getElementById('fs').appendChild(document.createElement('br'))

Tengamos en cuenta que cuando se presiona el botón registrar no sucede nada ya que no definimos una página en el servidor que procese los datos del formulario.

24 - Creación de controles de tipo input dinámicamente.

Retornar