|
|||
|
Hi,
Is there a particular way to show/hide elements by ticking a checkbox within a Zend_Form? My form has been set up using zend_form_elements as oppose to coding them in using Html and as such I'm finding it difficult to add a javascript onlclick event to show/hide another element of the form. Could anyone forward any suggestions? Any suggestions are appreciated |
|
|||
|
I like to avoid javascript as much as possible, but you will need to use some javascript to accomplish this. I personally use the submit(); method for the onClick event or onChange event of the form element, then have logic in your controller to either add, or not add the element based on the value in POST for the checkbox.
For example using a drop-down to change whether or not a textbox appears on the form: Code:
public function saveAction()
{
// get the $showTextField from the POST if there is one
if ($this->_request->isPost()) {
$showTextField = $this->_request->getPost('show_text_field');
} else {
$showTextField = 0;
}
// get the form object
$this->view->form = $this->getForm($showTextField);
// rest of the controller logic goes here
}
private function getForm($showTextField)
{
// ...create the form object here
// show_text_field
$options = array(1 => 'Yes', 0 => 'No');
$form->addElement('select', 'show_text_field');
$form->show_text_field->setLabel('Show Text Field:')
->setOptions(array('onChange' => 'submit();'))
->setRequired(true)
->setMultiOptions($options)
->addValidator('Int')
->addFilter('StripTags');
if ($showTextField) {
// first_name
$form->addElement('text', 'first_name');
$form->first_name->setLabel('First Name:')
->setOptions(array('size' => 30,
'maxlength' => 50))
->addValidator('stringLength', true, array(1, 50))
->setRequired(false)
->addFilter('StripTags');
}
return $form;
}
|
|
|||
|
Thanks for the response jweber.
In the end I used prototype.js, adding this to my view script: <script type="text/javascript" src="../'path to prototype library'/prototype.js"></script> function init() { Event.observe($('checkme'), 'click', toggleComments, false); toggleComments(); } /*comments being the element to appear/fade and checkme being the check box used to toggle the control*/ function toggleComments(e){ var dd = $('comments').ancestors()[0]; if ($('checkme').checked == true) { Effect.Appear(dd); } else { Effect.Fade(dd); } } init(); Hope this helps others. |
|
|||
|
If you don't use Prototype for other functionality it doesn't make any sense.
I would rather use onClick and some simple JS function setting field from disabled to enabled and changing the style of a <div> with hidden elements from display: none to block. |
![]() |
| Thread Tools | |
| Display Modes | |
|
|