Agregar campos usando AJAX jquery

Seguro hemos visto algunas páginas ajax en las que piden por ejemplo correo luego podemos apretar un botón «añadir» y se agrega un campo más para insertar un nuevo correo y asi cuantos deseemos; también hay algunos más complicados en los que puedes añadir por ejemplo detalles de tu experiencia laboral en un curriculum.

La idea es los casos mencionados es exactamente la misma (campos mas, campos menos) por cuestión de espacio y tiempo explicaré como funciona la más sencilla para ello debemos tener claros algunos conceptos previos.

Arrays de controles HTML

Como no sabemos cuantos campos quiera añadir el usuario, debemos estar preparados para recibir cualquier cantidad de datos por lo cual vamos a usar un array de controles como este:
[cc lang=»html»]

[/cc]
Lo unico distinto con cualquier otro control es que al final del nombre uso unos corchetes.

Manejando arrays de controles con PHP

Normalmente en PHP los campos recibidos llegan con POST o GET según corresponda y podemos manejarlo directamente pero con los arrays se manejan un poco distinto, algo así:
[cc lang=»php»]
‘;
}
?>
[/cc]

¿Cómo agregar campos?

Para esto voy a usar un link que invoque a una funcion javascript que agrega el campo adicional
[cc lang=»html»]
Agregar
[/cc]

La función usando jquery es muy sencilla basta usar «attend» para que al final agregue un campo adicional
[cc lang=»javascript»]

[/cc]

El tema de la presentación o de usar alguna imagen ya depende de nuestra hoja de estilos aunque en este ejemplo he usado un sólo campo es posible usando el mismo código para añadir bloques completos de campos.

Ver demo   Descargar

——– Actualización ——-
Varios lectores me preguntaban como hago para borrar los campos ingresado, eso lo ven AQUI