Steps to create JQuery form in Zend Framework

In this tutorial, we are going to discuss about How to create jQuery form in Zend framework. I'm here to show you how to use JQuery extension provide with latest version of Zend Framework for creating wonderful JQuery form. You will need to follow the steps bellow to create JQuery form.

1. Placing ZendX directory in right place
2. Make necessary configuration in bootstrap file
3. Write necessary code in your layout.phtml file.
4. Create JQuery form
5. Show that form in the template.

Step 1 : Placing ZendX directory in right place

When you download latest version of Zend Framework and extract the zip file. You will see a directory called "extras". When open that directory you will find ZendX folder. Copy this to your Library/ folder at the same level of your Zend directory. You directory structure will be like this.

Library/
    Zend/
    ZendX/
   
Step 2 : Making necessary configuration in bootstrap

After placing the directory you will need to add a bit of code in your bootstrap file. Add the following lines to your bootstrap file.

$view = new Zend_View();
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
$viewRenderer->setView($view);
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

In the code above, we instantiate our Zend_View object, set helper path, add view to the viewRenderer and finally add viewRenderer the helper broker. Keep in mind that if you have already instantiate Zend view in your bootstrap, you don't need to instantiate it twice.

Step 3: Write necessary code in your layout.phtml file

The only line you will need to include in your layout file is

echo $this->jQuery();

If you don't use two step view, you can include this line at the top of each of your view template file instead.

Step 4: Create JQuery form

Now you have done all the necessary configuration, its time to create the actual form. Create JQuery form in Zend framework is piece of cake. If you want to create form in your controller, write the following code.

$form = new ZendX_JQuery_Form();
$date1 = new ZendX_JQuery_Form_Element_DatePicker(
                        'date1',
                        array('label' => 'Date:')
        );
$form->addElement($date1);
$elem = new ZendX_JQuery_Form_Element_Spinner(
                    "spinner1", 
                    array('label' => 'Spinner:')
        );
$elem->setJQueryParams(array(
                'min' => 0,
                'max' => 1000,
                'start' => 100)
        );
$form->addElement($elem);
$this->view->form = $form;

In the code above we have created our JQuery form object, and add two element date and spinner to it. And then assigned the form to the view template file. Although you can create the form in your controller, however I will strongly discourage it. I will prefer using separate php file and add following code to that file.

class JQueryForm extends ZendX_JQuery_Form
{
    public function init()
    {
        $this->setMethod('post');
        $this->setName('frm');
        $this->setAction('path/to/action');
        
        $date1 = new ZendX_JQuery_Form_Element_DatePicker(
                'date1',
                array('label' => 'Date:')
             );
             
        $this->addElement($date1);
        
        $elem = new ZendX_JQuery_Form_Element_Spinner(
                "spinner1", 
                array('label' => 'Spinner:')
        );
        
        $elem->setJQueryParams(array('min' => 0, 'max' => 1000, 'start' => 100));
        $this->addElement($elem);
    }
}

We have extended our form from ZendX_JQuery_Form, set its method, name and action and add two elements date and spinner. Now in your controller/action

$form = new JQueryForm();
$this->view->form = $form;

Step 5 : Showing form in the template

In your view template file add only the following line.

<?php
echo $this->form;
?>