Question

I have the following code which displays and enables a hidden field if ‘Other’ is selected, else that field is hidden from view and disabled.

Type: <%= f.select(:origin_type,
         [['origin X', 'x'],
          ['Other', 'Other'],
          ['Origin Y', 'y']
          ],
       {:prompt => "Please select"}, 
       {:onchange => "if (this.value == 'Other') 
        {document.getElementById('otherOrigin').style.display = 'block';
         document.getElementById('otherSpecies').disabled = false ;}
        else 
       {document.getElementById('otherSpecies').style.display = 'none';
        document.getElementById('otherSpecies').disabled = true ; }"
       }
       ) %>



<span id="otherOrigin"  style="display:none;"> If other, please state: <%= f.text_field :origin_type, :disabled=>true  %></span>

By default, the text_field “otherOrigin” is hidden and disabled, but I would like to display and enable it if ‘Other’ is selected.
The code “document.getElementById('otherSpecies').disabled = false;” does not seem to enable it when other is selected.

Any suggestion is most appreciated.

Answer 1

to enable

You need to remove the disabled attribute totally from the input.

document.getElementById('otherSpecies').removeAttribute( "disabled" ) ;

to disable

To be valid XHTML you need to set disabled="disabled".

document.getElementById('otherSpecies').disabled = "disabled" ;