Foros del Web - Vaciar un campo de formulario

Foros del Web

Foros del Web (http://www.forosdelweb.com/)

- Javascript (http://www.forosdelweb.com/f13/)

- - Vaciar un campo de formulario (http://www.forosdelweb.com/f13/vaciar-campo-formulario-452934/)

AnnaTPC

28/12/2006 13:14

Vaciar un campo de formulario

Hola! Esta tarde hice una pregunta en otra seccion de esta web para saber como tenia que hacer para validar un campo, en este caso un campo "archivo", queria que solo pudieran escogerse imagenes. Como bien me han indicado, fui al FAQ 140 de Javascript y mi problema se ha solucionado :).
Ahora querria que si no se selecciona un archivo de imagen, aparte de salir la alerta, el campo se vacie, con la finalidad de que no salga mas veces el mensajito, ya que es un pokito molesto. En el codigo del FAQ hay algo asi "tField.value="";", no se si sera esto pero en todo caso, no me funciona.
A ver si me podeis echar una manita. Muchisimas gracias.

JavierB

28/12/2006 13:29

Re: Vaciar un campo de formulario

Hola [B]Hola AnnaTPC

Por seguridad, no se puede cambiar el value de un file con código. Creo que fue caricatos (¡Hola! :adios:) el que comentó en otro mensaje que se puede copiar el campo de archivo y borrar el anterior. Te he preparado une jemplo:

Código PHP:

   <html>
<head>
<script type="text/javascript">
function validar(obj) {
  archi = obj.value;
  ext = archi.split('.');
  ext = ext[ext.length-1];
  if (ext != 'jpg') { // crear file nuevo y borrar anterior
    fil = obj.cloneNode(false);
    fil.value = '';
    obj.form.insertBefore(fil,obj);
    obj.form.removeChild(obj);
  }
}
</script>
</head>
<body>
<form>
<input type="file" name="pepe" onchange = "validar(this)" />
</form>
</body>
</html>

Saludos, :adios:

AnnaTPC

28/12/2006 14:05

Re: Vaciar un campo de formulario

Parece que algo va mal :( . Te dejo aqui el codigo a ver si tu puedes ver el fallo oki?

Código PHP:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function LimitAttach(tField,iType) { 

file=tField.value; 

if (iType==1) { 

extArray = new Array(".gif",".jpg",".png"); 

} 

if (iType==2) { 

extArray = new Array(".swf"); 

} 

if (iType==3) { 

extArray = new Array(".exe",".sit",".zip",".tar",".swf",".mov",".hqx",".ra",".wmf",".mp3",".qt",".med",".et"); 

} 

if (iType==4) { 

extArray = new Array(".mov",".ra",".wmf",".mp3",".qt",".med",".et",".wav"); 

} 

if (iType==5) { 

extArray = new Array(".html",".htm",".shtml"); 

} 

if (iType==6) { 

extArray = new Array(".doc",".xls",".ppt"); 

} 

allowSubmit = false; 

if (!file) return; 

while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1); 

ext = file.slice(file.indexOf(".")).toLowerCase(); 

for (var i = 0; i < extArray.length; i++) { 

if (extArray[i] == ext) { 

allowSubmit = true; 

break; 

} 

} 

if (allowSubmit) { 

} else { 

alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + "\nPor favor seleccione un nuevo archivo");

tField.value=="";

} 

}  

 
</script>

<script type="text/javascript">

function validar(obj) {

  archi = obj.value;

  ext = archi.split('.');

  ext = ext[ext.length-1];

  if (ext != 'jpg') { // crear file nuevo y borrar anterior

    fil = obj.cloneNode(false);

    fil.value = '';

    obj.form.insertBefore(fil,obj);

    obj.form.removeChild(obj);

  }

}

</script>

</head>

 
<body>

 
<div align="center">

  <form action="formulario.php" method="post" enctype="multipart/form-data" name="form1" id="form1">

    <table width="88%" border="0">

      <tr>

        <td width="40%">Nombre:</td>

        <td width="60%"><label>

          <input name="nombre" type="text" id="nombre" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Apellidos</td>

        <td><label>

          <input name="apellidos" type="text" id="apellidos" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Fecha de Nacimiento: </td>

        <td><label>

          <input name="fnacimiento" type="text" id="fnacimiento" value="DD/MM/AAAA" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>DNI:</td>

        <td><label>

          <input name="dni" type="text" id="dni" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Direcci&oacute;n:</td>

        <td><label>

          <input name="direccion" type="text" id="direccion" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Tel&eacute;fono:</td>

        <td><label>

          <input name="telefono" type="text" id="telefono" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Poblaci&oacute;n:</td>

        <td><label>

          <input name="poblacion" type="text" id="poblacion" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Provincia:</td>

        <td><label>

          <input name="provincia" type="text" id="provincia" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>C&oacute;digo Postal: </td>

        <td><label>

          <input name="cp" type="text" id="cp" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Pa&iacute;s:</td>

        <td><label>

          <input name="pais" type="text" id="pais" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Nick del foro: </td>

        <td><label>

          <input name="nick" type="text" id="nick" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>E-mail:</td>

        <td><label>

          <input name="email" type="text" id="email" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Fecha de ingreso de la cuota: </td>

        <td><label>

          <input name="fingreso" type="text" id="fingreso" value="DD/MM/AAAA" size="40" />

        </label></td>

      </tr>

      <tr>

        <td>Comprobante del ingreso: </td>

        <td><label>

          <input name="comprobante" type="file" id="comprobante" onBlur='LimitAttach(this,1);' onchange = "validar(this)" />

        </label></td>

      </tr>

      <tr>

        <td>Te gustar&iacute;a colaborar con tu delegaci&oacute;n?: </td>

        <td><label>

          <select name="colaborar" id="colaborar">

            <option value="Si" selected="selected">Si</option>

            <option value="No">No</option>

          </select>

        </label></td>

      </tr>

      <tr>

        <td>&nbsp;</td>

        <td class="letrapeque&ntilde;a rojo">*Atenci&oacute;n: todos los campos de este formulario son obligatorios, antes de enviarlo revisa que todo est&eacute; correcto porfavor. Gracias. </td>

      </tr>

      <tr>

        <td><div align="right">

          <label>

          <input name="enviar" type="submit" id="enviar" value="Enviar" />

          </label>

        </div></td>

        <td><div align="left">

          <label>

          <input name="borrar" type="reset" id="borrar" value="Borrar" />

          </label>

        </div></td>

      </tr>

    </table>

  </form>

</div>

</body>

</html>

<input name="comprobante" type="file" id="comprobante" onBlur='LimitAttach(this,1);' onchange = "validar(this)" />
JavierB, muchas gracias por contestarme :), disculpame por el coñazo que te estoy dando pero lo mio es mas bien el diseño. Muchas gracias otra vez :).

caricatos

29/12/2006 13:57

Re: Vaciar un campo de formulario

Hola:

Pues es cierto que propuse en otra ocasión la limpieza de un campo file, el mensaje es: ¿cómo pongo un campo file vacio desde javascript?

Se parece el código... :pensando:

Saludos :arriba:

AnnaTPC

30/12/2006 13:33

Re: Vaciar un campo de formulario

Muchiiiiiiiiiiiiiiiiiiiisimas gracias! Ahora me funciona perfectamente :-)

caricatos

30/12/2006 17:06

Re: Vaciar un campo de formulario

Hola:

Me alegro de que funcione :aplauso:
Sería bueno saber ¿qué has cambiado para que funcione?

La única diferencia entre los 2 códigos es el parámetro de cloneNode, y tengo entendido que true hace que la copia sea exacta y false no (tendríamos que enterarnos del tema un poco más... :pensando: ), y para un tag sin contenido como los input's supongo que poca importancia tendría.

Saludos :arriba:

JavierB

31/12/2006 03:49

Re: Vaciar un campo de formulario

Hola de nuevo.

Según tengo entendido si se pone true se clonan también los descendientes. Un ejemplo:

Código PHP:

   <html>
<head>
<script type="text/javascript">
function clonar(valor) {
  obj = document.getElementById('pru').cloneNode(valor);
  document.body.appendChild(obj);
}
</script>
</head>
<body>
<div id="pru" style="width:150px; height:150px; border:1px solid red">
<div>Div descendiente</div>
</div>
<input type="button" value="true" onclick="clonar(true)" />
<input type="button" value="false" onclick="clonar(false)" />
</body>
</html>

Saludos, :adios:

caricatos

31/12/2006 05:16

Re: Vaciar un campo de formulario

Hola:

Sí, también buscando por google ví lo mismo sobre cloneNode().

Volviendo con el tema, no entiendo porqué opera no borra un nodo clonado...
La única forma en la que pude borrarlo y reasignarlo es mediante el reset del form... pero para que no afectara al resto de los campos, lo cloné en un formulario "fantasma" y luego lo volví a insertar...

Código:

siguiente = f.nextSibling;

fff = f.cloneNode(true);

ff = f.parentNode;

ff.removeChild(f);

nuevoF = document.createElement("form");

nuevoF.appendChild(fff);

nuevoF.reset();

ff.insertBefore(fff, siguiente);

Si se quisiera mantener algunas características especiales podría interesar, pero supongo que la creación de otro input es mejor... por cierto puse en las FAQs la versión que funciona en los 3 navegadores.

Saludos :arriba:

caricatos

31/12/2006 06:03

Re: Vaciar un campo de formulario

Hola:

Otro apunte...
En firefox no funciona el reset si no es parte del documento, así que antes de la línea: nuevoF.reset(); abría que insertarlo en el documento... por ejemplo: document.body.appendChild(nuevoF)... y detrás de la línea del reset(): document.body.removeChild(nuevoF)...

Es curioso las cosas que hay que hacer para que funcionen las cosas en todos los navegadores... habrá que ver el funcionamiento en safari... y no sé si interesará en algún otro navegador. :pensando:

Saludos :arriba:

La zona horaria es GMT -6. Ahora son las 22:15.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.