Question

I want a basic:

<input type="text" />

And I would like the default value to clear when the user puts in a value (kinda like this). It would be ideal if the default value returned onBlur.

I don’t want the default value to be submitted if they leave it and click submit.

I’m generating the form using Zend, and imagine my solution can fit entirely into a Zend Form Decorator.

I can’t find any existing ones, so I ask:

Do you have said decorator? Or something that will help me make one?

Answer 1

Ok, I’ve built a decorator which allows me to implement the jquery plugin Ololo posted.
It checks to see if the element has a Label set, and if it does, defaults to that:

require_once 'Zend/Form/Decorator/Abstract.php';

class Application_Form_Decorator_DefaultEnabledInput extends Zend_Form_Decorator_Abstract
{
    private $attribs = array();
    public function render($content)
    {
        $element = $this->getElement();

        if(get_class($element) != 'Zend_Form_Element_Text') throw new Exception("Application_Form_Decorator_DefaultEnabledInput only works on text fields");

        $element->setAttrib('type', 'text');
        $element->setAttrib('name', htmlspecialchars($element->getName()));
        $element->setAttrib('value', htmlspecialchars($element->getValue()));

        $attribs = '';
        $default = $element->getLabel();
        if($default)
        {
            $element->setAttrib('rel', $default);
            $element->setAttrib('title', $default);
            $class = $element->getAttrib('class');
            $element->setAttrib('class', "$class hasDefault");
            $default = "";
        }
        foreach($element->getAttribs() as $key => $val) $attribs .= "$key='$val' ";
        return "<input $attribs/>";
    }
}

It allows me to define a default value in the form object (using setLabel).

    $element = $this->createElement('text', 'suburb');
    $element->setDecorators(array('DefaultEnabledInput'));
    $element->setLabel('enter suburb here');
    $this->addElement($element); 

And all I need to do then is ensure that query and plugin are included on the page, and this piece of code:

$(document).ready(function() {
    // default values
    $('.hasDefault').each(function(){
        $(this).defaultValue();
    });
});

Then in the template, I can display the object like this:

<?= $this->form->getElement('suburb') ?>