Vaciar un campo de formulario

AnnaTPC · #1 (**permalink**) 28/12/2006, 13:14

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 · #2 (**permalink**) 28/12/2006, 13:29

Hola [B]Hola AnnaTPC

Por seguridad, no se puede cambiar el value de un file con código. Creo que fue caricatos (¡Hola!

) 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,

AnnaTPC · #3 (**permalink**) 28/12/2006, 14:05

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 · #4 (**permalink**) 29/12/2006, 13:57

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...

Saludos

AnnaTPC · #5 (**permalink**) 30/12/2006, 13:33

Muchiiiiiiiiiiiiiiiiiiiisimas gracias! Ahora me funciona perfectamente

caricatos · #6 (**permalink**) 30/12/2006, 17:06

Hola:

Me alegro de que funcione

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...

), y para un tag sin contenido como los input's supongo que poca importancia tendría.

Saludos

JavierB · #7 (**permalink**) 31/12/2006, 03:49

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,

caricatos · #8 (**permalink**) 31/12/2006, 05:16

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

caricatos · #9 (**permalink**) 31/12/2006, 06:03

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.

Saludos