Question

I have the following element being created in Zend Form:

    // Add the submit button
    $this->addElement('button', 'cancel', array(...)
    ));

Which creates a button element as expected. What if I want to create a button element with span tag nested inside like so:

<button ...> 
<span>Cancel</span> 
</button> 

Any ideas?

Answer 1

The problem with the answers in the other question is that it renders the buttons translatable capability useless.

Here’s my solution. It’s practically a copy of both Zend_Form_Element_Button and Zend_View_Helper_FormButton, with added functionality.

The form element:

class App_Form_Element_ButtonPadded
    extends Zend_Form_Element_Button
{
    public $helper = 'formButtonPadded';

    public function init()
    {
        $this->getView()->addHelperPath( 'App/View/Helper', 'App_View_Helper' );
    }
}

The view helper:

class App_View_Helper_FormButtonPadded
    extends Zend_View_Helper_FormElement
{

    public function formButtonPadded( $name, $value = null, $attribs = null )
    {
        $info    = $this->_getInfo( $name, $value, $attribs );
        extract( $info ); // name, id, value, attribs, options, listsep, disable, escape

        // Get content
        $content = '';
        if( isset( $attribs[ 'content' ] ) )
        {
            $content = $attribs[ 'content' ];
            unset( $attribs[ 'content' ] );
        } else {
            $content = $value;
        }

        // Ensure type is sane
        $type = 'button';
        if( isset( $attribs[ 'type' ] ) )
        {
            $attribs[ 'type' ] = strtolower( $attribs[ 'type' ] );
            if( in_array( $attribs[ 'type' ], array( 'submit', 'reset', 'button' ) ) )
            {
                $type = $attribs[ 'type' ];
            }
            unset( $attribs[ 'type' ] );
        }

        // build the element
        if( $disable )
        {
            $attribs[ 'disabled' ] = 'disabled';
        }

        $content = ( $escape ) ? $this->view->escape( $content ) : $content;

        $xhtml = '<button'
                . ' name="' . $this->view->escape( $name ) . '"'
                . ' id="' . $this->view->escape( $id ) . '"'
                . ' type="' . $type . '"';

        // add a value if one is given
        if( !empty( $value ) )
        {
            $xhtml .= ' value="' . $this->view->escape( $value ) . '"';
        }

        $paddingTag = 'span';
        if( isset( $attribs[ 'paddingTag' ] ) )
        {
            $paddingTag = strtolower( (string) $attribs[ 'paddingTag' ] );
            $paddingTag = strlen( $paddingTag ) ? $paddingTag : 'span';
            unset( $attribs[ 'paddingTag' ] );
        }

        $paddingTagRepeat = 1;
        if( isset( $attribs[ 'paddingTagRepeat' ] ) && $attribs[ 'paddingTagRepeat' ] >= 0 )
        {
            $paddingTagRepeat = (int) $attribs[ 'paddingTagRepeat' ];
            unset( $attribs[ 'paddingTagRepeat' ] );
        }

        $paddingStartTag = '<' . $paddingTag . '>';
        $paddingEndTag = '</' . $paddingTag . '>';
        $content = str_repeat( $paddingStartTag, $paddingTagRepeat ) . 
                   $content .
                   str_repeat( $paddingEndTag, $paddingTagRepeat );

        // add attributes and close start tag
        $xhtml .= $this->_htmlAttribs( $attribs ) . '>';

        // add content and end tag
        $xhtml .= $content . '</button>';

        return $xhtml;
    }
}

Possible usage:

$paddedButton = new App_Form_Element_ButtonPadded( array(
    'type' => 'submit',
    'label' => 'Your possibly translatable label',
    'paddingTag' => 'span',
    'paddingTagRepeat' => 2 // I've had to use double span's inside the button for my app
) );

Improvements welcomed.