Rellenar campo de un formulario automáticamente

elboletaire · #1 (**permalink**) 10/06/2008, 13:31

Hola a todos

A ver si alguien puede ayudarme con esto que me lleva de cabeza muchas horas...
Tengo un formulario para subir ficheros a mi web y uno de los campos necesito que se autocomplete automáticamente a partir del nombre del fichero.

Los campos que me interesan son:
txtFileName --> La cajetilla de selección del fichero. De dónde quiero tomar el nombre.
references --> La cajetilla que quiero rellenar automáticamente a partir del nombre de fichero (txtFileName).

Para poder hacerlo he intentado varios métodos, pero ninguno me ha dado el resultado deseado:

He creado la siguiente función:

Código:

function nomfitxer(){
	var URLFitxer = document.getElementById("txtFileName").value;
	document.getElementById("references").value = URLFitxer;
}
SetTimeout("nomfitxer()",0);

Y se la he aplicado al valor "onchange" de la cajetilla "txtFileName" para intentar que al rellenarse ésta se autorellenara la "references", pero nada. Bueno, esto sí funciona, pero tengo que darle a F5 para que cambie (así que no me sirve de mucho).

También he intentado hacer una función similar, pero que en lugar de modificar la caja "references" con "getElementById" retorna "URLFitxer" y se lo he aplicado al valor "value" de la caja "references", pero tampoco.

También he intentado hacerlo cargar al inicio de la página con el "body onload="nomfitxer()" pero tampoco sin éxito.

Y he intentado muchas otras cosas, pero ya no recuerdo muchas de ellas

Alguien podría echarme una mano?

Salu2 y gracias de antemano

JavierB · #2 (**permalink**) 10/06/2008, 13:45

Hola elboletaire

Tu código me ha funcionado bien

Este es el ejemplo que he usado:

Código:

<html>
<head>
<script type="text/javascript">
function nomfitxer(){
	var URLFitxer = document.getElementById("txtFileName").value;
	document.getElementById("references").value = URLFitxer;
}
</script>
</head>
<body>
<input type="file" id="txtFileName" onchange = "nomfitxer()" />
<input type="text" id="references" />
</body>
</html>

Saludos,

elboletaire · #3 (**permalink**) 10/06/2008, 14:12

Fallo mío, voy a profundizar un poco más el código que intento modificar.

El sistema de carga es muy similar al de http://demo.swfupload.org/formsdemo/index.php, sólo he cambiado un poco el formulario a mi gusto y he hecho que éste haga una entrada MySQL a mi base de datos.

El código que utilizan en este ejemplo para la cajetilla de fichero y la de enviar es:

Código:

<input type="text" id="txtFileName" name="txtFileName" disabled="true" />
<input id="btnBrowse" type="button" value="Cercar..." onclick="fileBrowse.apply(swfu)" />

En lugar de lo que JavierB ha dicho:

Código:

<input type="file" id="txtFileName" onchange = "nomfitxer()" />

Si no me equivoco, la función "fileBrowse.apply(swfu)" es action script y se encuentra en el fichero swf, ya que no lo he encontrado en ninguno de los ficheros javascript adjuntos.

Y no sé que más añadir, si necesitáis que profundice más creo que ya estaríamos hablando de la API de SWFUpload y no es mi intención (al menos no más de lo necesario..).

elboletaire · #4 (**permalink**) 10/06/2008, 16:19

Bueno, después de estarme un buen rato más pensando por fin he encontrado la solución, la pongo aquí por si a alguien le sirve (aunque lo dudo...).

Con el "formsdemo" de swfupload viene un fichero javascript para comprobar que los campos del formulario han sido rellenados. Se llama "handlers.js" y en éste, en la función "validateForm()" he añadido mi código:

Código HTML:

	var simbols = "[^a-zA-Z0-9.\\s]";
	var URLFitxer = document.getElementById("txtFileName").value;
	URLFitxer = URLFitxer.replace(new RegExp(simbols,"g"),"");
	URLFitxer = URLFitxer.replace(new RegExp("\\s","g"),"_");
	document.getElementById("references").value = URLFitxer;

Es el mismo código que he puesto antes, salvo que este reemplaza los símbolos extraños por guiones bajos.
Además he eliminado las siguientes líneas del fichero "handlers.js":

Código HTML:

	if (txtReferences.value === "") {
		isValid = false;
	}