Añadir campos dinamicamente

jemarquesini · #1 (**permalink**) 23/04/2008, 13:44

Buenas a todos

Tengo una pagina que contiene un formulario con un campo select con valores del 0 al 5. La idea es que, dependiendo del numero que se seleccione, apareceran el mismo numero de campos tipo file. El codigo es el siguiente:

Código HTML:

<html>
<head>
<title></title>
<script type="text/javascript">
function actualizarCampos(num_campos){
	var total_actual = document.getElementById('total_imagenes').value;
	if (num_campos > total_actual){
		for(i=total_actual+1;i<=num_campos;i++){
			document.getElementById('campos_carga_imagenes').innerHTML += '<input type="file" name="fichero'+i+'" size="40" /><br />';
		}	
		document.getElementById('total_imagenes').value = num_campos;
	}	
	
}
</script>
</head>
<body>
<form name="camposdinamicos" method="post" action="">
<select name="seleccion_numero_imagenes" onChange="actualizarCampos(this.value)">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
</select>		
<br />
<div id="campos_carga_imagenes">
</div>
<input type="hidden" id="total_imagenes" name="total_imagenes" value="0" />
</form>
</body>
</html>

Aparentemente todo es correcto. De hecho funciona si, por ejemplo, seleccionamos el 1, apareciendo un campo tipo file. Si seleccionamos a continuacion el 2, aparece un nuevo campo. El problema viene cuando a continuacion seleccionamos el 4. En vez de aparecer dos nuevos campos, aparece solo 1. Esto ocurre siempre que elegimos una opcion que supone dos o mas campos nuevos, EXCEPTO si dicha opcion es la primera que hacemos (es decir, si nada mas cargar la pagina, seleccionamos una opcion que suponga mas de dos campos, en cuyo caso sí funciona)

Se que es un poco de lio, pero haced las pruebas y vereis.

A ver si alguno de vosotros sabe decirme donde se encuentra el error, porque yo no consigo encontrarlo. Teoricamente lo veo bien, pero algo se me escapa.

Un saludo

crujikoki · #2 (**permalink**) 23/04/2008, 15:19

Hola,

No se si he entendido lo que quieres hacer, pero mira a ver si es elgo así:

Código PHP:

  <html>

<head>

<title></title>

<script type="text/javascript">    

    

function actualizarCampos(num_campos)

{

    zona = document.getElementById('campos_carga_imagenes');

    zona.innerHTML = "";

    for(i = 0; i < num_campos; i++)

    {

            zona.innerHTML += '<input type="file" name="fichero'+i+'" size="40" /><br />';

    }    

}

</script>

</head>

<body>

<form name="camposdinamicos" method="post" action="">

<select name="seleccion_numero_imagenes" onChange="actualizarCampos(this.value)">

            <option value="0">0</option>

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option>

</select>        

<br />

<div id="campos_carga_imagenes">

</div>

</form>

</body>

</html>

He cambiado algunas cosillas. Si ves que no es lo que querias, pues coméntalo y nos lo volvemos a mirar.

Saludos.

jemarquesini · #3 (**permalink**) 23/04/2008, 16:12

Esa solucion que pones la tuve en consideracion en su momento, pero la idea era que, si en un principio querias subir sólo una imagen y la añadias, y a continuacion te daba la picá y decidias subir una segunda, tuvieras la posibilidad de agregar 1,2,3 ó 4 nuevos campos (sin que se borrara el fichero que acababas de buscar)

Tu solucion no es mala pero, si por ejemplo el usuario ha agregado una imagen, y ahora decide añadir un nuevo campo, el programa borra todo lo que tenia, y el usuario tiene que volver a buscar la primera imagen, aparte de la segunda.

Es por eso que programé la funcion actualizarCampos(). Sin embargo no funciona como yo esperaba, y sigo sin encontrar el error.

Asi que he decidido optar por otra opcion, que tambien me vale, pero me gustaria saber donde esta el fallo que hace que no funcione correctamente la funcion anterior (pura curiosidad).

JavierB · #4 (**permalink**) 24/04/2008, 09:17

Hola jemarquesini

A ver si este código te sirve de orientación:

http://www.telefonica.net/web2/blas-mar/crear.html

Saludos,

jemarquesini · #5 (**permalink**) 24/04/2008, 10:12

Es un script muy bueno y facil.

Yo habia hecho algo parecido, pero no de esa manera. Este que me pones me gusta mas.

Aun así, no he conseguido averiguar dónde estaba el fallo del primero

Saludosss