Duplicación de campos.

hemiliano · #1 (**permalink**) 07/10/2005, 09:04

Bueno, el caso que tengo es el siguiente.
Tengo un formulario donde el usuario puede ingresar fotos. Es decir, a travez de un campo tipo 'input type="file"' la persona puede seleccionar el archivo.
Ahora, el usuario en el formulario puede ingresar hasta 10 archivos.
En este momento estan listados uno debajo del otro estos input, pero lo que quiero es que se muestre uno, y que debajo de él haya un boton que diga "Agregar otra foto" y que al presionarlo aparezca el siguiente campo con este boton de "agregar otra foto" debajo de él, y que pueda agregar hasta 10 de estos campos.
Estuve buscando pero no encontré nada.
Recuerdo que había hecho algo así (lo había sacado de algún sitio), pero no me acuerdo de donde.
Alguien sabe como hacerlo?.

JavierB · #2 (**permalink**) 07/10/2005, 09:07

Hola hemiliano

El código que puse en este mensaje hace justamente eso:

http://www.forosdelweb.com/f13/agregar-texboxs-254300/

Saludos,

ratamaster · #3 (**permalink**) 07/10/2005, 09:34

Con respecto a este tópico, yo tengo el siguiete código, el problema es que no encontré la manera de agregarle un atributo class:

Código:

Num=0;
function Agregar(){
        obj=document.getElementById('tabla');
        f=document.getElementById('fila');
        Num++;
        elTr=document.createElement('tr');
        elTd=document.createElement('td');
        elTd.innerHTML='valor '+Num+':';
        elTr.appendChild(elTd);
        elTd=document.createElement('td');

        elem=document.createElement('input');
        elem.type='valor';
        elem.name='valor'+Num;
		
        elTd.appendChild(elem);


        elTr.appendChild(elTd);
        obj.insertBefore(elTr,f)
        return Num;
}

Alguien sabe como podría darle al input text la clase "miClase"

gracias

hemiliano · #4 (**permalink**) 07/10/2005, 09:54

Me funciona re bien!
Lo que me falta es colocar un boton de Remove, es decir un boton (o texto) que me permita quitar el input.
Pero no que vaya quitando de abajo para arriba sino que elimine el que yo quiero.
Se entiende?.
Estoy intentando hacerlo y si llego a buen puerto lo posteo, pero si alguien lo tiene buenísimo!.

JavierB · #5 (**permalink**) 07/10/2005, 09:59

Cita:

Iniciado por ratamaster

Alguien sabe como podría darle al input text la clase "miClase"

elem=document.createElement('input');
elem.className='miclase';
elem.type='valor'; // esta línea no la entiendo

Saludos,

ratamaster · #6 (**permalink**) 07/10/2005, 10:39

muchas gracias

elem.type='valor'; //si, eso es un error, gracias no me había dado cuenta

con referencia a lo de remove, sería interesante que lo postees!!

gracias

JavierB · #7 (**permalink**) 07/10/2005, 10:56

Hola de nuevo.

He añadido algunas líneas al código para que se puedan borrar elementos:

Código PHP:

  <html>
<head>
<script type="text/javascript">
num=0;
function ver(fil) {
  obj=fil.form;
  num++;
  elem=document.createElement('input');
  elem.id='algo'+num;
  elem.name='algo'+num;
  elem.type="file";
  obj.appendChild(elem);
  // añadir boton para borrar
  elem=document.createElement('input');
  elem.type='button';
  elem.value='X';
  elem.setAttribute('borrar','algo'+num);
  elem.onclick = function() {
    document.forms[0].removeChild(document.getElementById(this.getAttribute('borrar')));
    document.forms[0].removeChild(this);
  }
  obj.appendChild(elem);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="ver(this)" />
</form>
</body>
</html>

ratamaster · #8 (**permalink**) 07/10/2005, 10:58

mil trillones de gracias!!

....y me quedo corto

JavierB · #9 (**permalink**) 07/10/2005, 11:20

Gracias por ser tan agradecido

Hasta pronto

ratamaster · #10 (**permalink**) 07/10/2005, 12:08

Yo diría hasta demasiado pronto:
Resulta que al hacer clik me salta un error y no me doy cuenta donde está, creo que es en el tema de borrar las celdas que creo, sabes donde está??

Código PHP:

  Num=0;

function Agregar(fil){

    obj=fil.form;

        obj=document.getElementById('tabla');

        f=document.getElementById('fila');

        Num++;

        elTr=document.createElement('tr');

        elTd=document.createElement('td');

        elTd.innerHTML='valor '+Num+':';

        elTr.appendChild(elTd);

        elTd=document.createElement('td');

 
        elem=document.createElement('input');

        elem.type='text';

        elem.name='valor'+Num;

        elem.id='valor'+Num;

        

        // añadir boton para borrar

        elem1=document.createElement('input');

        elem1.type='button';

        elem1.value='X';

        elem1.setAttribute('borrar','valor'+Num);

        elem1.onclick = function() {

        document.forms[0].removeChild(document.getElementById(this.getAttribute('borrar')));

        document.forms[0].removeChild(this);

        }

                

        

        

        elTd.appendChild(elem);

        elTd.appendChild(elem1);

 
 
        elTr.appendChild(elTd);

        obj.insertBefore(elTr,f)

        return Num;

}

 
<table width="650" border="0" cellspacing="0" cellpadding="0">

<tbody id="tabla"><tr id="fila"><td>&nbsp;</td>

<td><table width="500">

<tr>

<td><input type="button" name="Submit" value="Agregar Valor" onClick="Agregar(this)">

<input type="hidden" name="txt"><input type="hidden" name="num"></td>

</tr>

</table>

gracias

JavierB · #11 (**permalink**) 07/10/2005, 12:48

Rehola.

Lo que ocurre es que en el código que te puse los elementos se añaden a un formulario y tú estás usando una tabla, así que hay que hacer algunos cambios:

Código PHP:

  <html>
<head>
<title>Untitled</title>
<script>
Num=0;
function Agregar(){
        obj=document.getElementById('tabla');
        f=document.getElementById('fila');
        Num++;
        elTr=document.createElement('tr');
        elTr.id='valor'+Num;
        elTd=document.createElement('td');
        elTd.innerHTML='valor '+Num+':';
        elTr.appendChild(elTd);
        elTd=document.createElement('td');

        elem=document.createElement('input');
        elem.type='text';
        elem.name='valor'+Num;
        
        // añadir boton para borrar
        elem1=document.createElement('input');
        elem1.type='button';
        elem1.value='X';
        elem1.setAttribute('borrar','valor'+Num);
        elem1.onclick = function() {
          obj=document.getElementById('tabla');
          obj.removeChild(document.getElementById(this.getAttribute('borrar')));
        }
        
        elTd.appendChild(elem);
        elTd.appendChild(elem1);

        elTr.appendChild(elTd);
        obj.insertBefore(elTr,f)
        return Num;
}
</script>
</head>
<body>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody id="tabla"><tr id="fila"><td>&nbsp;</td>
<td><table width="500">
<tr>
<td><input type="button" name="Submit" value="Agregar Valor" onClick="Agregar()">
<input type="hidden" name="txt"><input type="hidden" name="num"></td>
</tr>
</table> 
</body>
</html>

Saludos,

ratamaster · #12 (**permalink**) 07/10/2005, 12:52

sin palabras.... :)