Agregar texboxs

Neoxs · #1 (**permalink**) 14/12/2004, 13:38

Hola Amigos del Foro, los molesto para ver si alguien me puede dar una mano con esto: tengo un formulario que por defecto muestra 5 input de tipo file. El tema es que necesito que a través del clic de un botón el usuario pueda ir agregando más inputs.
Espero haberme explicado bien y que alguien me pueda ayudar.
Saludos y gracias de antemano

JavierB · #2 (**permalink**) 14/12/2004, 13:46

Hola Neoxs

Echa un vistazo a este mensaje, a ver si te ayuda:

http://www.forosdelweb.com/f13/crear-campos-ocultos-para-sabios-245938/

Saludos,

Neoxs · #3 (**permalink**) 14/12/2004, 15:06

Hola JavierB

Gracias por tu pronta respuesta, estuve viendo el mensaje que me indicaste y básicamente es lo que necesito, aunque yo reemplace el "elem.type='hidden'" del ejemplo por "elem.type='file'".
El tema es que si bien, el script no tira ningún error tampoco me muestra el nuevo input
Que me puede estar faltando?
Saludos y gracias

JavierB · #4 (**permalink**) 15/12/2004, 12:17

Hola de nuevo.

No me había dado cuenta de que el mensaje que te dije era algo diferente. Se usaba con un campo type file y con el evento onchange. Después de hacer algunos cambios quedaría así:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
num=0; 
function ver(fil) { 
  obj=fil.form; 
  num++; 
  elem=document.createElement('input'); 
  elem.name='algo'+num; 
  elem.type="file"; 
  obj.appendChild(elem); 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" onclick="ver(this)" /> 
</form> 
</body> 
</html>

Espero que ahora sí que te funcione. Saludos,

Neoxs · #5 (**permalink**) 15/12/2004, 13:58

JavierB:

Gracias por responder! El problema que tengo es que todo el formulario está dentro de una tabla, y lo que yo necesito es que al apretar el botón, no solo se agregue el input, sino que además debería insertar una nueva fila en la tabla. Es esto posible?
Saludos y desde ya muchas gracias por tu ayuda

JavierB · #6 (**permalink**) 16/12/2004, 02:01

Hola Neoxs

Ahora estoy en el trabajo, pero pon aquí el formulario y la tabla que usas y si esta tarde tengo un rato le echo un vistazo. (No le digas nada a mi jefe

:)

Saludos,

Neoxs · #7 (**permalink**) 16/12/2004, 05:27

Hola JavierB
Aquí te paso lo que me pediste, y gracias por la ayuda! Quedate tranquilo que si lo veo a tu jefe, no le digo nada

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form enctype="multipart/form-data" method="post" action="upload.php" name="subirfoto">
<input type='hidden' name='usuario' value='1'>
<tr>
<td colspan="2" class="celda"><div align="center" class="titulo"><font size="2" face="Courier New, Courier, mono">Enviar Fotos para revelar </font></div></td>
</tr><tr>
<td class="celda">Foto 1: </td>
<td class="celda"><input name="foto" type="file" class="txtGde" id="foto"></td>
</tr>
<tr>
<td class="celda">Foto 2: </td>
<td class="celda"><input name="foto2" type="file" class="txtGde" id="foto2"></td>
</tr>
<tr>
<td class="celda">Foto 3. </td>
<td class="celda"><input name="foto3" type="file" class="txtGde" id="foto3"></td>
</tr>
<tr>
<td class="celda">Foto 4: </td>
<td class="celda"><input name="foto4" type="file" class="txtGde" id="foto4"></td>
</tr>
<tr>
<td class="celda">Foto 5: </td>
<td class="celda"><input name="foto5" type="file" class="txtGde" id="foto5"></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input name="enviar" type="submit" class="celda" value="Enviar">
<input type="button" name="Submit" value="Agregar Foto" onClick="Agregar(this)">
</font></div></td>
</tr>
</form>
</table>
Y aquí te paso el script que uso, en base a lo que me enviaste:
Num=5;
function Agregar(Fil){
obj=Fil.form;
Num++;
elem=document.createElement('input');
elem.type='file';
elem.name='foto'+Num;
obj.appendChild(elem);
}
Desde ya muchas gracias por tu ayuda, y disculpame la molestia
Saludos

JavierB · #8 (**permalink**) 16/12/2004, 12:06

Hola de nuevo.

Prueba esto:

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>
Num=5;
function Agregar(){
  obj=document.getElementById('tabla');
  f=document.getElementById('fila');
  Num++;
  elTr=document.createElement('tr');
  elTd=document.createElement('td');
  elTd.innerHTML='Foto '+Num+':';
  elTr.appendChild(elTd);
  elTd=document.createElement('td');
  elem=document.createElement('input');
  elem.type='file';
  elem.name='foto'+Num;
  elTd.appendChild(elem);
  elTr.appendChild(elTd);
  obj.insertBefore(elTr,f)
}</script>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="upload.php" name="subirfoto">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody id="tabla">
<input type='hidden' name='usuario' value='1'>
<tr>
<td colspan="2" class="celda"><div align="center" class="titulo"><font size="2" face="Courier New, Courier, mono">Enviar Fotos para revelar </font></div></td>
</tr><tr>
<td class="celda">Foto 1: </td>
<td class="celda"><input name="foto" type="file" class="txtGde" id="foto"></td>
</tr>
<tr>
<td class="celda">Foto 2: </td>
<td class="celda"><input name="foto2" type="file" class="txtGde" id="foto2"></td>
</tr>
<tr>
<td class="celda">Foto 3. </td>
<td class="celda"><input name="foto3" type="file" class="txtGde" id="foto3"></td>
</tr>
<tr>
<td class="celda">Foto 4: </td>
<td class="celda"><input name="foto4" type="file" class="txtGde" id="foto4"></td>
</tr>
<tr>
<td class="celda">Foto 5: </td>
<td class="celda"><input name="foto5" type="file" class="txtGde" id="foto5"></td>
</tr>
<tr id="fila">
<td colspan="2"><div align="center">
<input name="enviar" type="submit" class="celda" value="Enviar">
<input type="button" name="Submit" value="Agregar Foto" onClick="Agregar()">
</font></div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Saludos,

Neoxs · #9 (**permalink**) 16/12/2004, 13:44

Hola JaviB!
La verdad es que no sé cómo agradecerte! Te has portado de 10 conmigo!
Estuve probando el código que me enviaste, y me arroja el siguiente error: "Argumento no válido" en esta línea :"obj.insertBefore(elTr,f)".
Disculpa que te siga molestando, y nuevamente gracias por tu ayuda.
Saludos

P.D.: cualquier cosa, mi MSN es [email protected]

Neoxs · #10 (**permalink**) 16/12/2004, 13:49

Hola de nuevo JavierB:
Te cuento que probe el código que me enviaste en un html en blanco, es decir, únicamente con el código que me pasaste y funciona perfecto.
Por qué me tira ese error en el php que uso? Si lo quieres probar la dirección es www.cyper-network.com.ar/Paisajes, en la opción "Revelado" (deberías registrarte como usuario para que el sistema te envie por mail la contraseña).
Si puedes hecharle un vistazo te lo agradeceré.
Saludos y disculpame las molestias

JavierB · #11 (**permalink**) 17/12/2004, 11:24

Alucinado estoy

Tu página funciona bien en Firefox, donde falla es con el Explorer, pero no se por qué puede ser. Si se me ocurre algo te lo cuento.

Saludos,

Neoxs · #12 (**permalink**) 20/12/2004, 11:59

Hola JavierB:

Disculpa mi demora en responder. Lo que me llama la atención es que si tomo el código que me enviaste y lo pego en un html en blanco, funciona de manera perfecta en I. Explorer.... La falla se da cuando lo pruebo dentro del php....

Seguiré investigando, y si encuentro algo te aviso
Saludos y muchas gracias por tu invalorable ayuda

ratamaster · #13 (**permalink**) 15/09/2005, 06:41

Hola JavierB.
Te cuento que estoy usando tu script para crear input files dinamicamente, pero me faltaría una funcionalidad que no se como hacer.
Este es el códio con unas pequeñas modificaciones que le hice para agregarle un input text al lado de los campos file

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'); 
        elTd=document.createElement('td'); 
        elTd.innerHTML='Foto '+Num+':'; 
        elTr.appendChild(elTd); 
        elTd=document.createElement('td'); 
 
        elem=document.createElement('input'); 
        elem.type='file'; 
        elem.name='foto'+Num; 
 
        elemTxt=document.createElement('input'); 
        elemTxt.type='textarea'; 
        elemTxt.name='txt'+Num; //esto lo agregué 
        elemTxt.size='50'; 
 
        elTd.appendChild(elem); 
        elTd.appendChild(elemTxt); 
 
        elTr.appendChild(elTd); 
        obj.insertBefore(elTr,f) 
        } 
 
/*esta función la cree, pero no es dinámica, necesito alguna manera que  
cuando haga el submit, la función sepa cuantos campos Foto fueron  
llenados*/ 
function Values(subirfoto){ 
        valores=""; 
        for(i=1;i<=2; i++){//en este caso lo hice para dos campos nada más 
            valores = valores + eval("subirfoto.txt"+i).value+","; 
        } 
        alert(valores); 
        } 
 
</script> 
</head> 
<body> 
<form enctype="multipart/form-data" method="post" action="#" name="subirfoto" onSubmit="return Values(this)"> 
<table width="100%" border="1" cellspacing="0" cellpadding="0"> 
 <tbody id="tabla"> 
  <input type='hidden' name='usuario' value='1'> 
   <tr> 
    <td colspan="2" class="celda"> 
     <div align="center" class="titulo"> 
      Enviar Fotos para revelar 
     </div> 
    </td> 
   </tr> 
 
     <tr id="fila"> 
      <td colspan="2"> 
    <div align="center"> 
    <input name="enviar" type="submit" class="celda" value="Enviar"> 
    <input type="button" name="Submit" value="Agregar Foto" onClick="Agregar()"> 
    </div> 
    </td> 
    </tr> 
   </tbody> 
  </table> 
 </form> 
</body> 
</html>

Yo no se cuantas fotos un usario puede subir, por lo tanto, no se cuantos Foto1,Fotos2, etc, pueda haber, y yo necesitaría que cuando el usuario cliquee Enviar, se cree un array con todo los valores ingresados.
Espero haberme explicado bien.

Gracias

filthkyory · #14 (**permalink**) 15/03/2009, 13:43

señores.... buen día....

con respecto al discución que llevaban acabo con respecto al codigo y pues como soy un novato en esto de la programacion web, les comento lo que me sucede, es que estoy haciendo mi tesis... y pues estamos trabajando en php y mysql, la vaina es que necesito ese mismo script pero que eso mismo lo haga el php, como tengo todo estructurado por funciones, no se si ese codigo montado en una funcion de cabecera en php que contiene las etiquetas de <head> se está bloqueando....? por que trate de montarlo y pues no me funciono.....

mejor dicho es asi....

<?

<?

function cabe_admon($title)
{
//cabecera del panel de administracion
?>
<html>
<head>
<title> <?php echo $title; ?></title>

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

elem=document.createElement('input');
elem.type='file';
elem.name='foto'+Num;

elemTxt=document.createElement('input');
elemTxt.type='textarea';
elemTxt.name='txt'+Num; //esto lo agregué
elemTxt.size='50';

elTd.appendChild(elem);
elTd.appendChild(elemTxt);

elTr.appendChild(elTd);
obj.insertBefore(elTr,f)
}
</script>

<style>
body {font-family: arial; font-size: 13px align: center}
li, td {font-family: arial; font-size: 13 px}
hr {color: blue; width="100%"; text-align= "left"}
</style>
</head>
<body >
<hr />
<table width="100%" bgcolor="#000000">
<tr><td width="60%" align="center"><img src="images/postes.jpg"></td>
<td width="25%"><font color="#FFFFFF"><h4>Colombiana Betón Centrifugado COBEC S.A.<br><br>Panel de Administración.</h4></font></td>
<td width="25%" align="center" bgcolor="#CCCCCC"><img src="images/logo_cobec.png"></td></tr></table>

<hr />
<?
}

la vaina o la pregunta es si esto se puede hacer igual pero con codigo php o obligatoriamente hay que hacerlo con javascript....? o por otro lado si por el hecho de estar el html en una funcion php, bolquea el script.....?

agradezco su atencion, y su pronta respuesta

salu2.....!

JavierB · #15 (**permalink**) 15/03/2009, 13:50

El mensaje original es de hace más de 3 años. Por favor, no reviváis temas tan antiguos.

Saludos,