Yesterday was kind of fun; I spent the whole day programming, with a clear direction and lots of forward movement. It's always very satisfying when that happens.
Of course, I was really just distracting myself, tweaking out a form that didn't need to be tweaked out. I was doing it primarily in Javascript, and was using the MochiKit library some; though unfortunately that library didn't help me a great deal, and I had to avoid spending the day simply creating enhancements to it because that really would be a total distraction. I'd probably have gotten by fine with a couple bits of DOM traversal code.
What I ended up spending my time on was a little Javascript validation and repeating fields library. About half-way through I realized I was implementing bits of the WHAT-WG Web Form spec (though with different names). Which is a good sign all around, I suppose. For instance, for repeating fields I could write:
<tr class="form-template" form-group="urlmap"> <td class="field">URLMap:</td> <td><input type="text" template-name="urlmap-${number}.path" style="width: 30%" title="path">: <input type="text" template-name="urlmap-${number}.url" style="width: 60%" title="URL" value="http://"> <button form-delete="1">-</button> </td> </tr> <tr class="add-button" id="urlmap-before"> <td colspan=2> <button form-add="urlmap" form-before="urlmap-before"> Add URL Map </button></td> </tr>
Basically I look for elements with a form-template class (Web Forms uses a template attribute), and collect them (they are also hidden by CSS). And I look for buttons with a form-add (Web Forms uses type="add") and add onclick handlers for them. Then when you hit the button it clones the template and substitutes ${number} with next next highest index (Web Forms uses [urlmap]). Oh, and detect the buttons with form-delete attributes and set their onclick handlers to delete their enclosing row (Web Forms uses type="remove").
It works pretty nicely, and the resulting fields can be unpacked into a nice nested structure by variabledecode.
In the past I've looked at Web Forms longingly, but haven't been able to find a reference Javascript implementation (despite a Javascript implementation being central to WHAT-WG's strategy). This code wasn't particularly hard to write -- lots of boring looping (Javascript looping SUCKS!) and a few little quirks (Gecko doesn't like you to make up your own tags). At some point I'll probably convert it to use Web Form's specs exactly.