Not my idea, but I need a set of radio buttons, where the last buttons value is a select box. Visual explanation:
o Opt 1
o Opt 2
o |___SelectBox|
What it would look like in HTML:
<input type="radio" name="radioSet">Opt1
</input>
<input type="radio" name="radioSet">Opt2
</input>
<input type="radio" name="radioSet"><!-- Opt 3 -->
<select>
<option value="a"> aaa</option>
<option value="b"> bbb</option>
</select>
</input>
What I've done in ZF so far:
$picker = new Zend_Form_Element_Select('selectBox', array(
'multiOptions' => array('a'=>'aaa', 'b' =>'bbb'),
'decorators' => array(
array('Label', array('escape'=>false))
)
));
$this->addElement(
'radio',
'radioSet',
array(
'multioptions' => array(
'x'=>'Opt1',
'y'=>'Opt2',
'z'=>$picker //'Dropdown picker'
),
'label' => 'My Title:',
'decorators' => array(
'ViewHelper',
'Errors',
array('Description', array('escape' => false)),
'Label',
array('HtmlTag', array('tag'=>'div')),
),
)
);
But this returns just the 3 radio buttons, as well as the labels "Opt1" and "Opt2", but nothing after the third radio button.
I WANT it to be like the HTML code shown above, but this ZF code does not return it. Anyone an idea how this can be accomplished?
Thanks!
unfortunately you probably going to have to write a decorator to replace the label tag with a select. Looking at the code for the Zend_Form_Element_Radio() it specifically adds the label tag to the radio.
Thanks for your advices. I'm quite new to Zend, so I checked up how to make a custom view helper decorator, I couldn't manage to get it to work like that, but it helped me in another problem though.
I came to the solution, that it's easier to just add the select box as an individual element afterwards, and style it to the desired position with css.
Thanks again.
Related
This question already has an answer here:
globally change ZF2 form formatting
(1 answer)
Closed 7 years ago.
I am creating a form using Zend Framework 2 and the Skeleton Application.
I want my layout to replicate the default example:
As you can see above, the form inputs stretch to the width of the screen. The code to produce this is (using just the email address field as an example):
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" placeholder="Email" id="exampleInputEmail1" class="form-control">
</div>
I would like the same result to happen when I add my own form element using Zend Framework 2 (Skeleton application). But when I add an element:
$this->add(array(
'name' => 'campaign_code',
'type' => 'Text',
'options' => array(
'label' => 'Campaign Code',
),
'attributes' => array(
'class' => 'form-control',
)
));
The resulting HTML is:
<div class="form-group">
<label>
<span>Campaign Code</span>
<input class="form-control" type="text" name="campaign_code">
</label>
</div>
Resulting in:
Notice how the label tag is surrounding the span and input elements? I don't want that. I want the label tag to close itself as in the first html example.
The form view helpers are so smart while rendering the elements from your form.
Add an id attribute with respective element
$this->add(array(
'name' => 'campaign_code',
'type' => 'Text',
'options' => array(
'label' => 'Campaign Code',
),
'attributes' => array(
'class' => 'form-control',
'id' => 'your_id',
)
));
I'm developing a custom form module in Drupal 7. I would like to wrap my form inputs in the label tags like this:
<div class="form-item form-type-textfield form-item-FirstName">
<label for="edit-firstname">First Name
<span class="form-required" title="This field is required.">*</span>
<input type="text" id="edit-firstname" name="FirstName" value="" size="25" maxlength="37" class="form-text required" /></label>
</div>
The label closing tag is after the end of the input. Normally it would be after the span closing tag.
I think I'll need to override the 'theme_form_element_label' function in the 'includes/form.inc' but I'm not sure how to go about it.
I don't know why you would wrap a form element around a form element. But to answer your question use the '#prefix' and '#suffix' keys to add your label.
So your code may look similar to this:
$form['first_name'] = array(
'#type' => 'textfield',
'#prefix' => '<label for="edit-firstname">' . t('First Name'),
'#suffix' => '</label>',
'#required' => TRUE
);
If you are trying to put a label next to a textfield all you would need to do is add the '#title' key to your textfield element. So it may look like this:
$form['first_name'] = array(
'#type' => 'textfield',
'#title' => t('First Name'),
'#required' => TRUE
);
I've got a problem with zend decorators and can't figure out how to place an element in form where i want to have him.
I got a form where decorators are putting my data into a table, but i want to have my submit out of the table. For now i have something like that:
for ($i = 0; $i < $numRows; $i++) {
$select = new Zend_Form_Element_Select('article' . $i);
$select->setAttrib('style', 'margin-top:10px;width:200px;');
$select->addMultiOption('1', $this->translate->_('Zatwierdzony do druku'));
$select->addMultiOption('0', $this->translate->_('Niezatwierdzony do druku'));
$select->setValue($rows[$i]['reviewed']);
$select->setDecorators(
array(
'ViewHelper',
array(
array('data' => 'HtmlTag'),
array('tag' => 'td', 'class' => 'padding5 tdcenter')
),
array(
'AnyMarkup',
array(
'markup' => $this->_getMarkupForRow($i, $rows),
'placement' => 'PREPEND',
)
),
array(
array('row' => 'HtmlTag'),
array('tag' => 'tr', 'openOnly'=>true)
),
),
array('submit'),
false
);
$this->addElement($select);
}
$submit = new Zend_Form_Element_Submit('updatetoprint');
$submit->setAttrib('id', 'updatetoprint');
$submit->setLabel('Zapisz');
$submit->setDecorators(
array(
'ViewHelper',
array(
array('data' => 'HtmlTag')
),
array(
array('row' => 'HtmlTag'),
array('tag' => 'div', 'closeOnly'=>true,'style' => 'float:left;')
)
//here i dont know how to get my submit on the bottom under the table...?
),
array('submit')
);
$this->addElement($submit);
On site that looks like this:
And i'd like to have my submit on the bottom under the table... Please help me :)
I don't see where you are assigning your form to the view or if your form is a Zend_Form or not so I'm going to make some assumptions.
I'm going to assume you are using Zend_Form to build your form and I'm going to assume you are assigning your form to the view in the traditional manner inside a controller action $this->view->form = $form;
So with that being said, in your view script you have access to each individual element simply by <?php echo $this->form->elemenetName ?> where elementName is the name you have given your element in your case your submit button has the name 'updatetoprint'.
With this in mind if you need to create a table or any other layout you could simply create generic elements in your form and just add them as needed to any view script. Might prevent you from performing all those gymnastics with decorators.
For example view.phtml might look like:
<form action="<?php echo $this->form->getAction() ?>" method="<?php echo $this->form->getMethod() ?>">
<table>
<tr>
<th>Dodal</th>
<th>Tutyl</th>
<th>Status</th>
</tr>
<!--you should probably put the next 5 lines into a partial and use partialLoop($data)-->
<tr>
<td><?php echo $this->form->dodal ?></td>
<td><?php echo $this->form->tutyl ?></td>
<td><?php echo $this->form->status ?></td>
</tr>
</table>
<?php echo $this->form->updatetoprint ?>
</form>
Then just style with css.
To setup the form to use the viewscript just use:
$form->setDecorators(array(
'PrepareElements',
array('ViewScript', array('viewScript' => 'form.phtml')),
));
where form.phtml is your viewscript name
[Edit]
After further consideration I realized that diplaying form elements in this manner has one serious drawback. The form is never initialized...the form tags are never sent. This edit is to correct that issue.
Sorry it took so long
I'd suggest adding all your elements apart from the submit button to a display group. You then give the display group a HtmlTag decorator (with the tag set to table), which will wrap all your elements with a table, making your HTML valid and giving you the layout you want.
I'm seeing lots of <tr> and <td> tags, but no <table> tag. What I think you are looking for is markup roughly like this:
<table>
<tr><td>info</td><td>more info</td><td>select element</td></tr>
<tr><td>info</td><td>more info</td><td>select element</td></tr>
<tr><td>info</td><td>more info</td><td>select element</td></tr>
</table>
<div>
<input type="submit">
</div>
What seems to be missing from your code are any decorators that produce the <table> and </table> tags. So, on the first iteration of the loop, use the AnyMarkup decorator to prepend a <table> and your header row. On the last iteration, add a decorator that appends the </table> tag.
Then your submit button (which is added last) should sit right underneath.
I want to add a specific class to an input if an error is genereted by the input.
For example, if input is empty and has required validator it shouls look like this:
<dd id="login-element">
<input type="text" name="login" id="login" value="" class="input-text error" />
<ul class="errors">
<li>Value is required and can't be empty</li>
</ul>
</dd>
class="input-text error"
Please tell me how to do that.
I solved it with jquery! :)
I used the standard Decorators and manipulate the class of the preview Object in DOM.
$('ul.errors').prev().addClass("FieldError");
Have a look at this tutorial to get a better understanding where to change your code: http://devzone.zend.com/article/3450-Decorators-with-Zend_Form
In your case, I would recommend either replacing the ViewHelper decorator with a decorator that creates the output you want. You can extend the Zend_Form_Decorator_ViewHelper class for this with your own code and overwrite the getElementAttribs() method to insert your class attribute.
Rather than creating a Decorator, easy way to do this is set the class while you add the element in the form class. For example, you can use the following in the init() method of your Zend_Form class
$this->addElement('text', 'email', array(
'label' => 'Your email address:',
'required' => true,
'filters' => array('StringTrim'),
'validators' => array(
'EmailAddress',
),
'class' => 'input-large'
));
I'm trying to set an id for one of my form's labels so I can hide it with jquery later. Here's my element:
$password = new Zend_Form_Element_Password('password');
$password->setLabel('Password:')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addValidator('NotEmpty')
->setAttrib( "id", "password" );
In the source, it looks like this:
<dt>
<label for="password" class="required">Password:</label>
</dt>
<dd>
<input type="password" name="password" id="password" value="">
</dd>
I need the label to look like:
<label id="pass_label" for="password" class="required">Password:</label>
Any ideas?
It doesn't seem possible to change the label's id using decorators, but you can easily add a classname
$decorators = array(
array('ViewHelper'),
array('Errors'),
array('Description', array('tag' => 'p', 'class' => 'description')),
array('HtmlTag', array('tag' => 'dd')),
array('Label', array('tag' => 'dt', 'class' => 'pass_label')),
);
$password->setDecorators($decorators);
This results in
<label class="pass_label optional" for="password">Password</label>
I tried to set the id in the same way and this does not work. If you pass an id in as the options array, this changes the value of the 'for' attribute
I know I'm late to the party, but if you're looking to hide it using jQuery, you can just select based off of the for attribute like so:
$('label[for="password"]').hide();
Should do the trick. Depending on the version of jQuery you may or may not need an # before the attribute like so:
$('label[#for="password"]').hide();