What am I missing? javascript document.forms question...

I am getting an error "document.forms.logoffForm is null or not an object".

My code is:

<script language="JavaScript">

function logoff()

{

EPCM.raiseEvent("urn:com.sapportals.portal:user", "logoff", "");

document.forms["logoffForm"].submit();

//document.forms[1].submit();

}

<hbj:content id="myContext" >

<hbj:page title="myCAreports">

<hbj:form id="myFormId" method="post" action="">

.

.

.

</hbj:form>

</hbj:page>

</hbj:content>

<form name="logoffForm" style="display:none" action="<%=GetLogoffURL(componentRequest)%>" method="POST">

<input type="hidden" name="logout_submit" value="true"></input>

</form>

If I view the source, I can SEE the form.

But...

too debug I put this in my javascript function:

<b>var forms;

forms = document.forms.length;

alert("# of forms = " + forms.toString());</b>

The alert showed "# of forms = 0".

Why?

I pretty much took this code from HeaderiView.jsp from the Masthead par.

Heck, the masthead works. Why am I getting my error?