Problema: TextBox dinámicos en IE7

yerex_tf · #1 (**permalink**) 29/06/2007, 03:03

Buenas. Tengo el siguiente problema:

Por causalidad he decubierto que el IE7 (no se si las anteriores versiones tambien) no es capaz de tratar un elemento creado dinámicamente (por ejemplo un campo de texto que creo con javascript).

Para que se hagan una idea: tengo un campo de texto (name="file1") por HTML, aprieto un boton y por JavaScript creo otro campo de texto (name="file2"). Luego vuelvo a apretar el boton, y ahora me interesaría coger el valor del campo de texto que cree anteriormente; pero IE7 da un error de que no existe ese elemento.
¿Alguien sabe como conseguir obtener ese valor?

A continuacion mostraré el código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Ejemplo para adjuntar múltiples ficheros</title>
		<link rel="stylesheet" type="text/css" href="mycss.css">
		<script language="javascript" type="text/javascript">
			var count=1;
			
			function UpdateList()
			{
				var fileList = document.getElementById("fileList");
				fileList.innerHTML = ""; //vaciamos el div.
				
				for (i=1; i<count; i++)
				{
					var nameInput = "file" + i;
					if (!document.getElementsByName(nameInput)[0].disabled)
					{
						fileList.innerHTML += "<p>" + document.getElementsByName(nameInput)[0].value + " <span id=\"" + nameInput + "\" onclick=\"DisableInput(this);\">Borrar</span>" + "</p>";
					}
				}
			}
			
			function DisableInput(item)
			{
				document.getElementsByName(item.id)[0].disabled = true;
				UpdateList();
				return false;
			}
			
			function AddInput()
			{
				var nameInput = "file" + count;
								
				if (RequiredField(document.getElementsByName(nameInput)[0]))
				{
					var input = document.getElementsByName("file1")[0];
					var nuevoInput = input.cloneNode(true);
					input.parentNode.appendChild(nuevoInput);
					
					//Ahora nos encargamos de la lista que vamos a mostrar...
					var fileList = document.getElementById("fileList");
					fileList.innerHTML += "<p>" + document.getElementsByName(nameInput)[0].value + " <span id=\"" + nameInput + "\" onclick=\"DisableInput(this);\">Borrar</span>" + "</p>";
					
					//Ahora tenemos que cambiarle el name al input clonado
//					var clonedInput = document.getElementsByTagName("input")[count];
					var clonedInput = document.getElementsByName("file1")[1];
					count++;
					
					var nameNextInput = "file" + count;
					clonedInput.name = nameNextInput;
					document.getElementsByName(nameNextInput)[0].value = "";
					//Al Clonado lo ponemos visible de nuevo.
					document.getElementsByName(nameNextInput)[0].style.display = "block";
					//lo habilitamos por si estaba desabilitado el campo original del que se clonó.
					document.getElementsByName(nameNextInput)[0].disabled = false;
					
					
					//Por ultimo ocultamos el INPUT al que le hemos asignado valor recientemente.
					document.getElementsByName(nameInput)[0].style.display = "none";
				}
			}
			
			///Funcion Auxiliar para validar que el INPUT es requerido.
			function RequiredField(input)
			{
				return (input.value != "");
			}
		</script>
	</head>

<body>
	<form id="f1" method="post">
		<div id="DivUpFile">
			<input name="file1" type="file">
		</div>
		
		<a href="javascript: AddInput();">Añadir</a> 
		
		<div id="fileList"></div>
		
		<input name="Subir" type="submit" value="Subir Album" >
		
	</form>
</body>
</html>