I am using Zend_Form_Element_Select to create a select form element. Here's how the inner HTML is rendered:
<option value="9" label="Biscuits">Biscuits</option>
<option value="10" label="Scones">Scones</option>
<option value="11" label="Cakes">Cakes</option>
Now, I want to be able to include a custom data attribute, data-qty, with each option, per the following example:
<option value="9" label="Biscuits" data-qty="27">Biscuits</option>
<option value="10" label="Scones" data-qty="12">Scones</option>
<option value="11" label="Cakes" data-qty="21">Cakes</option>
I can't see any way to do this out of the box so I think I'll need to extend the select element, create a new decorator, or some such solution. Any ideas?
Related
I'm trying to have a TYPO3 request form that is called from a simple link with a parameter, e.g.
request
The TYPO3 form has a select box with some options:
<select id="field-10" name="tx_form[Product-line]">
<option value="11">Product 1</option>
<option value="12">Product 2</option>
<option value="13">Product 3</option>
</select>
How can I preselect the option with a get parameter here?
I have two selects that initially render this way in both firefox and IE8:
<select id="cntctMap_PRSNL_TITL_TXT" >
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA"">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
So far so good as only the first select has a value returned from the server-side, the second does not.
On document load I pull the html for the second select, i.e. $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA").html());
In IE the returned string is:
<option selected value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
Notice the 'selected' attribute
But in firefox it's:
<option value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
The reason this is important to me is that I want to prepend an option, i.e.
$("#cntctMapCUST_SEGM_US_RETAIL_SALES_SMA").prepend(selectOption);
And have the prepended option value show in the dropdown box, but I only want to do this for those selects that don't have a server-side value.
In IE, I can't tell which is which since 'selected' comes back in all cases. This is also true if I use $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA option:selected")); In IE, it always returns a 'selected' option.
Anyone know a way around this?
As discussed in the comments, I suggest adding a special class (e.g. has-default) to selects that have server-side values. This is done on the server-side when you render the tags.
<select id="cntctMap_PRSNL_TITL_TXT" class="has-default">
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
...
Using jQuery, you can target selects with server-side values:
$('select.has-default').prepend(selectOption);
The above statement will only prepend selectOption to selects that have the has-default class. This is more consistent because it doesn't rely on whether browsers mingle with the <option> tags.
I am using Zend 1.11.10 and I am trying to set a value in a dropdown list. My code is:
$state = new Zend_Form_Element_Select("mytest");
$state->setLabel("mytest")
->setName("mytest");
$state->addMultiOption('Pear','PE');
$state->addMultiOption('Banana','BA');
$state->addMultiOption('Orange','OR');
$state->addMultiOption('Kiwi','KI');
$state->setValue('Banana');
$this->addElement($state);
The problem is that the generated HTML code is:
<select id="mytest" name="mytest" style="opacity: 0;"><option value="PE">Pear</option><option selected="selected" value="BA">Banana</option><option selected="selected" value="OR">Orange</option><option selected="selected" value="KI">Kiwi</option></select>
It is making "selected" all options after "Banana". Is this a bug in Zend?
Looks to me like you're using a non-standard FormSelect view helper. For starters, your <option> value attribute and text values are reversed and you have no label attributes.
Eg, for
$state->addMultiOption('Pear','PE');
the generated markup should be
<option value="Pear" label="PE">PE</option>
I'd also hazard a guess that there's some JavaScript playing with the DOM due to the opacity style attribute.
Using your code exactly I get:
<select name="mytest" id="mytest">
<option value="Pear" label="PE">PE</option>
<option value="Banana" label="BA" selected="selected">BA</option>
<option value="Orange" label="OR">OR</option>
<option value="Kiwi" label="KI">KI</option>
</select>
this is also with 1.11.10. Are you using custom form classes or anything else that might be affecting it?
I have a form with 3 lists like this and I need every time one of the lists change put the others in cero 0, I need this in prototype or pure Javascript
<select id="1" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="2" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="3" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
thanks.
Here's a working demo using Prototype
Basically, it finds all select elements with the class resetOthers, and listens for the onchange event (don't use the onchange HTML attribute - it's cleaner to add the JavaScript behavior via JavaScript once the page has loaded).
When a select changes, it loops through the select elements, and sets each to the value of the first option (except for the one that triggered the event, of course).
<select name="day" id="day">
<option value="0" label="Day:">Day:</option>
<option value="1" label="1">1</option>
</select>
<select name="month" id="month">
<option value="0" label="Month:">Month:</option>
<option value="1" label="January">January</option>
</select>
<select name="year" id="year">
<option value="2010" label="2010">2010</option>
</select>
Can I build a form part like this format using Zend_Form and Decorator? I have read many posting but couldn't find any which helps to pack more than one elements together inside a "dd" tag. Does it possible or not?
http://weierophinney.net/matthew/archives/217-Creating-composite-elements.html
This post goes onto explain how to create a composite object using Zend_Form_element and settings up custom decorators.
It is also built around having all date fields grouped together so you could probably just modify this example to get what you want.