Agregar Campos Dinámicos con Php y Jquery con Arrays
El Siguiente ejemplo muestra la funcionalidad de agregar diferentes cajas de textos que serán recibidos en un array (arreglo) y se imprimirán en pantalla.
Estructura de la aplicación:
Utilizamos archivos:
- Index.php
- jquery.min
- jquery-addfield2: para agregar cajas de texto dinámicamente por javascript.
A continuación muestro el formulario para prueba.
Código Fuente del Formulario, podemos observar que las cajas de texto tienen por nombre parada[] y contenido[].
Posteriormente observamos el archivo jquery-addfield2.js que nos permitirá ir generando div con el texto, cajas de texto, a su misma vez tiene una función para quitar un div generado.
- Al inicio codificamos un evento al botón para agregar.
- Luego obtenemos el valor de atributo div_1 pero le quitamos el "div_" para quedarnos con el número (parseInt($(this).parent('div').attr('id').replace('div_','')))
- Y es ese número que va a ir incrementando y concatenándose con cada div que agregáremos con el botón.
Probemos el Ejemplo: al cargar la aplicación podemos observar un formulario con
cajas de texto y al hacer clic en el botón (+) observamos que se duplican las cajas que fijamos al inicio y el botón de ser (+) cambia a (-) el cual nos permite quitar la caja de texto posterior.
Resultados:
Descargar Ejemplo AQUÍ
Espero les sirva... Saludos.