No puedo acceder a los campos de un formulario

[druha]

Hola, estoy haciendo una pequeña aplicación en ajax para administrar una base de datos. Tengo una función que genera un nuevo formulario para insertar un usuario (sólo pongo un campo para simplificar):

Código:

//Crea un formulario nuevo para insertar un usuario
function nuevo_usuario() {
        var informacion=document.getElementById("informacion");
        informacion.innerHTML="<h3>Datos de usuario:</h3><br>";
        informacion.innerHTML=informacion.innerHTML+"<form name=\"datos\">";
        informacion.innerHTML=informacion.innerHTML+"<input type=\"text\" name=\"nombre\">";
        informacion.innerHTML=informacion.innerHTML+"<input type=\"submit\" onclick=\"validar()\" value=\"Insertar\" name=\"Insertar\">";
        informacion.innerHTML=informacion.innerHTML+"</form>";
}

El botón de envío llama a la función de validación (también simplificada para que se vea el problema):

Código:

//Valida los datos del formulario
function validar() {
        alert("Formulario:"+document.datos);
        alert("Nombre:"+document.datos.nombre);
}

En el primer alert de validar me muestra una salida que indica que existe el objeto datos, pero en el segundo alert me sale en el mensaje "Undefined reference", como si el objeto nombre (el cuadro de texto) no existiese. De hecho si cargo la página en Internet Explorer me sale un error javascript diciendo que el objeto es nulo.

En otras palabras, puedo acceder al formulario pero no a los campos. Es como si estuviese vacío, cuál es el problema?

[GatorV]

Hola druha,

Lo mejor es manejar el DOM de forma adecuada, ya que tienes el objeto de tu formulario para leer un item es mejor usar form.elements['nombre_del_campo'].

Saludos

Tema trasladado desde AJAX.

[druha]

Hola GatorV, probé de esa forma y tampoco me funcionó. Haciendo pruebas me di cuenta de que el problema es al concatenar sucesivamente sobre innerHTML, por algún motivo no se almacena bien la estructura del formulario. La solución es concatenar sobre una variable temporal y luego asignar a innerHTML:

Código:

//Crea un formulario nuevo para insertar un usuario
function nuevo_usuario() {
        var informacion=document.getElementById("informacion");
        campos="<h3>Datos de usuario:</h3><br>";
        campos+="<form name=\"datos\">";
        campos+="<input type=\"text\" name=\"nombre\">";
        campos+="<input type=\"submit\" onclick=\"validar()\" value=\"Insertar\" name=\"Insertar\">";
        campos+="</form>";
        informacion.innerHTML=campos;
}

No entiendo muy bien por qué es así, si es un bug del lenguaje o si estoy usando mal esa propiedad, pero el caso es que de esta forma funciona. Aquí queda por si alguien se ve en las mismas.

Bueno, un saludo y gracias por la ayuda.

[sweetlydark]

No es un bug esta haciendo su trabajo bien, solo que no conoces como trabaja y eso añadido a unas practicas... eh... raro te da estos errores.

El problema en si es este linea:

Código:

informacion.innerHTML=informacion.innerHTML+"<form name=\"datos\">";

donde le indicas a innnerHTML que debe añadir un nodo <form> como hijo de información y pues lo añade;

Código:

<div id="informacion"><form name="datos"></form></div>

Luego después de </form> añade los otros nodos que le indica.

No sugiero usar un método (como innerHTML) en un concatenación ya que este va alentar tu código. Es mas deberías, si es posible, evitar las concatenaciones excesivas por la misma razón, aunque aveces es negable el tiempo de ejecutacion, sigue siendo una mala practica.

[druha]

sweetlydark, posiblemente sea una solución cutre pero no soy un experto en javascript y es la más simple e inmediata que he encontrado. Muchas veces tenemos que usar lenguajes que no dominamos y nos vemos obligados a usar las herramientas que conocemos siempre que nos permitan llegar a nuestro objetivo (seguro que tú te has visto en alguna situación parecida alguna vez). Y es que a veces el tiempo apremia y hay que actuar.

Si conoces una solución mejor para añadir código html a una capa vacía se agradecería una muestra, por si me vuelvo a encontrar una situación parecida en el futuro. De nuevo gracias por la ayuda, un saludo.

[sweetlydark]

Por eso deje mi comentario, no era un regaño solo un poco de información adicional. Ya tienes parte la mejor solución que es usar un variable, lo otro que menciono es porque usar:

Código:

campos="<h3>Datos de usuario:</h3><br>";
campos+="<form name=\"datos\">";
campos+="<input type=\"text\" name=\"nombre\">";
campos+="<input type=\"submit\" onclick=\"validar()\" value=\"Insertar\" name=\"Insertar\">";
campos+="</form>";

Haciendo que tu navegador pase el trabajo extra en buscar el variable, pasar lo esta dentro, para unirlo con otro string y volver a colocarlo en el variable.

Si quiere que se legible puedes usar algo así:

Código:

campos="<h3>Datos de usuario:</h3><br>"+
		"<form name=\"datos\">"+
		"<input type=\"text\" name=\"nombre\">" +
        "<input type=\"submit\" onclick=\"validar()\" value=\"Insertar\" name=\"Insertar\">"