When a Form's Not Really a Form

Wednesday, February 15, 2006, at 05:27PM

By Eric Richardson

When's a form not really a form? When it's being used and abused the way HTML forms have to be to do interesting work these days.

Over the past few weeks forms have been out to get me. You wouldn't think that would be. I mean, forms are pretty simple stuff. You put in some fields, there's a submit action, and boom there you go.

If only life were so simple.

For instance, a normal way to monitor changes in a select box would be via attaching a listener to the change event. When the user chooses an option from the select your listener is called and you make happen whatever it is you want to occur when there's a change (display something different, fire the form, etc).

But what do you do when the change event isn't generated? Say some other bit of javascript sets the index of your select. Does change get fired? No. What about if you call form.reset(), does change get fired then? Nope.

So how do you monitor a reset event? Well, there isn't one. There's a submit event, but not a reset one.

Or consider a case where you're binding some action into the onsubmit="" attribute of a form. Take this form tag Rails wrote for me (whitespace added for readability):

<form 
  action="/dtla/details_residential" 
  method="post" 
  onsubmit="
    new Ajax.Updater(
      'results_list', 
      '/dtla/details_residential', 
      { asynchronous:true, evalScripts:true },  
      parameters:Form.serialize(this)}
    ); return false;
  ">

That return false at the end of the onsubmit handler is supposed to prevent the form from actually being submitted, allowing the Ajax.Updater call to fire without the page reloading. If you use a normal submit input element that works just fine. But what if you want to fire the form from something else? With a normal form you'd just call form.submit().

But that won't work. Why? Because form.submit() doesn't actually call the onsubmit() handler. It just submits the form. Instead you have to call form.onsubmit() to manually fire the handler and just not use the normal form submission. That works, but it just leaves me feeling a little unclean.

In a current project I've:

  • written a javascript lib to hide select boxes and replace them with stylable elements
  • gotten rid of submit and reset elements in favor of JS solutions
  • written my own resetForm routine to replace form.reset

It just doesn't feel like I'm using forms any more. Yeah, there's a form tag, but that's about it.