Everyday you learn something new. MovableType has taught me something about HTML forms I didn’t know (but should have): you can have multiple submit buttons on a form.

The comments form at the bottom of every post in MovableType has two buttons: Preview and Post. I noticed that BOTH of these buttons were of type “submit.” This means that both buttons submit the form they occupy.

Now, without a bit more knowledge, this means that if the form goes to a single action, such as posting a comment, without some underlying javascript to post an additional flag, these two submit buttons perform the same action. Yet, they do not.

The code for MovableType sees some flag that is not placed in addition to the fields on the form.

This puzzled me for a bit, until I looked at the source code:

## We don't really have a __mode parameter, because we have to
## use named submit buttons for Preview and Post. So we hack it.
if ($q->param('post')) {
$q->param('__mode', 'post');
} elsif ($q->param('preview')) {
$q->param('__mode', 'preview');
}


So, there we go. For those of you who don’t know Perl, (or haven’t looked at it in a while, like me), there is an easier way to see what happens. Download any entry page, like this one, and save it somewhere. Edit the source and change the method on the form from “post” to “get,” and change the action to some harmless url. (Wouldn’t want to post a lot of comments. (-: )

When you click a button, the form performs a get, which exposes all of the parameters in all their glory into the web browser url. Mine shows this:

Of interest is the last parameter: post. This is the name of the submit button… that means that other submit buttons are ignored. So, if you look in the request and preview is null but post is not, or vice versa, you know what button they pressed!

I think that’s cool. That’ll save me some JS.

Like I said, learn something new everyday.