creación dinámica de formularios (explorer)

caricatos · #1 (**permalink**) 24/08/2006, 08:30

Hola:

Para ir al grano voy a poner el código que crea un formulario y que en explorer no funciona:

Código:

<html>
<head>
<script type="text/javascript">
function nF() {
 f = document.createElement("form");
 i = document.createElement("input");
 b = document.createElement("button");
 i.setAttribute("type", "text");
 b.setAttribute("type", "button");
 b.appendChild(document.createTextNode("prueba"));
 i.setAttribute("name", "xx");
 f.setAttribute("name", "f");
 if (document.all) b.attachEvent("onclick", hola);
 else b.addEventListener("click", hola, true);
 f.appendChild(i);
 f.appendChild(b);
 document.body.appendChild(f);
}

function hola(e) {
 if (document.all)
  alert(event.srcElement.form.xx.value);
 else
  alert(e.target.form.xx.value);
}

</script>
</head>
<body onload="nF()">
</body>
</html>

Un botón debería mostrar una alerta con el texto introducido en un campo de texto... va bien en opera y firefox pero no cuela en explorer... y creo que es código correcto.

Gracias

Cap.Buscapina · #2 (**permalink**) 24/08/2006, 16:33

parece que adicionandole "document" previo a la llamada al form está el 50% de la solucion.

El otro 50% es que parece que IE asigna el nombre dinamicamente, pero solo lo puedes llamar por el índice

Cita:

<html>
<head>
<script type="text/javascript">
function nF() {
f = document.createElement("form");
i = document.createElement("input");
b = document.createElement("button");
i.setAttribute("type", "text");
b.setAttribute("type", "button");
b.appendChild(document.createTextNode("prueba"));
i.setAttribute("name", "xx");
f.setAttribute("name", "f");
if (document.all) b.attachEvent("onclick", hola);
else b.addEventListener("click", hola, true);
f.appendChild(i);
f.appendChild(b);
document.body.appendChild(f);
}
function hola(e) {
if (document.all)
alert(event.srcElement.document.forms[0][0].value);
else
alert(e.target.form.xx.value);
}

</script>
</head>
<body onload="nF()">
</body>
</html>

no se bien a que apunta este codigo por lo que no se si esta es la solucion integral. Tiene algo que ver con frames o popup?

saludos

PD: la linea verde sobra (creo).

caricatos · #3 (**permalink**) 24/08/2006, 20:10

Hola Capi:

Sobre la línea verde: tipo de botón por defecto, en explorer se crean los botones con el tipo button y en FF y opera con submit así que me parece que está bien puesto...

Y la indexación no me vale (no lo había considerado, pero para mis propósitos...)

Verás, el script donde lo uso está en esta página: Fechas... el calendario de pie de página no funciona con este sistema... el del principio sí, pero el formulario se crea con document.write... ¡otro caso polstergate (o como se escriba)!

Saludos

Cap.Buscapina · #4 (**permalink**) 25/08/2006, 10:08

el problema parece ser los name's y los id's en IE.

teniendo como base el código del calendario que publicas en tu pagina , solamente le tenés que agregar el atributo "id" a cada elemento del form (y el form inclusive).

sería así:

Cita:

.....
var _calendario = document.createElement("form");
_calendario.name = el_id;
_calendario.id = el_id;

.....
_control = document.createElement("select");
_control.setAttribute("id", "mes");
_control.setAttribute("name", "mes");

.....

_control.name = "aaaa";
_control.id = "aaaa";

No pongo todo el codigo porque no creo que haga falta ya que con solo esos cambios funcionaria en IE.

saludos

Cap.Buscapina · #5 (**permalink**) 25/08/2006, 10:11

<editando>
disculpas, se repitio el mismo mensaje
</editando>

caricatos · #6 (**permalink**) 25/08/2006, 10:34

Hola Capi, gracias:

Verás, no estoy en la máquina del código, y tengo el tiempo un poco escaso, pero en cuanto pueda lo pruebo y te cuento...

Saludos

caricatos · #7 (**permalink**) 26/08/2006, 08:27

Hola:

Comprobado. Ya he modificado el script, aunque el id se duplicaba porque lo usaba en la tabla... pero lo quité de la tabla y no ha cambiado el aspecto, así que me vale.

Lo miraré con más detenimiento y pondré los créditos.

Muchas gracias, Capi.

Saludos

Cap.Buscapina · #8 (**permalink**) 26/08/2006, 09:44

de nada, mi estimado

ha sido un placer.

saludos

Panino5001 · #9 (**permalink**) 26/08/2006, 13:01

Hola, Caricatos, Hola Capi!
No tengo conocimientos acerca de asignar eventos de esta manera y pregunto para aprender solamente. Es decir, con mis preguntas no estoy afirmando nada porque, repito, estoy iniciándome en los eventos del DOM y necesito que me orienten un poco a ver si estoy entendiendo o estoy totalmente confundido (incluso les agradecería lgún link para seguir aprendiendo):
En esta función:

Código:

function hola(e) {
if (document.all)
alert(event.srcElement.document.forms[0][0].value);
else
alert(e.target.form.xx.value);
}

Porqué es necesario utilizar event.srcElement o e.target?
srcElement y target no indican el nodo que generó el evento? Es por el burbujeo que hace que el valor de e.target y event.srcElement terminen convirtiéndose en document? Y en ese caso no conviene detener el burbujeo o simplemente llamar al alert con este argumento en ambos navegadores: document.forms[0][0].value

caricatos · #10 (**permalink**) 26/08/2006, 20:16

Hola Panino5001:

La razón de usar e.target y event.srcElement se debe a que para poner un manejador de eventos con el DOM hay que hacerlo con los métodos attachEvent y addEventListener (para explorer y mozilla + navegadores estándar respectivamente)... y mediante esa técnica no se pueden pasar parámetros; por ejemplo, pudiendo usar como parámetro el objeto this es fácil obtener el formulario de donde depende el botón que hemos creado dinámicamente, pero al no poder usar parámetros obtenemos el elemento donde se produjo el evento de esa manera.

Sobre el burbujeo, creo que en este caso no debería haber (pero es un tema que no controlo)

Saludos

Panino5001 · #11 (**permalink**) 26/08/2006, 21:46

Gracias, Caricatos, queda claro. Un abrazo, Andrés