Zend_Form Multiple dropdown as one value

Question

Hello,

For my zend form I would like a month drop down and a year drop down.

I would like them to appear next to each other. Its okay for them to be separate elements in the zend_form and combine and check them in the controller, but for the design I would like them to sit right next to each other.

I could accomplish this by setting no label on the year and then doing some css trickery, but I'd like a cleaner solution.

Edit, Final Code:

public function init($options=array()) {

        $this->setName('add');
        $this->setMethod('post');

        $name           = new Zend_Form_Element_Text('name');
        $number         = new Zend_Form_Element_Text('number');
        $cvv            = new Zend_Form_Element_Text('cvv');
        $expiry_month   = new Zend_Form_Element_Select('expiry_month');
        $expiry_year    = new Zend_Form_Element_Select('expiry_year');
        $amount         = new Zend_Form_Element_Select('amount');
        $submit         = new Zend_Form_Element_Submit('Submit');

        $amounts        = self::load_amounts();
        $months         = self::load_months();
        $years          = self::load_years();

        $name->setLabel("Name On Card")->setIgnore(false)->setRequired(true);
        $number->setLabel("Card Long Number")->setIgnore(false)->setRequired(true);
        $cvv->setLabel("CVV2")->setIgnore(false)->setRequired(true);
        $expiry_month->setMultiOptions($months);
        $expiry_year->setMultiOptions($years);
        $amount->setLabel("Amount")->setIgnore(false)->setRequired(true)->setMultiOptions($amounts);
        $submit->setLabel("Submit")->setIgnore(true);
        $this->addElements(array($name, $number, $cvv, $expiry_month, $expiry_year, $amount, $submit));
        $this->addDisplayGroup(array('expiry_month', 'expiry_year'), 'Expires');
    }

and if its helpful to anyone, I don't think you can set a label, but you can set a fieldset title via:

$this->addDisplayGroup(array('address', 'city', 'state', 'country', 'zip'), 'Address', array('legend' => 'Billing Address'));

Answer 1

I some code with a different approach, but you can have a label set for the row and both month and year appear on the same row. They are also validated together as one unit with a custom validation class, I'll post the part you asked here.

$expMonth = new Zend_Form_Element_Select('exp_month');
$expMonth->setLabel('Card Expiry Date:')
    ->addMultiOptions(
        array('1' => '01', '2' => '02', '3' => '03', '4' => '04 shortened')
    ->setDescription('/');
$this->addElement($expMonth);

// Generate the Expiry Year options
$expYearOptions = array();
$thisYear = date('Y');

for ($i = 0; $i < 15; ++$i) {
   $val = $thisYear + $i;
   $expYearOptions[$val] = $val;
}


// The Expiry Year field
$expYear = new Zend_Form_Element_Select('exp_year');
$expYear->removeDecorator('label')
    ->addMultiOptions($expYearOptions)
    ->setDescription(' (Month / Year)');
$this->addElement($expYear);

// Setup Expiry Month decorators
$expMonth->setDecorators(array(
// Show form element
    'ViewHelper',
    // This opens the wrapping DD tag but doesn't close it, we'll close it on
    // the year field decorator later
    array(array('data' => 'HtmlTag'), array('tag' => 'dd', 'id' => 'card-expire',
        'openOnly' => true)),
    // Using this to slip in a visual seperator "/" between both fields
    array('Description', array('tag' => 'span', 'class' => 'seperator')),
    // Show the label tag displayed for exp_month
    array('Label', array('tag' => 'dt'))
));

// Now for the Expiry Year field decorators
$expYear->setDecorators(array(
    'ViewHelper',
    // Inserting the "(Month / Year)" line using Description
    array('Description', array('tag' => 'small', 'class' => 'greyout')),
    // "row" is normally used to wrap a whole row, label + form element.
    // I'm "misusing" it to close off the DD tag we opened in the month field earlier
    // If you are already using "row", you might choose to echo the form line by line,
    // where you close the dd tag manually like: echo
    //      $this->form->getElement('exp_year').'</dd>';
    array(array('row' => 'HtmlTag'), array('tag' => 'dd', 'closeOnly' => true))
));

The full code with expiry validation can be found on my blog: http://hewmc.blogspot.com/2010/08/validating-month-and-year-fields-as-one.html