ValidForm Builder: Documentation for meta-parameter - validform

Almost anything that can be added to the form seems to accept a meta parameter. Unfortunately I haven't found any documentation for those. Is there any list of possible options? Where they work, what they do?
[note: question is specific about ValidFormBuilder and it is encouraged by the developers to ask Questions here this way]

metaparams I so far have stumbled across (to be continued.. maybe..)
ATTRIBUTES
almost anything will turn into an attribute. With the prefix field it will become an attribute of the input, otherwise of the wrapper.
Example:
$form->addField(
'test',
'test',
ValidForm::VFORM_STRING,
array( ),
array( ),
array (
'class' => 'testClass',
'fieldClass' => 'testFieldClass',
'data-test' => 'someTestData',
'fielddata-test' => 'moreTestData',
'useless' => 'pileOfJunk',
'fielduseless' => 'jetAnotherPileOfJunk'
)
);
results in:
div class="testClass vf__optional" useless="pileOfJunk" data-test="someTestData">
<label for="test">test</label>
<input id="test" class="vf__string vf__text testFieldClass" type="text"
useless="jetAnotherPileOfJunk" data-test="moreTestData" name="test" value="">
</div>
SPECIAL
some seem to have special functionality though:
start & end
can sometimes define ranges. E.g.:
$form->addField(
'rangeex',
'Rangeex',
ValidForm::VFORM_SELECT_LIST,
array(),
array(),
array(
"start" => 1,
"end" => 3
)
);
results in:
<div class="vf__optional">
<label for="rangeex">Rangeex</label>
<select id="rangeex" class="vf__one vf__select" name="rangeex">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
tip
??prop. tooltip.. didn't test..
default / hint
set a default value.. when using hint, the hint itself doesn't pass validation for req. fields. (not sure if / where that actually works, neither default nor hint add a default value to a select for example, though hint can still be used to make the validation fail if an option with the same value is selected)

Related

Laravel dynamic select box return index instead of value from collection

I am trying to make a select box that return value from $collection, but it gives me index of the selection instead of value.
screenshot:output of my code
screenshot:browser source code view
<div class="form-group">
{!! Form::label('Supervisor') !!}<br />
{!! Form::select('supervisor_id', $lecturers, null,
array('placeholder' => '----------------','class' => 'form-control')) !!}
</div>
and when it's show in browser source code view:
<option value="">----------------</option>
<option value="0">1111111111</option>
<option value="1">1212121212</option>
Anyone who know the syntax of laravel form to make this dynamic form gives value of $lecturers please help.
Ok here we go.
First in your controller, when you are getting the lecturers list, make sure you pluck just the name and the id...in this order:
$lecturers = Lecturer::pluck('name', 'id');
Then in your view:
{{Form::select('lecturer_id', $lecturers, null, ['class' => 'form-control'])}}
Thats all.
The array of lecturers, that you plucked will be divided into "id" and "values", hence the order of plucking is important.
Now, in your form source, you will see that the option value will be lecturers ids like "1, 2, 3" etc while the "selectable" options shown to users will be the names of the lecturers.
Like this:
<select class="form-control" name="lecturers_id"><option value="1">John Doe</option><option value="2">Jane Doe</option></select>
Try these and lets know your result.

Laravel 5.2 - assign class to option in select box

how one can assign class="some_class" to option in select box?
i would like to have
<select class="my_class" name="example">
<option selected="selected" value="">Choose something ...</option>
<option value="1" class="some_class">Hello</option>
<option value="2" class="some_class">World</option>
</select>
But I don't have any idea how to do it.. my form looks like:
{{ Form::select('example', array('1' => 'Hello', '2' => 'World'), null, array('class' => 'my_class', 'placeholder' => 'Choose position ...')) }}
How can I add "some_class" attribute to OPTION menu ?
The Form builder doesn't support class attributes for option tags. You will either need to build the select manually, or use JavaScript / jQuery to add the class to the option tags.
You can use my_class similar to this:
.my_class select option{
font-size: 20pt;
color:red;
}
This will affect only <option> elements of your <select> element.
Also, you can use JS to do this.

zend form element add div after input field

my zend form generates following code:
<dt id="register_username-label">
<label for="register_username" class="required">Membername*</label>
</dt>
<dd id="register_username-element">
<input type="text" name="register_username" id="register_username" value="" />
</dd>
but in some cases (handled in a separete decorator) i need to add some more html next to the input field (also in the dd tag). i have a instance of Zend_Form_Element_Text witch i could add some more decorators, but i don't know how to get this done :(
solution should look like this:
<dt id="register_username-label">
<label for="register_username" class="required">Membername*</label>
</dt>
<dd id="register_username-element">
<input type="text" name="register_username" id="register_username" value="" />
<div class="validate"><div class="validate-check"></div></div>
</dd>
You can add decorators to your form element in form file just as below
$form->addElement(
'text',
'register_username',
array(
'required' => false,
'decorators' => array(
array(
'HtmlTag', array(
'tag' => 'div',
'class' => 'validate'
)
)
)
)
);
And more i would like to share with you one interesting Link to understand how zend form is basically works.
Please let me know if i can help you more.

How to make a selectbox the label of a radio button in Zend Fw

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.

Styling individual radio buttons in drupal form

I have this group of radio buttons in which each of individual button has of its own position set through style attribute. I would like to how can I archive the same by using drupal form api. I found how to style as whole but, not as individual control within group. Here's how my html code look like -
<input type="radio" name="base_location" checked="checked" value="0" style="margin-left:70px;float:left;"/><span style="float:left;">District</span>
<input type="radio" name="base_location" value="1" style="margin-left:50px;float:left;"/><span style="float:left;">MRT</span>
<input type="radio" name="base_location" value="2" style="margin-left:60px;float:left;"/><span style="float:left;">Address</span>
And this is the drupal code I'm stuck at -
$form['base_location'] = array(
'#type' => 'radios',
'#title' => t('base location'),
'#default_value' => variable_get('search_type', 0),
'#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
'#description' => t('base location'),
I'm aware of #type=>radio existence. However, I do not know how to group all my radio buttons together in this regard. If I use same array key for all of them, they would collide each other. If I don't, they aren't seen as part of the same group. I thank you in advance.
If you're using Drupal 6.x Form API and #type=>radios (http://api.drupal.org/api/function/theme_radios/6) each radio element will have its unique id which you can use to apply proper CSS.
The example you provided
$form['base_location'] = array(
'#type' => 'radios',
'#title' => t('base location'),
'#default_value' => variable_get('search_type', 0),
'#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
'#description' => t('base location'),
);
should output markup like so:
<div id="base-location-0-wrapper" class="form-item">
<label for="base-location-0" class="option"><input type="radio" class="form-radio" value="0" name="base_location" id="base-location-0"> District</label>
</div>
<div id="base-location-1-wrapper" class="form-item">
<label for="base-location-1" class="option"><input type="radio" class="form-radio" value="1" name="base_location" id="base-location-1"> MRT</label>
</div>
<div id="base-location-2-wrapper" class="form-item">
<label for="base-location-2" class="option"><input type="radio" class="form-radio" value="2" name="base_location" id="base-location-2"> Address</label>
</div>
Apply the following CSS and you should be set.
#base-location-0-wrapper,
#base-location-1-wrapper,
#base-location-2-wrapper {
display:inline;
margin-left:50px;
}
The answer is to use CSS with the html that you already have. It looks like you just want to change the radio buttons' display to 'inline' with 10px margins, which you can do. (And if you did break the radios up into separate elements within a fieldset, they'd no longer interact with each other.)