Tabbed Forms, Part 1

If you want to create a form with jQuery-style tabbed pages, the component to extend isn't in the standard Zend Framework but in ZendX, the Zend Framework Extensions Library. If you download the full version of the Zend Framework, ZendX can be found in the /extras/library folder. The component to use is ZendX_JQuery_Form.

The Zend Framework documentation does have a segment on using the ZendX Tab Decorator. This is pretty good, but it combines the Tab Decorator with other jQuery decorators and leaves out the jQuery includes and call that are needed in the view. So this example is just a very simple but complete tabbed form.

Basically, what we are doing is to add each of the form elements to a subform instead of the main form. Each subform then becomes a tab. On the main form you will set the decorators to use the TabContainer view helper, and then on the subforms the decorators will use the TabPane view helper. The form_id on the main form is used by the TabPanes to register them with the correct TabContainer. So here is a simple createTabbedForm function:

/**
* You must set the form id so that you can add your tabPanes to the tabContainer
* Set the decorator to use the TabContainer View Helper
*/
$form = new ZendX_JQuery_Form;
$form->setAttrib('id', 'mainForm');
$form->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'div', 'id'=>'tabContainer', 'class'=>'mainForm')),
    array('TabContainer', array('id'=>'tabContainer', 'style'=>'width: 530px;')),
    'Form'
));

/**
* Create the subforms and add some elements
*/
$subforms = array();
$subforms[0] = new ZendX_JQuery_Form;
$username = $form->createElement('text', 'username')
                                ->setLabel('username');                               
$subforms[0]->addElement($username);

$subforms[1] = new ZendX_JQuery_Form;
$guestname = $form->createElement('text', 'guestname')
                                ->setLabel('guestname');                               
$subforms[1]->addElement($guestname);

/**
* Set the decorators on the subforms to use TabPane View Helper
* Note that containerId is the same as the form id set earlier
*/
foreach ($subforms as $pageno=>$subform) {
    $subform->setAttrib('id', 'subForm');
    $subform->setDecorators(array(
        'FormElements',
        array('HtmlTag', array('tag' => 'div')),
        array('TabPane', array('jQueryParams' => 
            array('containerId' => 'mainForm', 'title' => 'Page '.$pageno))),
        'Form'
    )); 
    /**
    * Add a submit button to each subform
    */
    $subform->addElement('submit', 'Submit');
    $form->addSubform($subform, 'subform_'.$pageno);
}

return $form;

Now just put this into a controller and call it from the action:

class ExampleController extends Zend_Controller_Action {
    
    public function init() {
        $this->_helper->layout->disableLayout();
    }
    
    public function createTabbedForm() {
        // insert from above
    }

    public function tabbedformAction() {
        $this->view->form = $this->createTabbedForm();
    }
    
}

Finally, you will create your view, tabbedform.phtml, to display the form. As mentioned, there are some jQuery includes and calls that are needed here. Basically, you need the jQuery library, the jQuery UI core library, and the jQuery UI tabs library, as well as some jQuery themes to render the display. We can use the HeadScript and HeadLink view helpers to easily create the correct HTML. Here is what you need:

// jQuery themes list:  http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/
$this->headLink()
     ->appendStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css')
     ->appendStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.tabs.css');
        
// jQuery UI versions:  http://code.google.com/apis/ajaxlibs/documentation/#jqueryUI
$this->headScript()
     ->appendFile('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js')
     ->appendFile('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js')
     ->appendFile('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.tabs.js')
     ->appendScript('$(function() { $("#tabContainer").tabs(); });');


echo $this->headLink();
echo $this->headScript();
echo $this->form;

That's it! Using this code should quickly and easily get you a tabbed form that you can now modify to your heart's desire.

Happy coding!