Zend_Form + DHTML content

Question

Whats the best way to dynamically add NEW dhtml content to a form that's generated via Zend_Form. Example, say the form is created like so:

class formUser extends Zend_Form {
    public function __construct( $options = null ) {
        parent::__construct( $options );

        $page1 = new Zend_Form_Element_Text( 'page1' );
        $page1->setLabel( 'Page 1' );

        $submit = new Zend_Form_Element_Submit( 'submit' );
        $this->addElements( array( $page1, $submit ) );
    }
}

Here the form creates ONE and only ONE element called "page1," but what if I wanted to throw in an "Add" button in the view that would dynamically generate more elements, like page2, page3, page4, etc, while integrating it with Zend_Form ?

Here is the effect I'm talking about

This isn't me, but he's got the same question and maybe worded it better

In my case, its actually a children and parent relationships. Around this area, a person could have 0 or 15 kids and I wouldn't raise an eyebrow.

Thanks!

Answer 1

An hint to accomplish your task could be to define an hidden input where you could increment your 'pageNb' when you add a new element.

Then to filter & validate your form, you could use a loop to dynamicly create your element and its validations requirement in your controller.

Something like :

// PHP

$userForm = new formUser();

for ($i = 0; $i < $_POST['pageNumber']; ++$i)
{
  $element = new Zend_Form_Element_Text('page' . $i);
  $element->addValidator('SomeValidator');

  $userForm->addElement($element);
}

if ($userForm->isValid($_POST]) 
{
 // bla bla bla
}

// Javascript

function addNewInput ()
{
   pageNb = document.getElementbyId('pageNb').value;
   pageNb.value = ++pageNb;
   // here put the trick to create a new node/input element.
   newElement.id = pageNb.value;
}

Answer 2

I don't think you need any special Zend stuff to solve this - the javascript example you posted will add the html in your page where you want it, then when you submit it, you'll have your data on the posted page all the same. Just make sure to follow the naming scheme you use in when you start. You can even use array

$element->setIsArray(true);

to create HTML like this

name="foo[]" id="foo"

Answer 3

I don't have time to go into the details of coding this right now, but here's how I would go about it:

Since you want the structure of your form (and not just it's data) to be editable, you will have to instantiate it and store it in your session.

Instead of just generating some additional HTML markup, you JavaScript would have to make an Ajax call back to your server. The action called this way when the "add" button is clicked, would then alter the Zend_Form instance store in your session. The Ajax call could then return either the additional markup to be inserted or the new version of the entire form markup.

In the former case, it would be up to your JavaScript code to ensure that the markup is inserted in a way that the browser display is consistent with the Zend_Form representation on the server. In the latter case - where the entire form is returned - user input would have to be transferred in the Ajax call or it would be lost when the form is replaced by it's new version.

Answer 4

hello,

an implementation of "cg" answer is found well described here. http://www.jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/