I am trying to figure our how to remove the label from a display group, when you look at the
markup below you will see that there is a dt with the id address-label and the following dd, I want to remove these but keep
the fieldset.
To add the display group I am using this $this->addDisplayGroup(array(...), 'legend' => 'address'); within
my form init class after I have added each of the elements. Are there some decorators I can play with to remove
the element I dont want?
<form id="CreateAddress" enctype="application/x-www-form-urlencoded" action="" method="post">
<dl class="zend_form">
<dt id="address-label"> </dt>
<dd id="address-element">
<fieldset id="fieldset-address">
<legend>Address</legend>
<dl>
<dt id="addressLine1-label">
<label for="addressLine1" class="required">Address Line 1</label>
</dt>
<dd id="addressLine1-element">
<input type="text" name="addressLine1" id="addressLine1" value="">
</dd>
...etc...
</fieldset>
</dd>
...buttons...
</dl>
</form>
Thanks,
Martin
If you want to apply it to all Zend Form Display Groups defined (for a particular form), a neater way is:
$form->setDisplayGroupDecorators(array(
'FormElements',
'Fieldset',
));
NOTE: this only alters previously defined Display Groups.
The removeDecorator parameter Zend_Form_Decorator_DtDdWrapper didn't work so I used:
$group = $form->getDisplayGroup('the name of the group');
$group->removeDecorator('DtDdWrapper');
So that you don't have to manually remove the DtDd's from each display group individually, you can use:
foreach ($this->_displayGroups as $dg){
$dg->removeDecorator('DtDdWrapper');
}
So what's the deal?
$group = $form->getDisplayGroup ('the name of the group');
$group->removeDecorator ('Zend_Form_Decorator_DtDdWrapper');
Related
We build a custom bundle follow with this instructor https://blog.sulu.io/how-to-develop-a-bundle-in-the-sulu-admin-1
We need to know how to pass data from a database to render radio input choices or dropdown select.
We try to create an add/edit form and in the form, we have a radio and dropdown we made with hardcore in HTML file in Vendor/TransportationBundle/Resources/public/js/components/transportation/form/form.html
The code is
<div class="grid-row">
<label for="transportation-transportationType"><%= translations.transportationType %></label>
<div class="custom-radio">
<input name="transportationType" id="transportation-transportationType-1" type="radio"
class="form-element content-type" value="1" data-mapper-property="transportationType">
<span class="icon"></span>
</div>
<span class="clickable"><%= translations.private_shuttle %></span>
<div class="custom-radio">
<input name="transportationType" id="transportation-transportationType-2" type="radio"
class="form-element content-type" value="2" data-mapper-property="transportationType">
<span class="icon"></span>
</div>
<span class="clickable"><%= translations.shared_shuttle %></span>
<div class="custom-radio">
<input name="transportationType" id="transportation-transportationType-3" type="radio"
class="form-element content-type" value="3" data-mapper-property="transportationType">
<span class="icon"></span>
</div>
<span class="clickable"><%= translations.airplane %></span>
</div>
Is this have a way to change those radio to fetch the data from an array or a way to fetch the data from some controller action? or Have another way to use twig file with twig feature instead of html file?
Please provide a solution for us? Thank you
Sorry for my English.
You can e.g. check this Controller from the core. You can get data from wherever you want in the controller and pass it to the template:
<?php
class AcmeController {
public function testAction() {
$data = /* Get data somehow */;
return $this->render('template', ['data' => $data]);
}
}
Then you can access the data using the data twig variable in the rendered template.
Say I have the following formGroup structure:
userGroup = {
name,
surname,
address: {
firstLine,
secondLine
}
}
This forces me to write HTML similar to the following:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
<input formControlName="secondLine">
</div>
</form>
Let's say, just for the sake of the example, that you are constrained to write HTML that looks like this:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
</div>
<hr>
<div formGroupName="someOtherGroup">
<input id="problemSecondLine" formControlName="???.secondLine">
</div>
</form>
Is there a way, to force the field with id=problemSecondLine to be under userGroup -> address -> secondLine, even though, visually, I have no option but to place it under this particular DIV?
I guess I can manually update via ngModel - but I'm trying to find the cleanest way possible.
You can use formControl directive instead of formControlName
<input id="problemSecondLine" [formControl]="userGroup.get('address.secondLine')">
Plunker Example
I would like to create a validator for abide for a set of checkboxes.
Let's consider a set of 5 checkboxes. The user is asked to check 3 max, and at least 1.
So, here is my work-in-progress code:
<div data-abide-validator='checkboxes' data-abide-validator-values='1,3'>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
<script>
$(document).foundation({
validators: {
checkboxes: function(el, required, parent) {
var countC = el.find(':checked').length;
alert(countC);
}
}
});
</script>
At this point, I just try to count the checked inputs. But it seems I can't even trigger the validator... I think I could manage to code my validation stuff if only I could figure out how to trigger it.
Indeed I didn't find many examples of the custom validator, and the official doc did not help me much.
Your HTML markup is not really "correct" for abide. You should be attaching the data-abide-validator attribute to the inputs, not the parent div. Additionally, you need some better markup so abide's default error display can work (and some better use of foundation's grid system to lay it out). I would point you toward the Abide Validation Page on Zurb's site for some examples of form markup.
I've taken the liberty of restructuring your markup to be something that is more becoming of a foundation layout:
<form action="/echo/html/" method="POST" data-abide>
<div class="row">
<div class="small-12 columns checkbox-group" data-abide-validator-limit="1,3">
<label>Check some boxes</label>
<small class="error">You have checked an invalid number of boxes.</small>
<ul class="small-block-grid-3">
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="1" /> 1
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="2" /> 2
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="3" /> 3
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="4" /> 4
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="5" /> 5
</label>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>
As to your JS code. It's not correct either. You need to address the abide -> validators namespace of the options, not just validators. I've rewritten your JS code to not only do that, but give the desired effect you wanted:
$(document).foundation({
abide: {
validators: {
checkbox_limit: function(el, required, parent) {
var group = parent.closest( '.checkbox-group' );
var limit = group.attr('data-abide-validator-limit').split(',');
var countC = group.find(':checked').length;
if( countC >= limit[0] && countC <= limit[1] ) {
group.find('small.error').hide();
//return true so abide can clear any invalid flags on this element
return true;
} else {
group.find('small.error').css({display:'block'});
//return false and let abide do its thing to make sure the form doesn't submit
return false;
}
}
}
}
});
In order to check adjacent elements when doing custom validation, you need to have something to target. The el variable in the validation function will be the DOM element of the input/field that is being validated. The required variable will tell you if the field is flagged as being required or not (boolean). The parent variable will be set to the "parent" of the field. I say "parent" because although the label tag is technically the parent of the input element, abide is smart enough to realize that the label is part of the field's element structure and skip over it to the li element instead.
From there, you need a way to identify a common parent. So I added the checkbox-group class to whatever element I decided to make the "parent" of all the checkboxes in the group. This is not a Foundation or Abide "magic" class, but rather something of my own creation for use in the validation function.
From there, you can easily trace the few lines of the validation function to see the workflow: Find the group container object, parse the limits off the container's data-abide-validator-limits attribute, count the number of checked inputs in the container, check if the number checked is between the limits, display/hide the error message and return true/false so abide knows if the field validated or not.
I've got a working Fiddle of it if you care to check it out yourself ;) Hopefully this was informative for you, and I wish you the best of luck playing with the awesome that is Foundation!
I've got a pretty nasty problem here!
I have an <ul> with a group of input in every <li>. In every list element there is a radio button and I want to group them together to make them toggle when clicked.
The problem is that the radios don't connect! if I click two of them they get both checked!
Here's the code: http://jsfiddle.net/bakaburg1/Djq5q/1/
To notice: this is the code for a wordpress custom field.
Many Thanks!
EDIT1:
it's important that the fields in every list element remain connected so that on the PHP side i got a data structure as such:
array (
0 =>
array (
'answer' => 'answer1',
),
1 =>
array (
'answer' => 'answer2',
),
2 =>
array (
'is_right' => 'on',
'answer' => 'answer3',
),
3 =>
array (
'answer' => 'yiuyiuyiuj',
),
)
EDIT2:
for the time being I patched the issue with some jQuery:
jQuery('.mm_ps_answers input:radio').click(function(){
jQuery(this).parents('ul').find('input:radio').not(this).attr('checked', false)
})
Not sure the most elegant solution though, feel free to comment (not answer) on this snippet too!
EDIT3:
I solved the problem by giving three different names to the fields, and then merging the POSTed data in one array to be then serialized and saved in the database.
<li>
<a class="mm_ps_move button"><img src="http://localhost:8888/minimamedicamenta/wp-content/themes/minima/img/move.png"></a>
<a class="mm_ps_delete_answer button">Delete Answer</a>
<input type="radio" class="mm_ps_is_right" name="mm_ps_answers_is_right[]">
<input type="text" name="mm_ps_answers_input[]" value="">
<input type="hidden" name="mm_ps_answers_impressions[]">
<span class="mm_ps_impressions">impressions: <span>0</span></span>
</li>
Another problem poped up though... while the POSTed data in the back end for the text input fields is a well ordered array with a value for every field, also the empty ones, the radiobutton send only one value, so i have no idea of wich radio in wich list element has been checked, any help on this? Here's is the data in the POST for the three inputs (values are random strings):
[04-Aug-2012 17:18:45] Line (in ):
array (
0 => 'cvxcv',
1 => 'vs',
2 => '',
3 => 's',
)
[04-Aug-2012 17:18:45] Line (in ):
array (
0 => 'on',
)
[04-Aug-2012 17:18:45] Line (in ):
array (
0 => '',
1 => '',
2 => '',
3 => '',
)
EDIT4:
I patched the issues with a javascript that assign an incremental numerical value to the radio buttons on every action that modify the list (sorting, adding, deleting elements). Not very clean although.
<ul class="mm_ps_answers manage_list ui-sortable">
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[0][answer]" value="jkjhk">
<span class="mm_ps_impressions">impressions: </span>
</li>
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[1][answer]" value="lknjlk">
<span class="mm_ps_impressions">impressions: </span>
</li>
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[2][answer]" value="òklkjl">
<span class="mm_ps_impressions">impressions: </span>
</li>
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[3][answer]" value="p09i0i">
<span class="mm_ps_impressions">impressions: </span>
</li>
The property that makes a browser to toggle them is the NAME of the RadioButton. Name all those radio buttons the same(each group should have same name) and they will toggle.
If it's not possible for to use the name attribute for one reason or another (for example your name attribute is populated dynamically - which I suspect it is), you could use jQuery to toggle the checkboxes:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').prop('checked', false);
$(this).prop('checked', true);
});
});
To group radio buttons together you must specify the same value in the name attribute.
ex. (from W3Schools)
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Edit:
To keep the order you were planning in the jsFiddle link you provided I would recommend you make an iterative statement on one list item :
(sorry for incorrect php code but i haven't used it in a long time)
foreach($answer as $value){
<li>
<input type="radio" name="answer" value="$value[is_right]">
<input type="text" name="$value[answer]" value="jkjhk">
<span class="mm_ps_impressions">impressions: </span>
</li>
}
i want to use zend_form to validate and filter the POST data,and some form fields are disabled element,
but when i use $form->isValid($post) filtering the data and use $form->getValues() to get the filtered data, it returns all the elements value (including the disabled elements value which i don't want).
such as :
<form method="post" action="">
<input type="text" disabled="disabled" name="account_id" value="123456">
<input type="text" name="name" value="">
<input type="text" name="email" value="">
<input type="text" disabled="disabled" name="created_date" value="2011-06-12">
<input type="text" disabled="disabled" name="created_by" value="admin">
<input type="submit">
</form>
so is there any way to get rid of the disables elements value ?
(because there are many fields and disabled elements ,so i don't want to trim them manually)
thanks!
This is some sort of a hack. We get all elements and iterate through it. When we see an element is disabled we can skip.
$somearray = array();
$elements = $form->getElements();
foreach ($elements as $key => $element) {
//echo $key;
if( $element->disabled ) {
continue;
}
$somearray[$key] = $element->getValue();
}
Hope this helps, or you can hack on it ;) .
It looks like this is not a bug, but an accepted workflow for validating forms. see this: http://framework.zend.com/issues/browse/ZF-6909
it looks like the accepted solution/trick is to use
$form->isValidPartial($this->getRequest()->getPost())
instead of
$form->isValid($this->getRequest()->getPost())
isValidPartial only tests the form fields that are present in the post. disabled elements should not end up posted.