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.