dougv.com | The Web home of Doug Vanderweide

Recently asked on Yahoo! Answers:

JavaScript Submit form?

Ok, I know of the function…

function submitform() {document.myform.submit();}

however, for this to work, I have to name my forms, also, if I want to use it multiple times on the same page, each funtion name must be unique.

Is there a way to replace a submit button with javascript without having to uniquely name each function, or name my forms? I’m just looking for a link replacement for the submit button. So, a submit button just sits at the end of the form and submits it’s data, can I just replace it with a link, no extra stuff except one function at the top of the screen?

Also, the form’s method is POST, not GET. Also, the action is $PHP_SELF; though, if you give me an ideal answer, the JavaScript won’t even worry about the action.

This is something I don’t see as often as I’d like: A question about how something works, and a question with a practical application.

In other words, the user wants to solve a particular problem, but the question is posed in a way that its answer can reveal a great deal about how the Document Object Model (DOM) works. And understanding how things work makes programming far easier, believe me.

I began answering the direct question of how to submit an unnamed form with JavaScript, but then decided that, because opportunities like this are so rare, I’d seize upon it and launch a full dissertation here.

Before we begin, I’m going to be tossing around some terms about how classes / objects work. If you’re new to programming, or at least object-oriented programming, and aren’t familiar with terms such as “property,” “method,” “event” or “namespace,” you’ll want to check out my earlier entry, titled “Objects (Classes) Explained In Very Simple Terms.”

In the HTML / XHTML Document Object Model (DOM), all form elements on the page are handled as an associative array, even if there is only one form on the page.

In other words, JavaScript holds all the forms on a page as an array of form objects, called document.forms. If there is only one form on the page, that form is the zero index of the document.forms array.

The document.forms array is ordered by the order of the forms on the page, with the topmost form being the first element of the array and the bottommost form, the last element.

As the questioner notes, it is most common in JavaScript to address forms by their DOM namespace (e.g., document.myform.submit()).

However, in most JavaScript implementations, you can address the same form via the document.forms array. And when that is the case, you can work with the document.forms array as you would any other associative array.

So, assuming the form named “myform” is the first form on your page, you can address it by document.myform (its namespace), document.forms[0] (its index in the array) or document.forms['myform'] (its key in the array).

(There are additional ways of referring to forms on a page, but I don’t want to bog down the point with arcana.)

Since the question is about working with unnamed forms, it makes the most sense to address the forms on a page by their index in the document.forms array.

So, if there is only one form on the page, you can submit it by:

document.forms[0].submit();

You can submit the third form on the page with:

document.forms[2].submit();

You can submit all forms on a page with:

for(var i = 0; i < document.forms.length; i++) {
     document.forms[i].submit();
}

As most people know, JavaScript is almost exclusively invoked by events.

Therefore, you can invoke the form object’s submit() method via any event in the DOM (onclick, onmouseover, onfocus, etc.). And any element that supports an event is capable of triggering the submit() method.

In other words, you can submit a form not only via a button click, but by clicking on a link or a div, placing your cursor in a text box, hovering over an image, changing the selected item in a select, clicking on a checkbox. … any legal event for any element that supports events can trigger form submission.

For example, the button below will submit the first form on a page when clicked:

<button name="mybutton" id="mybutton" type="button" value="Submit Form" onclick="document.forms[0].submit()" />

The image below will submit the same form if the cursor is placed over it:

<img src="myimg.jpf" alt="" onmouseover="document.forms[0].submit()" />

Here is a text box that submits the 347th form on a page once the cursor is placed inside it:

<input type="text" name="mytext" size="30" value="foobar" onfocus="document.forms[346].submit()" />

And, as requested, a link that submits the first form on the page:

<a onclick="document.forms[0].submit()">Submit form</a>

Because the DOM treats all page elements as objects, and JavaScript is an object-oriented language (in most implementations), you don’t even need to use document.forms, if you use a button click to call the submit() method. Instead, you can use this.form.submit().

In object-oriented programming, the reserved word “this” is used to refer to an object when you’re not sure what it is named — or, as in the case here, when the object hasn’t been named yet, either because it’s not ready to be named or because it’s inconvenient to name it.

If you don’t want to name your forms, using a button with this.form.submit() as its onclick event handler to submit the form makes the most sense.

<button type="button" value="Submit Form" onclick="this.form.submit()" />

So what does this.form.submit() mean?

N00bs might think “this.form” refers to “this form,” but that’s not quite right. The button element, not the form, is the object referenced by “this.”

The button object has a property, “form”, which is a reference to the form containing the button. And the form object has a method, submit, which you already know about.

So, this.form.submit() literally says, “get this button, then find the form to which it belongs, then submit that form.” So “this.form” is effectively the same thing as “this form,” but it’s not exactly the same — and remember, computers are literal.

The difference between “this.form” and “this form” might seem trivial, but it’s actually significant.

In object-oriented programming, you quickly learn that “this” is very handy. You also quickly learn that not knowing what type of object you are referring to when you use “this” will cause major chaos with your code — chaos that is often difficult to track down and fix.

Finally, the method and action of a form are immaterial to the form object’s submit() method. Basically, the method simply indicates that whatever action is specified for the form should be invoked, with data sent via whatever method the form is told to use.