Add div around input field in ZF2 form - forms

I am creating a form with Zend Framework 2. I'm using Form class to define form elements like this:
class PropertyForm extends Form
{
public function __construct($name=null)
{
...
$this->add(array(
'name' => 'zip',
'type' => 'Text',
'required' => false,
'options' => array(
'label' => 'Zip Code',
),
'attributes' => array(
'id' => 'zip',
'class' => 'form-control',
),
));
...
}
}
And in view I display this form element with the following code:
<div class="form-group"><?php echo $this->formRow($form->get('zip')); ?></div>
This generates the following HTML output:
<div class="form-group">
<label for="zip">Zip Code</label>
<input type="text" name="zip" id="zip" class="form-control" value="">
</div>
What I want to achieve is to have <div class="my-class"> around the input field as well. So the desired HTML output would be:
<div class="form-group">
<label for="zip">Zip Code</label>
<div class="my-class">
<input type="text" name="zip" id="zip" class="form-control" value="">
</div>
</div>
How can I achieve that?

You could get label and the element itself with two different calls:
For label:
<?php echo $this->formLabel($yourForm->get('your_element')); ?>
For the elements:
<?php echo $this->formSelect($yourForm->get('your_element_select')); ?>
<?php echo $this->formText($yourForm->get('your_element_text')); ?>
<?php echo $this->formRadio($yourForm->get('your_element_radio')); ?>
So, for you example, it would be something like:
<div class="form-group">
<?php echo $this->formLabel($form->get('zip')); ?>
<div class="my-class">
<?php echo $this->formText($form->get('zip')); ?>
</div>
</div>

Related

Multiple form in the same ctp file with same controller in cakephp 3

I have an issue with a 2 different forms in one ctp file.
explanation : I want to use two forms related to different actions in same controller. I use the first form to add 2 text field a table and I use the second form just to search and retrieve the data.
MY ctp:
Form 1 adding message and Email
<?= $this->Form->create($message) ?>
<div class="form-group">
<label for="name" class="col-form-label">Name</label>
<input name="name" class="form-control" id="name" placeholder="Your Name" type="text">
</div>
<div class="form-group">
<label for="email" class="col-form-label">Email</label>
<input name="email" class="form-control" id="email" placeholder="Your Email" type="email">
</div>
<?= $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]);
$this->Form->end() ?>
Form 2 Searching field :
<?= $this->Form->create(null, ['url' => ['action' => 'search']]) ?>
<div class="form-group">
<label for="what" class="col-form-label">What?</label>
<input name="what" class="form-control" id="what" placeholder="What are you looking for?" type="text">
</div>
<div class="form-group">
<?php echo $this->Form->input('country_id', [
'options' => $countries,
'id' => 'country_id',
'label' => ['text' => __('Where?')]
]); ?>
</div>
<button type="submit" class="btn btn-primary width-100">Search</button>
<?= $this->Form->end() ?>
So i clicked on submit it works fine but when I clicked on search it doesn't go to the desired action it is still in the same action . Thank you!
This code is not doing what you think it's doing:
<?= $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]);
$this->Form->end() ?>
It will echo the submit button but NOT the form end tag. You then open another form, but the browser may interpret this as a bad tag and ignore it. (Technically, I think the browser behaviour towards this malformed HTML is undefined, so you might get different behaviour from different browsers.)
Try this instead:
<?php
echo $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]);
echo $this->Form->end();
?>
or
<?= $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]);
echo $this->Form->end() ?>
or
<?= $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]) .
$this->Form->end() ?>
I'd recommend the first option as being much clearer code and less prone to accidental breakage with future edits; I would never allow either of the latter two on a project I was managing.
The problem was solved by replacing this code:
<?= $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]);
$this->Form->end() ?>
By this :
<?php
echo $this->Form->button('Submit', ['class'=> "btn btn-primary large icon float-right"]);
echo $this->Form->end();
?>

cakephp login form not working

I've made a login form and now I need to have the same code in one of my Cakephp project but it doesn't work..
<!-- LOGIN SECTION START -->
<section id="login">
<div class="container">
<div class="row">
<div class="Absolute-Center is-Responsive">
<h1 class="text-center form-login-title">Log In</h1>
<div class="col-sm-12 col-md-12 col-md-offset-0">
<?php echo $this->Session->flash('auth'); ?>
<?php echo $this->Form->create('User');?>
<div class="form-group inner-icon right-icon"> <!--USER NAME-->
<i class="glyphicon glyphicon-user"></i>
<input class="form-control" type="text" name='username' placeholder="username"/>
</div>
<div class="form-group inner-icon right-icon"> <!--PASSWORD-->
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control" type="password" name='password' placeholder="password"/>
</div>
<?= $this->Form->end(__('Sign In')); ?> <!-- SUBMIT BUTTON -->
<div class="form-group text-center">
Forgot Password
</div>
</div><!-- /.col-sm-12 -->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- LOGIN SECTION END -->
So with that snippet does not let me log in (the back end is not the problem)
Oh, and how can I change the submit button style ? I've tried <?= $this->Form->end(__(Sign In), array('class'=>'btn-primary')); ?>
but it doesn't help much :(
Thanks
You should use the CakePHP helpers, so instead plain HTML:
Change this:
<input class="form-control" type="text" name='username' placeholder="username"/>
Into this:
<?php
echo $this->Form->input('username', array(
'class' => 'form-control',
'placeholder' => 'username',
'label' => false
));
?>
And this:
<input class="form-control" type="password" name='password' placeholder="password"/>
Into this:
<?php
echo $this->Form->input('password', array(
'type' => 'password',
'class' => 'form-control',
'placeholder' => 'password',
'label' => false
)); ?>
CakePHP Helper will print the input fields with the correct name values for each one, so in your controller you receive the correct data through the array $this->request->data.
For the button style try:
<?=$this->Form->end('Sign In', array('class'=>'btn btn-danger'))?>
Like Ricardo mentioned,use CakePHP syntax and conventions.
Also it will be more helpful if you provide your controller actions. Probably your action is wrong.
For more things about forms and auth here:
http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html
http://book.cakephp.org/2.0/en/core-libraries/components/authentication.html

How change standard decoration in zend form

in my Directory Form i have FormArena
$this->addElement('radio', 'warrior',array(
'decorators' => array(
'ViewHelper',
),
'disableLoadDefaultDecorators' => true,
'separator' => '',
));
On my view page i have
<?php echo $this->forms['formarena']->getItem('warrior'); ?>
And in controller i have
$getWarriorsList = $this->objArena->getActiveUsers($this->varUserData['id']);
$objFormArena = new FormArena();
if (!empty($getWarriorsList)){
foreach($getWarriorsList AS $varWarriors)
$varOptions[$varWarriors['id_users']] = $varWarriors['nick'];
$objFormArena->warrior->addMultiOptions($varOptions);
unset($varOptions);
}
$this->view->forms = array(
'formarena' => $objFormArena,
);
Ok so it is easy. I take data from base and add option to view by controller. But when i see source code on page i have:
<div class="radio">
<label for="warrior-27">
<input type="radio" name="warrior" id="warrior-27" value="27">makapaka</label>
<label for="warrior-29">
<input type="radio" name="warrior" id="warrior-29" value="29">Kasia</label>
</div>
but i need do
<div class="radio">
<input id="warrior-27" type="radio" name="warrior" value="27">
<label for="warrior-27">makapaka</label>
<input id="warrior-29" type="radio" name="warrior" value="29">
<label for="warrior-29">Kasia</label>
</div>
What should i need to do. I tried search from web but i have still nothing from 2 days :(
The current option does not allow rendering in the exact format you wished.
It can only be either
<div class="radio">
<label for="warrior-27">
<input type="radio" name="warrior" id="warrior-27" value="27">makapaka</label>
<label for="warrior-29">
<input type="radio" name="warrior" id="warrior-29" value="29">Kasia</label>
</div>
or
<div class="radio">
<label for="warrior-27">
makapaka
<input type="radio" name="warrior" id="warrior-27" value="27"></label>
<label for="warrior-29">
Kasia
<input type="radio" name="warrior" id="warrior-29" value="29"></label>
</div>
To render your form element as you mentioned, you need to create either a custom view helper and pass it as an option to the ViewHelper decorator or use the ViewScript decorator to generate a custom output.
Personally, I would prefer the ViewScript decorator for its easy of use.
Example of use :
$this->addElement('radio', 'warrior',array(
'decorators' => array(
array('ViewScript', array('viewScript' => 'decorator.phtml'))
)
));
and in your decorator.phtml
<div class="radio">
<?php foreach($this->element->getMultiOptions() as $value => $label): ?>
<input id="<?php echo $this->element->getName() ?>-<?php echo $value ?>" type="radio" name="<?php echo $this->element->getName() ?>" value="<?php echo $value ?>">
<label for="<?php echo $this->element->getName() ?>-<?php echo $value ?>"><?php echo $label ?></label>
<?php endforeach ?>
</div>
NB : This script file can be used for all your form radio elements
Hope it helps

Zend Form Decorators issue

*I speak English not well. So i'm going to post the code now.*
Form code:
protected $elementDecorators = array('ViewHelper','Errors','Description','Label',
array('HtmlTag',array('tag' => 'div','class' => '_wrapperElement')
));
public function init(){
$this->addElement('text','mytext',array(
'class' => '_inputText',
'label' => 'Mytext',
'required' => true,
'decorators' => $this->elementDecorators
));
$this->setDecorators(array('FormElements',array('HtmlTag',array('tag' => 'div','class' => '_formWrapper')),'Form'));
}
Output:
<form method="post" action="" enctype="application/x-www-form-urlencoded">
<div class="_formWrapper">
<div class="_wrapperElement">
<label class="required" for="mytext">Mytext</label>
<input type="text" class="_inputText" value="" id="mytext" name="mytext">
</div>
</div>
</form>
Now i want a div wraps Label and Input element like this:
<form method="post" action="" enctype="application/x-www-form-urlencoded">
<div class="_formWrapper">
<div class="_wrapperElement">
<div class="_wrapperLabel">
<label class="required" for="mytext">Mytext</label>
</div>
<div class="_wrapperInput">
<input type="text" class="_inputText" value="" id="mytext" name="mytext">
</div>
</div>
</div>
</form>
How to do that?
I tried many times but i can't do it.
Thanks!
protected $elementDecorators = array('ViewHelper','Errors','Description', array('Label', array('tag' => 'div', 'class' => '_wrapperLabel')
),
array('HtmlTag',array('tag' => 'div','class' => '_wrapperInput')
));
i found the solution that render decorators to ViewScript.

Decorators ul li zend_form

<form enctype="application/x-www-form-urlencoded" action="" method="post">
<ul>
<div>
<fieldset id="fieldset-groups"><legend>Endereço</legend>
<li>
<label for="name" class="optional">Name</label>
<input type="text" name="name" id="name" value="">
<div class="errors">
<p>Error</p>
</div>
</li>
</fieldset>
</div>
</ul>
</form>
How do I make my way the code above, using the decorator zend?
I tried this way:
$this->addDecorator('FormElements')
->addDecorator('HtmlTag', array('tag' => 'ul'))
->addDecorator('Form');
$this->setElementDecorators( array(
'ViewHelper',
'Label',
'Errors',
new Zend_Form_Decorator_HtmlTag(array('tag' => 'li'))
));
$this->setDisplayGroupDecorators( array(
'FormElements',
'Fieldset',
'FormErrors',
new Zend_Form_Decorator_HtmlTag(array('tag' => 'li')),
));
The problem is that I need to float the label and text elements, so I tried to use a list.
This was the only way I could.