The Dynamic Duo - Working With Forms

Working With Forms

For Netscape, forms and layers don't work so well together. Again since Netsape layers are essentially a whole different document, a form that crosses over several layers cannot be accomplished. For example, the following will work fine in IE, but in Netscape it won't work:

<FORM>

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

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

</FORM>

The solution is that you have put a form into each layer:

<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>

But this poses a problem when you want to capture the values of the fields in JavaScript or if you want to send the information to a CGI program. What you end up having to do is "glue" the data together using JavaScript and then doing whatever want with that information.

Remember in Netscape you have to reference the form with whatever layer it's within:

document.layerName.document.formName.fieldName.value

But in IE you just reference it as if it weren't in a layer:

document.formName.fieldName.value

Using this idea you can create some code that will extract the data from each field:

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
}

But what if you want to then send that information to a CGI program? CGI's can only accept values from one form. So what you can do is create yet another form with hidden fields:

<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>

The hidden fields in mainForm can be assigned the values from the other forms. Then you can send that form to a CGI to interperet the 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()
}

I've made a simple demo that should show how this can be used in a real application. It's a simple 6-element form that could be used in a feedback form of some sort. I've also created a Perl script that simply returns back what was sent to it in a generated HTML page.

forms1.html - has each element split up into different forms and a function to glue the data together and send it to the Perl script. This was just to make sure my JavaScript and Perl scripts were working properly.

forms2.html - has each form in different layers and then allows you to flip between them by simply hiding and showing the appropriate layers. Then when you get to the last field you can submit the form.

forms-dhtml.txt source code for the perl script I used.