I have been struggling with a way to change a form depending on what category was selected. I have a number of forms that input different levels of information depending on the category.
I started off using the $ajax->observeField() function. The problem was that the category selection was half way down the form, so anything that was entered previously was being lost when the form was submitted. To change this I thought it would be a simple change to using $ajax->observeForm(). But no. That would be too easy. 
I ended up having to code it by hand, so here is what I did.
Create a DIV to take the information from the form after it is submitted.
Create the dropdown that will be used to select the category.
Add this piece of code:
codeBlock('Event.observe("categories",
\'change\',
function(event){ new Ajax.Updater(\'form\',
\'worksheets/add/'.$worksheet['Worksheet']['sdate'].'\',
{asynchronous:true, evalScripts:true, parameters:Form.serialize(Event.element(event).form), requestHeaders:[\'X-Update\', \'form\']}) }, false);'); ?>
This observes the “categories” dropdown and when it changes it will call the add function and pass the sdate to it. It then updates the “form” DIV with the results.
