agregar campo dinamicamente jquery

[edward18_1]

Hola voy a usar una clase de php que es para subir imagenes y todo eso! y el form tiene unos campos los cuales me gustaria agregarle mas pero dinamicamente! o sea con jquery como se puede hacer ?

<form name="form3" enctype="multipart/form-data" method="post" action="upload.php">
<p><input type="file" size="32" name="my_field[]" value="" /></p>
<p><input type="file" size="32" name="my_field[]" value="" /></p>
<p><input type="file" size="32" name="my_field[]" value="" /></p>
<p class="button"><input type="hidden" name="action" value="multiple" />
<input type="submit" name="Submit" value="upload" /></p>
</form>

como pueden ver esos inputs todos son iguales!...y tienen hasta el mismo nombre! pero necesito agregar mas de esos! como se hace ? gracias

[gebremswar]

Hola, que tal edward18_1

Pues has lo siguiente:
Agregale un id a tu formulario para poder identificarlo con JQuery (yo le puse id="subir")
Agrega un botón nuevo (o cualquier elemento que quieras) a tu formulario destinado a hacer la acción "agregar", puedes llamarlo como quieras, y a este deberás agregarle una función al evento onClick. También puedes usar los selectores de JQuery para manejar los eventos y reemplazar el uso de la función en evento onclick.

Esta seria la función:

Código Javascript:

function agregar(){
    $('#subir').append('<p><input type="file" size="32" name="my_field[]" value=""></p>');
}
 

Utiliza el metodo append() para manipular los elementos del DOM en este caso para añadir un elemento, el cual será el que envíes como parámetro, que se agregara al final de los demás. Si desearas agregarlo al principio puedes usar el metodo prepend().

Al utilizar ambos métodos nombrados anteriormente surge la necesidad de eliminar algún elemento no deseado para lo cual puedes utilizar el método remove().

Puedes consultar la api de jquery para más detalles de cada método.

.append()
http://api.jquery.com/append/

.prepend()
http://api.jquery.com/prepend/

.remove()
http://api.jquery.com/remove/