David's Tech Blog

In web applications it is fairly common to want to edit multiple rows of the same kind of information, formatted into a table, kind of like you can in a spreadsheet. These forms are generally for editing existing information pulled from a database, which is usually already in an array format. Most of the examples I can think of at the moment need explanations of the context to make much sense, so I’ll pick an example that isn’t as likely to be useful but doesn’t need explanation.

Suppose I have a table in my database that lists contacts with title, first name, last name, and so on. When I fetch the data from the database, I’m likely to have an array that looks something like this:

$array[0]['id']    = 1005;
$array[0]['title'] = 'Mr.';
$array[0]['first'] = 'Ted';
$array[0]['last']  = 'Smith';
$array[1]['id']    = 1006;
$array[1]['title'] = 'Mr.';
$array[1]['first'] = 'Mark';
$array[1]['last']  = 'Jones';
$array[2]['id']    = 1007;
$array[2]['title'] = 'Ms.';
$array[2]['first'] = 'Sally';
$array[2]['last']  = 'Adams';

I want to get this into a form structured as a table, that submits the whole thing as one form. So that the posted results like this:

$contacts[1005]['title'] = 'Mr.';
$contacts[1005]['first'] = 'Ted';
$contacts[1005]['last'] = 'Smith';

I want the array to look like this because its much easier to handle the results than if we used the actual field name or id as the variable name.

I couldn’t find anything in the Zend Framework documentation, lists, or various tutorials that explained how to do this very clearly, so I thought I’d post at least one way to accomplish this in Zend Framework. This is based on 1.5. I’m going to start by showing the whole thing together. In practice it might not appear this way in the context of your controller class, but hopefully this is clear enough to understand how to apply it. After I show the whole thing I’ll walk through it and explain the pieces.

$form = new Zend_Form();
$form->setMethod('post')
     ->setAttrib('id', 'contactForm');
$subForm = new Zend_Form_SubForm();

foreach($array as $rownum => $row){
  $id = $row['id'];
  $rowForm = new Zend_Form_SubForm();
  foreach($row as $key => $value){
    if($key == 'id') continue;
    $rowForm->addElement(
      'text',
      $key,
      array(
        'value' => $value,
      )
    );
  }
  $rowForm->setElementDecorators(array(
    'ViewHelper',
    'Errors',
    array('HtmlTag', array('tag' => 'td')),
  ));
  $subForm->addSubForm($rowForm, $id);
}

$subForm->setSubFormDecorators(array(
  'FormElements',
  array('HtmlTag', array('tag'=>'tr')),
));

$form->addSubForm($subForm, 'contacts');

$form->setSubFormDecorators(array(
  'FormElements',
  array('HtmlTag', array('tag' => 'tbody')),
));

$form->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'table')),
    'Form'
));

$form->addElement(
  'submit', 'submit', array('label' => 'Submit'));

$form->submit->setDecorators(array(
    array(
        'decorator' => 'ViewHelper',
        'options' => array('helper' => 'formSubmit')),
    array(
        'decorator' => array('td' => 'HtmlTag'),
        'options' => array('tag' => 'td', 'colspan' => 4)
        ),
    array(
        'decorator' => array('tr' => 'HtmlTag'),
        'options' => array('tag' => 'tr')),
));

As you can see, this approach uses subforms, which allows us to automatically build the array in the form, as well as having a convenient structure for applying decorators. In order to get the array right, we use two layers of subforms (subForm for $contacts, and rowForm to create each row of the table). I couldn’t figure out a good way to not do that and still get the array I wanted in the html. setElementsBelongTo doesn’t quite do the trick.

$form = new Zend_Form();
$form->setMethod('post')
     ->setAttrib('id', 'contactForm');
$subForm = new Zend_Form_SubForm();

This just sets up the form, tells the form it should post and have an id of ‘contactForm’. You might note that I didn’t set an action for the form. Zend_Form does set the action, but leaves the value blank. This conveniently posts the form back to our action (supposing all the browsers handle blank actions as specified in the relevant RFCs). The $subForm line just creates our first subForm for use later.

foreach($array as $rownum => $row){
  $id = $row['id'];
  $rowForm = new Zend_Form_SubForm();
  foreach($row as $key => $value){
    if($key == 'id') continue;
    $rowForm->addElement(
      'text',
      $key,
      array(
        'value' => $value,
      )
    );
  }
  $rowForm->setElementDecorators(array(
    'ViewHelper',
    'Errors',
    array('HtmlTag', array('tag' => 'td')),
  ));
  $subForm->addSubForm($rowForm, $id);
}

For each row in our data we create a subForm, which we populate with an element for each field in our data, setting the value for each to the value from our data. We decorate this subForm in the loop, wrapping each element in a td tag. Note that we don’t need to worry about the name of the element. We just set it to our data field name, and the framework’s subForm handling deals with the rest. Of course in practice your fields might not all be simple text fields, so the actual code would get more complicated but the process is the same. I also should mention that in practice you almost certainly want to check that $array is actually an array before you do this, or you’ll be looking at lots of warnings (at least) in your logs.

$subForm->setSubFormDecorators(array(
  'FormElements',
  array('HtmlTag', array('tag'=>'tr')),
));

$form->addSubForm($subForm, 'contacts');

$form->setSubFormDecorators(array(
  'FormElements',
  array('HtmlTag', array('tag' => 'tbody')),
));

Now that we have a rowForm for each data row added to our subForm, we can decorate each of these with a tr tag, and assign the whole thing back to the parent form. This is where we tell Zend_Form that the parent should be ‘contacts’, so that gets in our result array. Then we decorate the contacts subForm with the tbody tag to get it nicely fit into the table.

$form->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'table')),
    'Form'
));

We need to decorate the whole form with a table tag. This likely needs a class and id, but we leave it plain in this example.

$form->addElement(
  'submit', 'submit', array('label' => 'Submit'));

$form->submit->setDecorators(array(
    array(
        'decorator' => 'ViewHelper',
        'options' => array('helper' => 'formSubmit')),
    array(
        'decorator' => array('td' => 'HtmlTag'),
        'options' => array('tag' => 'td', 'colspan' => 4)
        ),
    array(
        'decorator' => array('tr' => 'HtmlTag'),
        'options' => array('tag' => 'tr')),
));

Chances are we want a submit button, so here we add it to the bottom, and decorate it with its own row in the table.

The order of a surprising amount of this is arbitrary. You could set the table tag toward the top, for example, if it flows better for you. There are, of course, also completely different ways to do this. Several of the examples in the manual extend Zend_Form rather than do it the way that I have here. To me, this seems more clear.

[2010-02-06 I edited this slightly to fix some formatting issues introduced by a WordPress migration.  After almost two years this post still gets visits, and I figured maybe it should be readable.]