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.
Hola estoy tratando de implementar este codigo que me sirve mucho, pero no puedo hacer que los datos se guarden en un array.. y no logro que se incremente el indice i
ResponderEliminarPodrias verificar este codigo ? la idea es pasar los datos a otra pagina
Gracias
//por si te sirve aun
Eliminar$newClone.attr("id",'div_'+newID);
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("name",'name_alumno'+newID).val('');
//Borro el valor del segundo campo select(este caso es el campo de seccion)
//$newClone.children("input").eq(1).val('');
$newClone.children("select").eq(0).attr("name",'seccion'+newID).val('');
$newClone.children("select").eq(1).attr("name",'grado'+newID).val('');
como se hace para agregar mas campos
ResponderEliminary si quiero agregar solo una caja de texto y nos dos
ResponderEliminar