this line:
<li><?php echo $form['genero']->renderLabel() ?></li>
is generating
<li>
<label for="usuario_genero">Genero</label>
<ul class="radio_list">
<li> <!-- this li doesn't have any id-->
<input type="radio" checked="checked" id="usuario_genero_0" value="0"
name="usuario[genero]"> <label for="usuario_genero_0">Chico</label>
</li>
<li> <!-- this li doesn't have any id-->
<input type="radio" id="usuario_genero_1" value="1"
name="usuario[genero]"> <label for="usuario_genero_1">Chica</label>
</li>
</ul>
</li>
I'd like to force the choices as inline, but the li's generated don't have the 'id' attribute.
What should i do?
Regards
Javi
In your CSS:
ul.radio_list li
{
display: inline;
}
Alternatively, you can create your own formatter for your radio widgets, or extend from the existing sfWidgetFormSelectRadio class and override the formatter() method to display the radio icons in the format you require.
Related
I want to build a dynamic form from a question-base, like in angular2 cookbook for dynamic forms. So I have a QuestionComponent:
<div [formGroup]="form">
<ul *ngIf="question.multi" [formArrayName]="question.key">
<li *ngFor="let control of form.get(question.key).controls; let lix=index">
<div>
<app-text-box [controlName]="lix"></app-text-box>
</div>
</li>
</ul>
<div *ngIf="!question.multi">
<app-text-box [controlName]="question.key"></app-text-box>
</div>
</div>
Based on question.multi there is a single FormControl or a FormArray. The Form-Input is in the TextBoxComponent:
<input class="form-control"
[formControlName]="controlName"
[id]="controlName" type="text">
But that does not work:
Error in ./TextBoxComponent class TextBoxComponent - inline
template:0:28 caused by: formControlName must be used with a parent
formGroup
How do I get the information about the FormGroup into the component?
I tried it this way:
QuestionComponent:
<div [formGroup]="form" class="col-md-10" >
<ul *ngIf="question.multi" [formArrayName]="question.key" class="list-group">
<li *ngFor="let control of form.get(question.key).controls; let lix=index">
<div>
<app-text-box [form]="form" [arrayName]="question.key" [controlName]="lix"></app-text-box>
</div>
</li>
</ul>
<div *ngIf="!question.multi">
<app-text-box [form]="form" [controlName]="question.key"></app-text-box>
</div>
</div>
TextBoxComponent:
<div [formGroup]="form">
<div [formArrayName]="arrayName">
<input class="form-control" [formControlName]="controlName" [id]="controlName" type="text">
</div>
</div>
But that yields an error when there is no FormArray.
I have a problem reading the $_POST data after i submitted a form from a dialog.
The setup is like this:
Page1 (clientcard.php) contains a link to a dialog:
Add new contact...
Page 2 (the addcontact.php) posts the data to clientcard.php:
<h3 style="margin-top: 0px;">Create contact</h3>
<form method="POST" name="formaddcontact" id="formaddcontact" action="clientcard.php">
<input type="hidden" name="client_ref" value="<?php echo $id;?>" />
<input type="hidden" name="mode" value="addcontact" />
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="naam">name:</label>
<input name="naam" id="naam" value="" data-clear-btn="false" type="text" />
</li>
<li class="ui-field-contain">
<label for="functie_ref">Department:</label>
<select name="functie_ref" id="functie_ref" data-native-menu="false">
<!-- some options -->
</select>
</li>
<li class="ui-field-contain">
<label for="telefoon">Phone:</label>
<input name="telefoon" id="telefoon" value="" data-clear-btn="false" type="text" />
</li>
<li class="ui-field-contain">
<label for="mobiel">Cell:</label>
<input name="mobiel" id="mobiel" value="" data-clear-btn="false" type="text" />
</li>
<li class="ui-field-contain">
<label for="email">Email:</label>
<input name="email" id="email" value="" data-clear-btn="false" type="text" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">Annuleren</div>
<div class="ui-block-b">Opslaan</div>
</fieldset>
</li>
</ul>
</form>
I read in other answers that you have to use something like parent().appendTo($("form:first"));but to be honest i have NO clue where to put that...
I use jquery mobile 1.4.3 and the jquery code that is actually popping up the dialog is generated by jqm and i have no <script> code whatsoever in my files...
Any help would be greatly appreciated.
Regards, Christiaan
I'm dynamically creating forms that will have an unknown number of semantically-related text-fields that must share a row (in Foundation's sense of the word) and be distributed evenly within it. The blockgrid class seems the better option, but I can't get the pre and post fix classes to work within it.
Note: this isn't my actual code, but rather a generalized form of the problem to increase community utility
<ul class="large-block-grid-<? echo count($choices);?> row"> <!-- $choices = array of fields-->
<h6><span data-tooltip class="has-tip" title="">TooltipText</span></h6>
<li class="row collapse">
<div class="small-9 columns">
<label for="inputA">
<input type="text" id="inputA" name="inputA" placeholder="val" />
</label>
</div>
<div class="small-3 columns">
<span class="postfix radius">PostFix Label A</span>
</div>
</li>
<li class="row collapse">
<div class="small-9 columns">
<label for="inputB">
<input type="text" id="inputB" name="inputB" placeholder="val" />
</label>
</div>
<div class="small-3 columns">
<span class="postfix radius">PostFix Label B</span>
</div>
</li>
</ul>
I end up with postifixes that are taller than their corresponding fields and problems with the left margins/padding (see screen cap). Anyone?
Eventually, I figured out my issues. Description of solution first, then the (slightly) improved code below:
1) the <ul> element isn't a row in Zurb's sense, and applying the "row" class was buggering up the margins; it should have been in one.
2) left align was broken because block-grids should, it turns out, be nested inside the usual grid; adding a wrapping <div> with a n-column class fixed it.
3) can't wrap <input> in <label> tags if it is to be paired with a postfix (this is what causes the height problems on the postfix <span>; may just be that I can't have the field nested inside a block-level element at a different level than the <span> element it's paired with; I just deleted the <label> elements and was happy enough to have resolved the problem).
The code:
<!-- note that I've now wrapped everything in a column-classed div -->
<div class='large-12 columns'>
<ul class='large-block-grid-*'> <!-- * = php's count on an array of fields-->
<h6><span data-tooltip class='has-tip' title="">TooltipText</span></h6>
<li class='row collapse'>
<div class="small-9 columns">
<input type='text' id='inputA' name='inputA' placeholder='val' />
</div>
<div class="small-3 columns">
<span class='postfix radius'>PostFix Label A</span>
</div>
</li>
<li class='row collapse'>
<div class="small-9 columns">
<input type='text' id='inputB' name='inputB' placeholder='val' />
</div>
<div class="small-3 columns">
<span class='postfix radius'>PostFix Label B</span>
</div>
</li>
</ul>
</div>
I want to use jQuery UI dialog box to open a form dialog where one can edit information about an employee.
The form looks like this
<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
<table>
<tbody>
<ul>
<li>
<label for="employee_firstname">Firstname</label>
<input type="text" name="employee[firstname]" id="employee_firstname" />
</li>
<li>
<label for="employee_lastname">Lastname</label>
<input type="text" name="employee[lastname]" id="employee_lastname" />
</li>
<ul>
</tbody>
</table>
</form>
I want to load the form elements prefilled with the employees data. eg
<label for="employee_lastname">Lastname</label> <input type="text" name="employee[lastname]" value="Miller" id="employee_lastname" />
So my idea was to ajax a complete form that fits the selected employee and replace it with the one above.
<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
<table>
<tbody>
<ul>
<li>
<label for="employee_firstname">Firstname</label>
<input type="text" name="employee[firstname]" value="Miller" id="employee_firstname" />
</li>
<li>
<label for="employee_lastname">Lastname</label>
<input type="text" name="employee[lastname]" value="Tom" id="employee_lastname" />
</li>
<ul>
</tbody>
</table>
</form>
I try doing that by
$( ".editButton" )
.button()
.click(function() {
var replace = $.ajax({
url: 'employee/edit?id=1', success: function() {
$( "#formAddNewRow" ).replaceWith(replace.responseText);
}
});
});
This works, but it stops working when I do:
$( "#formAddNewRow" ).dialog({});
There is no error message or warning. The form just gets eliminated from the DOM together with its parent node that was inserted by dialog().
How do I prefill the form succesfully?
Put your <form> into a <div> and attach the .dialog() to the div instead of to the form.
In the AJAX call replace the form as you are now, leaving its parent div attached to the dialog box.
This is necessary because jQuery UI internally maintains references to the element contained in the dialog box, and if you replace that element those references don't get updated. Replacing a child of that element will eliminate that problem.
<div id="formAddNewRowDialog">
<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
<table>
<tbody>
<ul>
<li>
<label for="employee_firstname">Firstname</label>
<input type="text" name="employee[firstname]" value="Miller" id="employee_firstname" />
</li>
<li>
<label for="employee_lastname">Lastname</label>
<input type="text" name="employee[lastname]" value="Tom" id="employee_lastname" />
</li>
<ul>
</tbody>
</table>
</form>
</div>
Wrap the form in a div like above then call
$( "#formAddNewRowDialog" ).dialog();
Is it best to wrap forms inputs in divs:
<div id="formContainer">
<div>
<label for="username">Username</label><input type="text" id="username">
</div>
<div>
<label for="password">Password</label><input type="text" id="password">
</div>
</div>
Or is it better to wrap in ul or ol list with list-style-type set to none
<ol id="formContainer">
<li>
<label for="username">Username</label><input type="text" id="username">
</li>
<li>
<label for="password">Password</label><input type="text" id="password">
</li>
</ol>
Or does it matter at all?
I would opt with a definition list:
<dl>
<dt><label for='name'>blah</label></dt>
<dd><input type='text'></dd>
</dl>
I always use tables because that makes it so easy to align the fields.