In the case of his code example, document.forms[0].submit basically says, “in the current document, find the first form on the page, and give me the element in that form named “submit.” document.forms[0].submit() says, “in the current document, find the first form on the page, and invoke the submit method for that form.”

Here’s a trick that draws it all together. Let’s start with his form:

<form action="script.php">
<input type="text" name="username" />
<input type="text" name="submit" />
</form>

We can actually “double up”, as it were, on the namespaces, properties and methods, and call the following JavaScript, which would also submit the form:

document.forms[0].submit.form.submit();

What document.forms[0].submit.form.submit() says is, “In the current page, get the first form ["forms" is a property of the document class; specifically, it is a collection of all the form objects in the current Web page]. Then, find the element within that form named “submit” ["submit" is the namespace for a text-type input element named, not coincidentally, "submit"]. Find that element’s parent form ["form" is a property of the input class; it refers to the parent form which contains the input element]. Then, invoke the submit method for that form ["submit()" is a method of the form class; and again, we are calling that method via a reference to the form that contains the input element named "submit"].”

Of course, for all that’s worth, we could remove the input named “submit” and simply use document.forms[0].username.form.submit(); or, for all that’s worth, simply call document.forms[0].submit().

Elegance is always what we’re after, and namespaces are primarily intended to group together our objects in a way that makes them easier to address. But as the examples above show, sometimes it’s simpler and better to avoid using namespaces altogether and directly address collections as we would any array.

If any of the fields in the form have name of “submit” eg then, the submit() method is no longer usable… Continuing in the spirit of the article, I’ll give the why:

Consider this form:

<form action="script.php">
<input type="text" name="username" />
</form>

If you want to access the input field with a name of “username” you can get to it with:

document.forms[0].username

So when you add,

<input type="text" name="submit" />

you end up with a conflict:

document.forms[0].submit wants to access the object relating to the form field with a name of submit, while document.forms[0].submit() wants to access the form object and run its submit method

Kiall