Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AnchalGoelAnchalGoel 

Grey the Input text field

I have used the disable value to disable my input text field. However, I would like it to be greyed out and then enable it based on a value picked in a picklist.
 
Is there a solution to that?
 
Thanks,
harlequinharlequin

Sure is, with javascript

Code:
<apex:page>
<script language="Javascript"> 
    function enableByChange(elem)
    {
        var inputElem = document.getElementById('inElement');
        inputElem.disabled = (elem.selectedIndex % 2)
    }
</script>
<apex:pageBlock title="Select Enabling">
    <apex:form >
    <apex:selectList id="select1" onchange="enableByChange(this)" size="1">
        <apex:selectOption itemValue="" itemLabel="" />
        <apex:selectOption itemValue="Enabled" itemLabel="Disabled" />
        <apex:selectOption itemValue="Disabled" itemLabel="Enabled" />
        <apex:selectOption itemValue="Enabled" itemLabel="Disabled" />
        <apex:selectOption itemValue="Disabled" itemLabel="Enabled" />
    </apex:selectList>
    <input type="text" id="inElement" value="Hello World" disabled="disabled" />
    </apex:form>
</apex:pageBlock>
</apex:page>


 
jwetzlerjwetzler
I don't think I'd go the javascript route because in your example you lose all of the controller binding.  You'll want to do something like this:

Code:
<apex:form id="theForm">
  <apex:inputText value="{!textValue}" disabled="{!disabled}"/>

  <apex:selectList value="{!selectValue}">
    <apex:selectOptions value="{!myOptions}"/>
    <apex:actionSupport event="onchange" action="{!doAction}" rerender="theForm"/>
  </apex:selectList>
</apex:form>

And in your doAction() method, you compare whatever is in getSelectValue() to decide if you want to enable the inputText, and call setDisabled(false);
 
AnchalGoelAnchalGoel

I have two follow up questions

a. Is there a way to reRender one field in a form which has multiple input fields, and not mess the placement of the whole form. When I am just re- rendering the field in the form, the field moves from its orignal location to top of the page and outside the form?

b.Is there a way to grey the text box itself. When we disable the text box, it still appears as if it is enabled?

 

Thanks
NJ_Devils_FanNJ_Devils_Fan
I am looking to do the same thing. I want to not only disable input fields, but change the color so that they actually appear disabled. Just making them unclickable will confuse users. I did a google search and found this, http://www.codetoad.com/javascript/enable_disable_form_element.asp , though I am new to coding and am not sure how it can be utilized in visualforce. Is what I am talking about possible?
 
One use case could be a standard drop down box that has a value of "Other" in it. Than a "Other Description" field next to it. We want the "Other description field to be both disabled and look differently unless the "Other" option is choosen in the drop down.
 
Another use case could be with checkboxes. Where checking one checkboxes enables other checkboxes. However the disabled ones need to appear differently until they are enabled. Similarly to this could be a check box, enabling/disabling a text field.
 
 
Any Ideas?
jwetzlerjwetzler
Guys am I missing something here?  When you disable an inputText or inputCheckbox they are not only not editable, but they are greyed out as well.  You're not seeing that happen?

Code:
public class disabledCon {

    public boolean getDisabled() {
        return disabled;
    }

    public boolean disabled = false;

    public void doAction() {
      disabled = !disabled;
    }
}

 
Code:
<apex:page controller="disabledCon">
  <apex:form id="theform">
    <apex:inputText disabled="{!disabled}"/>
    <apex:inputCheckbox disabled="{!disabled}"/>
  <apex:commandButton value="Click" action="{!doAction}" rerender="theform"/>
  </apex:form>
</apex:page>

 
AnchalGoelAnchalGoel
The validation works fine and the input text boxes get disabled, but they dont appear as if they are greyed out. They look the same way as they did before being in a disabled state, except that they arent editable.
 
Picture of the disabled text box:
 
The second box in this picture is disabled
jwetzlerjwetzler
Your picture does not show up for me.  Are you using inputText or inputField?  Do you have a small, reproducible case?
AnchalGoelAnchalGoel
Code:
Page:
<apex:inputField value="{!case.Employment_Category__c}" >
<apex:actionSupport event="onchange" action="{!empCategoryAction}" /></apex:inputField> 
               
<apex:inputtext id="nonGovernmentEmail" value="{!case.Non_Government_Email__c}" disabled="{!!nonGovernmentSectionSee}" />

Class:

 public Boolean nonGovernmentSectionSee;
    public void setnonGovernmentSectionSee(Boolean nonGovernmentSectionSee)
    {
        this.nonGovernmentSectionSee = nonGovernmentSectionSee;
    }
     
    public Boolean getnonGovernmentSectionSee()
    {
        return this.nonGovernmentSectionSee;
    }
public void empCategoryAction()
   {
       updateCase();
                
            if(thisCase.Employment_Category__c == 'Non - Government')
            {
                    setnonGovernmentSectionSee(true);
            }
            else
            {
                    setnonGovernmentSectionSee(false);
            }
    }


 

This is snippet of the code. Let me know what you think.
 
Thanks,
Anchal
jwetzlerjwetzler
How about a standalone case I can reproduce (full page, full controller, no custom objects)?  Because the snippet I posted works just fine.
AnchalGoelAnchalGoel
We are viewing the fields on Internet Explorer. However, when we display the form in Firefox, the fields are greyed out when they are disabled. Could this be the reason why you can see the fields as grey and we cannot? If so, is there a workaround for Internet Explorer such that the fields appear grey when disabled?
 
Thanks,
Anchal
jwetzlerjwetzler
Ah yes, that's the difference.  And a quick google search shows that this is an IE thing that several people have solved with CSS.  So that's how I'd do it.
AnchalGoelAnchalGoel

I am not that familiar with using CSS. Do you have any tips in incorporating CSS for our input fields?

Thanks,

Anchal
jwetzlerjwetzler
There are plenty of examples of exactly what you're trying to do on Google.
AnchalGoelAnchalGoel

Thank you. I appreciate your help,

Anchal