0

I have a ZendX_Jquery_Form where I am having a trouble setting placeHolder for a select Element. 

$month->setAttribs(
        array(
            'required'  =>  TRUE,
            'placeHolder'   =>  'Month'
        ));

I wanted it too look like this: enter image description here

but all I am getting is thi: enter image description here

On my firebug output html looks like this

<select id="months_at_residence-lengthMonth" placeholder="Month" required="1" name="months_at_residence[lengthMonth]">

I have absolutely no idea why this is not working.

I need help to set this such that when i click on it placeholder text hides. Just incase this dont work straight using zend I know this can be done using js/css . If I do it with css and javascript how can I achieve this for all select elements ?

Hope the question was clear enough

ro ko
  • 2,906
  • 3
  • 37
  • 58

3 Answers3

3

Placeholders don't work with select form element, what you should do instead is to use a default value and disable it as follows:

$month->addMultiOption('--', 'Month');
$month->setOptions(array('disable' => array('--')));

This will output:

<select id="country" name="country" class="valid">
    <option disabled="disabled" label="--" value="--">Month</option>
    <option label="January" value="Jan">January</option>
    <option label="February" value="Feb">February</option>
    // ...
</select>

Note from W3Schools:

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Liyali
  • 5,643
  • 2
  • 26
  • 40
  • 2
    this is correct, placeholders don't work with select element. – Ram Apr 07 '12 at 06:06
  • I never realized that, well it does work when youre using zend dojo form how is that ? I have been working with dojo and it always has worked – ro ko Apr 07 '12 at 07:41
  • 1
    @Rohan: From the [Dojo Toolkit documentation](http://dojotoolkit.org/documentation/tutorials/1.6/selects_using_stores/): `We add placeHolder text for FilteringSelect and ComboBox — Select does not support this.` – Liyali Apr 07 '12 at 09:55
1

Why not make the first option in the select the 'placeholder' text?

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    ...
</select>

See https://stackoverflow.com/a/5805194/435460

Community
  • 1
  • 1
JesseBuesking
  • 6,496
  • 4
  • 44
  • 89
  • I am currently/already doing it like that, Just trying to figure out why setPlaceHolder is not working – ro ko Apr 07 '12 at 05:51
0

you can add the placeholder by jquery:

  $("#months_at_residence-lengthMonth").attr("placeholder", "Month");

suggested solution here, can be helpful:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Ram
  • 143,282
  • 16
  • 168
  • 197