Trabajando con Formularios

En Netscape, los formularios y capas no funcionan juntas muy bien . Asimismo desde que capas en Netscape son esencialmente un documento entero, una forma que cruza encima de varias capas no se podrá realizar. Por ejemplo, lo siguiente funcionara bien en IE, pero en Netscape no funcionará

<FORM>

<DIV ID="layer1">
<INPUT TYPE="Text" NAME="field1" SIZE="10">
</DIV>

<DIV ID="layer2">
<INPUT TYPE="Text" NAME="field2" SIZE="10">
</DIV>

</FORM>

La solución es que tienes que poner una forma adentro de cada capa:

<DIV ID="layer1">
<FORM NAME="form1">
<INPUT TYPE="Text" NAME="field1" SIZE="10">
</FORM>
</DIV>

<DIV ID="layer2">
<FORM NAME="form2">
<INPUT TYPE="Text" NAME="field2" SIZE="10">
</FORM>
</DIV>

Pero esto posa un problema cuando deseas capturar los valores de los campos en JavaScript o si deseas mandar la información a un programa CGI. Lo que concluirás por hacer es pegar juntos la data utilizando JavaScript y luego haciendo lo que quieras con esa información.

Recuerda que en Netscape tienes que referirte a la forma de cualquier capa que se encuentre adentro:

document.layerName.document.formName.fieldName.value

Pero en IE solamente te refieres a esto como si no estuviera en la capa:

document.formName.fieldName.value

Utilizando esta idea podrás crear algún código el cual extraerá la data de cada campo.

if (ns4) {
	field1value = document.layer1.document.form1.field1.value
	field2value = document.layer2.document.form2.field2.value
}
if (ie4) {
	field1value = document.form1.field1.value
	field2value = document.form2.field2.value
}

¿Pero que pasará si desearás entonces mandar la información a un programa CGI? CGI puede solamente aceptar valores de una sola forma. Entonces lo que puedes hacer es crear otra forma con campos escondidos:

<FORM NAME="mainForm" ACTION="/cgi-bin/inputform.pl" METHOD="POST">
<INPUT TYPE="Hidden" NAME="field1">
<INPUT TYPE="Hidden" NAME="field2">
</FORM>

<DIV ID="layer1">
<FORM NAME="form1">
<INPUT TYPE="Text" NAME="field1" SIZE="10">
</FORM>
</DIV>

<DIV ID="layer2">
<FORM NAME="form2">
<INPUT TYPE="Text" NAME="field2" SIZE="10">
</FORM>
</DIV>

Los campos escondidos en la forma principal "mainForm" pueden ser asignados los valores de las otros formularios. Entonces así puedes mandar esta forma a un GCI para interpretar el data:

function sendForm() {
	if (ns4) {
		document.mainForm.field1.value = document.layer1.document.form1.field1.value
		document.mainForm.field2.value = document.layer2.document.form2.field2.value
	}
	if (ie4) {
		document.mainForm.field1.value = document.form1.field1.value
		document.mainForm.field2.value = document.form2.field2.value
	}
	document.mainForm.submit()
}

He hecho una demostracion simple que mostrará como esto puede ser utilizado en una aplicación real. Es simplemente una forma de 6 elementos que podrá ser utilizada como una forma de comentarios de alguna especie. He también creado un script Perl el cual simplemente manda de vuelta lo que le ha sido mandado en una página generada HTML.

forms1.html - cada elemento se ha separado en formas diferentes y una función para pegar la data junta y mandar esta al script Perl. Esto fue solamente para estar seguro que mi JavaScript y Perl scripts funcionan apropiadamente.

forms2.html - tiene cada forma en capas diferentes y luego te permite de hojear entre ellas con solamente escondiendo y mostrando la capa apropiada. Entonces cuando llegues al último campo podrás presentar la forma.

forms-dhtml.txt muestra la fuente de código del script Perl que he utilizado.

Casa Próxima Lección: Páginas Platillas
copyright 1998 Dan Steinman