"document.formName" is undefined?

Question

I've got an ASP.NET site running locally on my XP system using IIS Express. There is a live version of the site running on a Windows server.

In the web pages, often the Javascript will reference a form on the page using the style document.formName, where formName is the name of the form. As far as I know, this is a cross-browser method, along with document.forms.formName and document.forms[0] and so forth.

On my local development site, the reference document.frm1 (I know, bad naming practice) errors out; it is undefined. On the other hand, document.forms.frm1 works fine. Strangely, this doesn't occur on the server, although both pages are identical as far as the code goes. I've double checked with Firebug, and in both IE8 and Firefox 6.

Another weird part: checking with Firebug, document.frm1 is undefined, but document.frmClose (another form) exists! Huh?!

Anyone experienced this before?

Answer 1

EDIT 1

I did some experimentation, and found that the id property is used for document.forms, whereas the name property seems to be used for document.formName

http://jsfiddle.net/GVjsv/

---

Original Answer

Ensure that your javascript is not executing before DOM is ready. One way to help is to put your javascript at the bottom of the page, or if you're using a framework be sure to wrap the code in a ready-type function:

jQuery: http://api.jquery.com/ready/

Mootools: http://mootools.net/docs/core/Utilities/DomReady

Vanilla javascript:

window.onload = function() {
  // Code to be run.
} 

The reason that this is inconsistent between servers could be that the local development server loads the page more quickly than the live server does. The timing works out so that you usually don't get the same error in both places - the emphasis is added because if you tried enough times, you would probably be able to reproduce the error in both places.