Otra alternativa para mostrar 5 campos o menos usando javascript/DOM

Gerifaltus · #1 (**permalink**) 11/10/2007, 12:08

Que tal mis estimados... de nuevo por aca, bueno esta ves les traigo un script que modifiqué, el script lo encontré en esta pag Fuente

solo que a mi no me parecio buena la funcionalidad de hacer cllick en un enlace y agregar los campos, así que me las arreglé para que funcionará mediante un combo, y para probar la pag aca esta el vinculo -> Nuevo Script

en resumen, el codigo javascript/dom que apliqué es el siguiente:

Código PHP:

   
var numero = 0; 
var optionAnterior = 0; 
 
// Funciones comunes 
c= function (tag) { // Crea un elemento 
   return document.createElement(tag); 
} 
d = function (id) { // Retorna un elemento en base al id 
   return document.getElementById(id); 
} 
 
//esta función obtiene el número de campos a agregar/eliminar y resta o suma dependiendo 
//del número elegido en el combo y por lo tanto ejecuta la funcion correspondiente 
controlador = function (combo) { 
    if(combo.value != 0){ 
       container = d('files'); 
        var optionActual = combo.selectedIndex; 
        optionAnterior = container.childNodes.length; 
        if(optionActual > optionAnterior){ 
            cantidad = optionActual-optionAnterior; 
            agregarCampo(cantidad);     
        }else{ 
            cantidad = optionAnterior - optionActual; 
            quitarCampo(cantidad); 
        } 
    } 
} 
 
//esta función se ejecuta cuando se quiere construir un campo file 
constructor = function (){ 
    span = c('SPAN'); 
       span.className = 'file'; 
       span.id = 'file' + (++numero); 
 
       field = c('INPUT');    
       field.name = 'archivos[]'; 
       field.type = 'file'; 
} 
 
//funcion para agregar un campo file 
agregarCampo = function(cantidadAdd){ 
    for(j=1;j<=cantidadAdd;j++){ 
         constructor();//llamada a constructor 
        span.appendChild(field); 
        container.appendChild(span); 
    } 
} 
//funcion para eliminar un campo file 
quitarCampo = function(cantidadQt){ 
    for(k=1;k<=cantidadQt;k++){ 
        var borrarlo = container.lastChild; 
        container.removeChild(borrarlo); 
    } 
} 
//carga el número de valores que contendrá el combo 
//solo por pereza y para no tener que escribir cada uno con option 
loadNumFiles = function(idCampo,num){ 
    var img = document.getElementById(idCampo); 
    for(i=1;i<=num;i++){ 
        img.options[img.options.length]=new Option(i,i); 
    } 
}

Y este es el codigo HTML:

Código PHP:

  <body onload="loadNumFiles('addFiles',5);"> 
 
<form name="frm" id="frm" action="" method="post" enctype="multipart/form-data"> 
        <dl> 
                <dt><label for="to" accesskey="1">Para</label></dt> 
                <dd><input type="text" name="to" id="to" size="60" /></dd> 
                
                <dt><label for="from" accesskey="2">De</label></dt> 
                <dd><input type="text" name="from" id="from" size="60" /></dd> 
                
                <dt><label for="sbj" accesskey="3">Asunto</label></dt> 
                <dd><input type="text" name="sbj" id="sbj" size="60" /></dd> 
                
                <dt><label for="msg" accesskey="4">Mensaje</label></dt> 
                <dd><textarea id="msg" name="msg" rows="7" cols="45"></textarea></dd> 
                
                <dt><label>Archivos Adjuntos:</label> 
                <select name="addFiles" id="addFiles" onchange="controlador(this)"> 
                <option value="0">No. de Imágenes</option> 
                </select></dt> 
                <dd><div id="files"></div></dd> 
                <dd><input type="reset" value="Enviar" id="postback" name="postback" accesskey="6" /></dd> 
   </dl> 
</form> 
</body>

La funcionalidad es la misma que en la página fuente, solo que yo lo hice mendiante un combo, y al momento de borrar algún campo file, se borran los ultimos, es decir si hay 5 campos files creados y solo quieres 3, entonces se borran los campos files 4 y 5, espero haberme explicado.

Saludos y agradecer no cuesta nada.